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
Jeux de moto: jeu de course 3d - Télécharger - Course
Inoué veut diffuser une partie de jeu vidéo en continu et en direct (live streaming). elle souhaite afficher sur sa diffusion : son jeu sa webcam en vignette configurez son logiciel de diffusion ci-dessous pour que les deux éléments s’affichent. - Forum Webcam
Pour participer à un jeu, josé doit donner un nom de code à chacun des membres de son équipe. il veut utiliser le code binaire. il essaie avec seulement 3 bits. mais cela ne suffit pas. combien de membres n'auront pas de code ? ✓ - Forum Powerpoint

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

Retrouver l'image originale après avoir fait des modifications ?

code couleur associé a une image

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

Avis sur les sites pour Gagner de l'Argent ?

Javascript Arrondi à 2 chiffres après la virgule

Discussions similaires

Newsletters