décembre 8, 2024 / NSI

NSI : JS,HTML et CSS, TP2 le tic tac Toe

On considère le html suivant :

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Tic Tac Toe</title>
</head>
<body>
<div id="plateau">
<div id="regle"></div>
<img src="images/vide.png">
<img src="images/vide.png">
<img src="images/vide.png">
<img src="images/vide.png">
<img src="images/vide.png">
<img src="images/vide.png">
<img src="images/vide.png">
<img src="images/vide.png">
<img src="images/vide.png">
<h1>Cliquer pour commencer</h1>
</div>
    </body>
	<script src="script.js"></script>
	</html>

le css suivant :

#plateau {
    width: 33%;
    margin-left: 33%;
    margin-top:50px;
}

img {
    width: 30%;
}

et les images suivantes :

videTélécharger
rondTélécharger
croixTélécharger

1. Mise en forme : CSS

Modifier le html et le css pour :
– afficher les règles du jeu dans l’élément regle,
– choisir une police de votre choix en utilisant https://fonts.google.com/ et l’appliquer à vos règles. On choisira également une taille de police et une couleur,
– choisir une autre police, une autre couleur et une autre taille pour l’élément h1,
– choisir une couleur de fond pour le plateau et une autre pour votre page ou si vous le préférez une image de fond.

2. Interactivité : JS

Ecrire un script js qui permettra aux joueurs de jouer en cliquant sur les images.
On indiquera Joueur 1 ou Joueur 2 dans l’élément h1 selon le tour des joueurs.

3. NIVEAU ++ JS

Le script JS permettra de déterminer lorsqu’un joueur a gagné.

correction 1 : interaction avec appel des fonctions js dans le html

le html à compléter

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
  <title>Tic Tac Toe</title>
  
</head>
<body>
<div id="plateau">
<div id="regle"></div>
<img id="image1" src="images/vide.png" onclick="changer_image(1)">
<img id="image2" src="images/vide.png" onclick="changer_image(2)">
<img id="image3" src="images/vide.png" onclick="changer_image(3)">
<img id="image4" src="images/vide.png" onclick="changer_image(4)">
<img id="image5" src="images/vide.png" onclick="changer_image(5)">
<img id="image6" src="images/vide.png" onclick="changer_image(6)">
<img id="image7" src="images/vide.png" onclick="changer_image(7)">
<img id="image8" src="images/vide.png" onclick="changer_image(8)">
<img id="image9" src="images/vide.png" onclick="changer_image(9)">
<h1>Cliquer pour commencer</h1>
</div>
    </body>

	<script src="script.js"></script>
	</html>

le js

var image1=document.getElementById("image1");
var joueur=1;

function changer_image(mon_image){
	var image=document.getElementById("image"+mon_image);
	var texte=document.getElementById("texte");
	if (image.getAttribute("src")=="images/vide.png"){
		if (joueur==1) {
	image.src="images/croix.png";
	joueur=2;
	texte.textContent="Au joueur 2 de jouer";
	}
	else {
		image.src="images/rond.png";
		joueur=1;
		texte.textContent="Au joueur 1 de jouer";
	}	
	}
	}

un exemple de css

#plateau {
    width: 33%;
    margin-left: 33%;
    margin-top:50px;
}
h1 {
	color: #FF5733;
	font-size: 30px;
	width: 50%;
    margin-left: 25%;
	font-family: "Bowlby One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body {
	background-image: url("images/fond.jpg");
	background-repeat: no-repeat;
	
}
img {
    width: 30%;
}

Version bis

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
  <title>Tic Tac Toe</title>
  
</head>
<body>
<div id="plateau">
<div id="regle"></div>
<img src="images/vide.png" >
<img  src="images/vide.png" >
<img src="images/vide.png" >
<img src="images/vide.png" >
<img src="images/vide.png" >
<img  src="images/vide.png" >
<img  src="images/vide.png" >
<img  src="images/vide.png" >
<img  src="images/vide.png" >
<h1 id="texte">Cliquer pour commencer</h1>
</div>
    </body>
 
	<script src="script.js"></script>
	</html>

le js avec tagname et this

var mes_images=document.getElementsByTagName("img");
for (var i=0;8;i++){
	var mon_image=mes_images[i];
	mon_image.addEventListener("mousedown",changer_image,false);
}
var joueur=1;
function changer_image(evt){
	var texte=document.getElementById("texte");
	if (this.getAttribute("src")=="images/vide.png"){
		if (joueur==1) {
		this.src="images/croix.png";
	joueur=2;
	texte.textContent="Au joueur 2 de jouer";
	}
	else {
		this.src="images/rond.png";
		joueur=1;
		texte.textContent="Au joueur 1 de jouer";
	}	
	}
	}

CatégoriesNSI