Le but du jeu :
3 portes sont proposées au joueur, derrière 2 d’entre elles se cachent un monstre , derrière la dernière un trésor. L’utilisateur clique sur l’un des portes et doit découvrir ce qu’elle cache.
barème : 5 points pour chacune des étapes suivantes :
– mise en place de la page html, du css, du js,
– mise en place d’une interaction : la carte se retourne lorsque l’on clique sur celle-ci,
– les cartes retournées correspondent à la liste portes,
– reset : un message alert signifie si le joueur a gagné ou perdu, les cartes sont retournées et remélangées.
On considère le code 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">
<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 Monty Hall</title>
</head>
<body>
<p>Problème de Monty Hall</p>
<p>Un tresor se cache derrière l'une de ces 3 portes.</p>
<p>Cliquer sur l'une d'elle pour essayer de le trouver.</p>
<p>Attention, derrière les autres portes se cache un monstre !</p>
<img src="images/porte.jpeg">
<img src="images/porte.jpeg">
<img src="images/porte.jpeg">
<p>Score : </p>
</body>
<script src="script.js"></script>
</html>le js suivant
var portes=["monstre","tresor","monstre"];
on_melange();
alert(portes);
function on_melange(){
liste_melangee=[];
for (var i=0;i<3;i++){
var alea=Math.floor(Math.random() * portes.length);
liste_melangee.push(portes[alea]);
portes.splice(alea, 1);
}
portes=liste_melangee;
}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: 25%;
}et les images suivantes :
