décembre 20, 2023 / NSI

NSI, 2023-2024: entrainement js, jeu de memory

  • Le mini-projet sera à faire en binôme ou en monôme.
  • Il présentera une page html proposant 4 rangées de 5 cartes retournées.
    On pourra cliquer sur les images pour faire apparaître la figure qu’elles cachent.
  • Si deux cartes identiques sont retournées successivement, elles restent retournées.
  • Le jeu est fini lorsque toutes les cartes sont retournées.

  • Barème :
    – une page html et une page css présentant le jeu : 5 points,
    – un fichier js permettant de gérer les interactions et le jeu :
    – 5 points : si lorsque l’on clique sur une image, on fait apparaître la figure cachée,
  • – 5 points : si l’on clique sur successivement sur 2 images identiques, les figures restent retournées. Un compteur affiche le nombre de tours ( un tour consiste à retourner 2 cartes ),
    – 5 points : les cartes seront placées de manière aléatoire à chaque début de partie.

proposition de correction

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>Memory</title>

</head>
<body>
<div id="plateau">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
<img src="images/dos.png">
</div>
    </body>
<script src="script.js"></script>
	</html>

le js

// on declare la disposition initiale du memory
var cartes=[1,2,0,1,3,3,4,8,9,2,7,4,5,6,6,5,8,9,0,7];
var carte=1;
var bloque=false;
// on recupere la liste des images
var toutes_mes_images=document.getElementsByTagName("img");
var cartes1=[];

// on melange les cartes
var nbrs_cartes=cartes.length;
for (var i=0;i<nbrs_cartes;i++){
	var alea=Math.floor(Math.random() * cartes.length);
	cartes1.push(cartes[alea]);
	cartes.splice(alea, 1);
}
cartes=cartes1;
// on attribue une id à chaque image
// correspondant à son index
// on parcourt la liste par index
for (var i=0;i<=19;i++){
    var mon_image=toutes_mes_images[i];
// on utilise la métdode toString() pour transformer un int en str
	mon_image.id=i.toString();
	mon_image.addEventListener("mousedown",on_retourne,false);
    }
function on_retourne(evt){
	if ((this.getAttribute("src")=="images/dos.png")&&(bloque==false)){
		if (carte==1){
			
			this.src="images/"+cartes[this.id]+".png";
			id_image1=this.id;
			carte=2;
		}
		else {
			
			this.src="images/"+cartes[this.id]+".png";
			img1=document.getElementById(id_image1);
			src_image1=img1.getAttribute("src");
			if (src_image1!=this.getAttribute("src")){
				id_image2=this.id;
				bloque=true;
				setTimeout(on_retourne_image, 2000)
			}
			carte=1;
		}
	}
}

function on_retourne_image() {
	img1=document.getElementById(id_image1);
	img2=document.getElementById(id_image2);
	img1.src="images/dos.png";
	img2.src="images/dos.png";
	bloque=false;
	
	
}

le css

#plateau {
    width: 60%;
    margin-left: 33%;
    margin-top:50px;
	font-size: 30px;
	color : rgb(62, 158, 191);
}

#regle {
	margin-bottom: 50px;
}

img {
    width: 18%;
    border-color: black;
    border-width: 2px;
    border-style: double;
}

CatégoriesNSI