NSI : JS,HTML et CSS, TP3 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></html>

le css suivant :

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

img {
    width: 30%;
}

et les images suivantes :

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é.

Proposition de correction :

le html :

<!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=Mochiy+Pop+P+One&display=swap" rel="stylesheet">
 <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=Anton&display=swap" rel="stylesheet">
  <title>Tic Tac Toe</title>
  
</head>
<body>
<div id="plateau">
<div id="regle">Le joueur qui arrive à aligner trois symboles identiques, horizontalement, verticalement ou en diagonale a gagné.</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>
<script src="mon_script.js"></script>
    </body></html>

le css :

#plateau {
    width: 30%;
    margin-left: 33%;
    margin-top:50px;
	font-family: 'Mochiy Pop P One', sans-serif;
	font-size: 16px;
    color: rgb(255,0,0);
	padding-left: 5px;
	background-color: rgb(200,200,200);
}

img {
    width: 30%;
}
body {
	
}
h1 {
	font-family: 'Anton', sans-serif;
	color : rgb(150,150,150);
	font-size: 28px;
}

le js :


var mes_images=document.getElementsByTagName("img");
// on recupère tous les éléments images
for (var i = 0; i < mes_images.length; i++) {
    mon_image=mes_images[i];
   // on ajoute un écouteur d'événements
    mon_image.addEventListener('click', changer_image);
}
var joueur=1;
function changer_image(evt){
	if (this.getAttribute("src")=="images/vide.png"){
		if (joueur==1){
	  this.src="images/rond.png";
	  joueur=2;
  }
  else {
	   this.src="images/croix.png";
	  joueur=1;
  }
	}
}