Jeu de taquin en JS - les images ne s'affichent pas [Résolu]

Signaler
Messages postés
6
Date d'inscription
mercredi 10 septembre 2003
Statut
Membre
Dernière intervention
22 mars 2020
-
 francoisloup -
Bonjour,
Je gère, en amateur éclairé, le site de notre asso, et pour amuser les visiteurs dans ces tristes moment, je voulais ajouter un petit jeu de taquin. Il s'agit de reconstituer un tableau. J'ai trouvé un petit script, dont j'ai essayé de joindre l'auteur sans succès pour pouvoir l'utiliser, en javascript orienté DOM. Il marche très bien avec des chiffres (version d'origine), mais il n'affiche pas les images partielles du tableau (version modifiée par moi), juste l'icône image non trouvée.

J'ai beaucoup cherché, mais je n'ai pas le niveau en JS.

J'ai mis le script complet ci-dessous (Il demande à être finalisé au niveau HTML).

Si quelqu'un pouvait m'aider à trouver le problème, la petite asso serait la plus heureuse.

Merci d'avance
Cordialement
FLOUP
www.nayart.fr

<script language="javascript">
// Jeu : Puzzle
// Auteur : Samir AMGOUNE
// E-mail : ghost6x6@yahoo.fr


//*******Initier le puzzle
function init()
{
var html="";
for(var cpt=0;cpt<4;cpt++)
{
for(var cmp=0;cmp<4;cmp++)html+="<div id='"+(cpt*4+cmp)+"' style='position:absolute;left:"+(cmp*150)+";top:"+(cpt*150)+";width:150;height:150;background-color:grey;' onclick='move(this.id)'></div>";
}
document.all.cadre.innerHTML+=html;
}

//*********La fonction main

function start()
{
var tablo=Array(15);
var tablimg=["image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg","image6.jpg","image7.jpg","image8.jpg","image9.jpg","image10.jpg","image11.jpg","image12.jpg","image13.jpg","image14.jpg","image15.jpg"];
for(var cpt=0;cpt<15;cpt++)tablo[cpt]=0;

var cpt=0;

while(cpt<15)
{
var rnd=parseInt(Math.random()*15);
if(tablo[rnd]==0)
{
//alert(tablimg[rnd]);
//

document.getElementById(cpt).innerHTML="<img src='images-puzzle/"+tablimg[rnd]+"' >";

tablo[rnd]=1;
cpt++;
}
}//40

}


//*******La fonction pour faire bouger les carreaux
function move(id)
{
var tampon;
if(document.getElementById(id).style.top==document.getElementById(15).style.top)
{
if((parseInt(document.getElementById(id).style.left)==parseInt(document.getElementById(15).style.left)+150) | (parseInt(document.getElementById(id).style.left)==parseInt(document.getElementById(15).style.left)-150))
{
tampon=document.getElementById(15).style.left;
document.getElementById(15).style.left=document.getElementById(id).style.left;
document.getElementById(id).style.left=tampon;
}
}
else if(document.getElementById(id).style.left==document.getElementById(15).style.left)
{
if((parseInt(document.getElementById(id).style.top)==parseInt(document.getElementById(15).style.top)+150) | (parseInt(document.getElementById(id).style.top)==parseInt(document.getElementById(15).style.top)-150))
{
tampon=document.getElementById(15).style.top;
document.getElementById(15).style.top=document.getElementById(id).style.top;
document.getElementById(id).style.top=tampon;
}
}

}

</script>

<body onload="init()">
<center><a href="javascript:start()">Start</a>
<div id="cadre" style="position:absolute;left=290;top:100;width:200;height:200;background-color:green;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center><h4>Clickez sur les cases pour les faire bouger
</body>

2 réponses

Quand vous jouer et ouvrez la console (F12 sous chrome), sous l'onglet console y a-t-il des erreurs ?? Reproduisez ce qui ne marche pas et donnez-nous alors le/les messages d'erreur

Bonsoir
Merci pour votre réponse.
J'ai trouvé ce qui n'allait pas. En fait j'utilise NotePad++ et j'utilisais l'option "Exécuter avec..", ce qui exécutait la version locale du script et non la version en ligne. Dans ce cas le chemin des fichiers images n'était pas le bon.
Désolé pour le dérangement.
Merci encore.

Cordialement
F LOUP