NSI,JS et jeu du Taquin – Labodemaths.fr

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

</head>
<body>
<div id="plateau">
<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">
<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">
</div>
    </body>
<script src="script.js"></script>
	</html>

Le Css

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

#regle {
	margin-bottom: 50px;
}

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

et le .js à compléter :

// on declare la disposition initiale du taquin
var taquin=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,"V"];

// on recupere la liste des images
var toutes_mes_images=............................;

// on attribue une id à chaque image
// correspondant à son index
// on parcourt la liste par index
for (var i=0;i<=.......;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();
       
    }
// on attribue à chaque image la source
// correspondant à la valeur correspondante
// dans le tableau taquin
for (var i=0;i<=15;i++){
    var mon_image=toutes_mes_images[i];
	if (taquin[i]==............){
        mon_image.src="images/vide.png";
    }
    else {
       var  n=i+1; 
        mon_image.src="images/"+taquin[i]+".png";
       
    }
}
// on place un ecouteur d'événement mousedown sur chaque image
// appelant la fonction on_bouge()

for (var i=0;i<=15;i++){
    ...............................;
   ................................;
}

function on_bouge(evt){
    // on recupere l'id de l'image sur laquelle on a cliqué en la convertissant en int
    let id_image=parseInt(......................);
    // on recupere sa source
    let source_image=......................);
   
    // on cherche si la case vide est au dessus
    if (id_image>3){
        let n_image_en_dessous=(id_image-4).toString();
        
        if (document.getElementById(n_image_en_dessous).getAttribute("src")=="images/vide.png"){
            this.src="images/vide.png";
            document.getElementById(n_image_en_dessous).src=source_image;
                                    }
    }
    // On cherche si la case vide est en dessous
    if (id_image<12){
        let n_image_au_dessus=(id_image+4).toString();
        
        if (document.getElementById(n_image_au_dessus).getAttribute("src")=="images/vide.png"){
            this.src="images/vide.png";
            document.getElementById(n_image_au_dessus).src=source_image;
                                    }
    }
    // on cherche si la case vide est à gauche
    if (id_image%4!=0){
        let n_image_a_gauche=(id_image-1).toString();
        
        if (document.getElementById(n_image_a_gauche).getAttribute("src")=="images/vide.png"){
            this.src="images/vide.png";
            document.getElementById(n_image_a_gauche).src=source_image;
                                    }
    }
    // on cherche si la case vide est à droite
    if ((id_image+1)%4!=0){
        let n_image_a_droite=(id_image+1).toString();
        
        if (document.getElementById(n_image_a_droite).getAttribute("src")=="images/vide.png"){
            this.src="images/vide.png";
            document.getElementById(n_image_a_droite).src=source_image;
                                    }
    }
                                    
}

et les images :

images Télécharger