[RESOLU] Affichage image jeu taquin

Pour toutes les discussions sur le code client, HTML et CSS
Répondre
francoisloup
Messages : 5
Enregistré le : 21 mars 2020, 21:13

[RESOLU] Affichage image jeu taquin

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>

Avatar du membre
webmaster
Administrateur du site
Messages : 179
Enregistré le : 28 févr. 2017, 15:19

Re: Affichage image jeu taquin

Message par webmaster » 22 mars 2020, 11:06

Bonjour

Il ne manque pas juste un / à la ligne
<img src='images-puzzle/"+tablimg[rnd]+"' >
?
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

francoisloup
Messages : 5
Enregistré le : 21 mars 2020, 21:13

Re: Affichage image jeu taquin

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

Avatar du membre
webmaster
Administrateur du site
Messages : 179
Enregistré le : 28 févr. 2017, 15:19

Re: Affichage image jeu taquin

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
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

francoisloup
Messages : 5
Enregistré le : 21 mars 2020, 21:13

Re: Affichage image jeu taquin

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
Messages : 5
Enregistré le : 21 mars 2020, 21:13

Re: Affichage image jeu taquin

Message par francoisloup » 24 mars 2020, 10:42

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

francoisloup
Messages : 5
Enregistré le : 21 mars 2020, 21:13

Re: Affichage image jeu taquin

Message par francoisloup » 24 mars 2020, 10:47

Comment faire pour mettre sujet résolu ?
Merci

Avatar du membre
webmaster
Administrateur du site
Messages : 179
Enregistré le : 28 févr. 2017, 15:19

Re: [RESOLU] Affichage image jeu taquin

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
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre