janvier 4, 2026 / 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é.

Proposition de correction 1 : le js des années 2000

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">
  <title>Tic Tac Toe</title>
  <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=Patua+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="plateau">
<div id="regle">
<p>Pour gagner, il suffit d'aligner 3 symboles identiques</p>
</div>
<img id="1" src="images/vide.png" onclick="changer()">
<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>

les css

#plateau {
    width: 33%;
    margin-left: 33%;
    margin-top:50px;
	color: #B58A81;
	font-family: "Patua One", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
}
body {
	background-color: #265E80;
	
}
img {
    width: 30%;
}

le js

function changer(){
	var mon_image=document.getElementById("1");
	mon_image.setAttribute("src","images/croix.png");
	
	
}

Evolution :

<!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>
  <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=Patua+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="plateau">
<div id="regle">
<p>Pour gagner, il suffit d'aligner 3 symboles identiques</p>
</div>
<img id="1" src="images/vide.png" onclick="changer(1)">
<img id="2" src="images/vide.png" onclick="changer(2)">
<img id="3" src="images/vide.png" onclick="changer(3)">
<img id="4" src="images/vide.png" onclick="changer(4)">
<img id="5" src="images/vide.png" onclick="changer(5)">
<img id="6" src="images/vide.png" onclick="changer(6)">
<img id="7" src="images/vide.png" onclick="changer(7)">
<img id="8" src="images/vide.png" onclick="changer(8)">
<img id="9" src="images/vide.png" onclick="changer(9)">
<h1>Cliquer pour commencer</h1>
</div>
    </body>
	<script src="script.js"></script>
	</html>

le js

joueur=1;
function changer(numero){
	var mon_image=document.getElementById(numero);
	
	if (mon_image.getAttribute("src")=="images/vide.png")
	{
		if (joueur==1){
	mon_image.setAttribute("src","images/croix.png");
		joueur=2;}
		else{
	mon_image.setAttribute("src","images/rond.png");
		joueur=1;}
	}
}

CatégoriesNSI