[RESOLU] Affichage image jeu taquin

francoisloup · Message par **francoisloup** » 21 mars 2020, 21:36

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

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>

Message par **webmaster** » 22 mars 2020, 11:06

Bonjour

Il ne manque pas juste un / à la ligne
<img src='images-puzzle/"+tablimg[rnd]+"' >
?

francoisloup · Message par **francoisloup** » 22 mars 2020, 12:14

Merci pour cette réponse rapide.
Oups, il manque dans cette version recopiée, mais pas dans celle en ligne, qui ne fonctionne pas quand même.Désolé, je remets ici la "bonne" version :

<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>

Cordialement
F LOUP

Message par **webmaster** » 22 mars 2020, 18:30

en testant avec quelques images (pas a la bonne dimension) j'ai bien les images qui s'affichent

Il faut bien vérifier que les images imagexx.jpg sont bien dans le sous répertoire images-puzzle au niveau du fichier taquin.html

francoisloup · Message par **francoisloup** » 24 mars 2020, 10:41

Bonjour,

J'ai trouvé le pourquoi du dysfonctionnement !
j'utilise NotePad++ comme éditeur et son option "exécuter avec". Mais il exécute la version locale qui ne trouve pas les fichiers images qui sont sur le serveur. Stupide !
Désolé et merci à ceux qui m'ont répondu.
Cordialement
F LOUP

francoisloup · Message par **francoisloup** » 24 mars 2020, 10:42

Oups, merci à Webmaster qui a mis le doigt sur l'erreur !
F LOUP

francoisloup · Message par **francoisloup** » 24 mars 2020, 10:47

Comment faire pour mettre sujet résolu ?
Merci

Message par **webmaster** » 25 mars 2020, 19:01

J'ai passé le sujet en résolu

Probleme classique de différence entre test local et vrai site... C'est un vrai sujet : un environnement de travail le plus proche possible du site réel apporte beaucoup

Forums Tout JavaScript

[RESOLU] Affichage image jeu taquin

[RESOLU] Affichage image jeu taquin

Re: Affichage image jeu taquin

Re: Affichage image jeu taquin

Re: Affichage image jeu taquin

Re: Affichage image jeu taquin

Re: Affichage image jeu taquin

Re: Affichage image jeu taquin

Re: [RESOLU] Affichage image jeu taquin