décembre 6, 2023 / NSI

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 :

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

CatégoriesNSI