NSI, TP JS NOTE SIMON – Labodemaths.fr

But du jeu : une couleur est tirée aléatoirement, l’utilisateur marque un point lorsqu’il a cliqué sur l’image correspondant à la bonne couleur. Une nouvelle couleur est alors tirée.

Barème : 5 points pour chacune des phases suivantes
– mise en place html, css et js ,
– interactions : la couleur est annoncée au joueur, lorsqu’il clique sur une image, celle-ci est modifiée,
– compteur : un compteur affiche le nombre de points marqués sur le nombre de tentatives,
– reset : une nouvelle couleur est tirée et est annoncée.

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=Bowlby+One&display=swap" rel="stylesheet">
  <title>SIMON</title>
  </head>
<body>
<div id="plateau">
<p id="texte">Cliquer sur la couleur</p>
<h1 id="couleur"></h1>
    <img src="images/rouge.png">
     <img src="images/bleu.png">
     <img src="images/jaune.png">
    <img src="images/vert.png">
    <h1 id="score">Score : </h1>
    
</div>
    </body>
	<script src="script.js"></script>
	</html>

le css suivant

#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;
  text-align: center;
}
p {
	color: #FF5733;
	font-size: 20px;
	text-align: center;
	width: 80%;
    margin-left: 10%;
	font-family: "Bowlby One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
img {
    width: 45%;
}

le js

var portes=["rouge","vert","jaune","bleu"];
var couleur=portes[Math.floor(Math.random() * portes.length)];
alert(couleur);

les images :

images Télécharger