L’utilisateur change la couleur des 2 cases adjacentes lorsqu’il clique sur l’une d’entre elles. Le but du jeu est de les avoir toutes en noir si c’est possible.
Barème : 5 points par étapes suivantes :
– mise en place du html, css, js,
– mise en place d’une interaction : la case change de couleur lorsqu’on clique sur elle,
– la case ne change pas mais ce sont les cases adjacentes qui changent de couleur,
– un compteur de tentatives affiche le nombre de fois où l’utilisateur a cliqué.
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>TP</title>
</head>
<body>
<div id="plateau">
<p>Cliquer sur une case</p>
<p>A vous d'essayer d'avoir toutes les cases noires.</p>
<img src="images/blanc.png">
<img src="images/blanc.png">
<img src="images/blanc.png">
<img src="images/blanc.png">
<img src="images/blanc.png">
<p><span id="tentatives"></span></p>
</div>
</body>
<script src="script.js"></script>
</html>le 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;
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: 17%;
}les images :
