Jeu de taquin en JS - les images ne s'affichent pas
Résolu
frloup
Messages postés
6
Statut
Membre
-
francoisloup -
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>
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
- 94 degrés jeu - Télécharger - Divers Jeux
- Des images - Guide
- Jeu zuma - Télécharger - Jeux vidéo
- Jeu logo - Télécharger - Jeux vidéo
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
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
