Jeu de taquin en JS - les images ne s'affichent pas

Résolu/Fermé

frloup Messages postés 6 Date d'inscription mercredi 10 septembre 2003 Statut Membre Dernière intervention 22 mars 2020 - 22 mars 2020 à 12:42
francoisloup - 23 mars 2020 à 20:37

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>

A voir également:

Jeu de taquin en JS - les images ne s'affichent pas
94 jeu - Télécharger - Puzzle & Réflexion
Jeu zuma - Télécharger - Jeux vidéo
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? ✓ - Forum Photoshop
Des images - Guide
PIX - Forum Word

2 réponses

Réponse 1 / 2

de1irium
23 mars 2020 à 20:23

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

Réponse 2 / 2

francoisloup
23 mars 2020 à 20:37

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

Discussions similaires

code couleur associé a une image

webcame eton et 838b

calcule nombre des pixels "noir" dans un image (noir/blanc)

Javascript Arrondi à 2 chiffres après la virgule

Difusion en direct