Échange d'images avec Javascript/Dom

-1

c'est ma deuxième requête Javascript/Dom ce soir mais c'est vraiment une requête assez différente et mérite donc probablement un nouveau sujet. Mon but ultime est de créer un jeu de puzzle coulissant avec une grille de 4 x 4. Avec un peu d'aide dans l'autre thread, j'ai le script pour montrer les images dans une grille 4 x 4 dans un ordre aléatoire, avec un bouton aléatoire qui rend aléatoire les images. Les images sont le nom image00, 01, 02, 03, 10, 11 etc. jusqu'à 33 - 33 est mon image vide.Échange d'images avec Javascript/Dom

Maintenant, je veux ajouter des commandes qui disent que si cette image est cliquée et qu'elle est à côté de la tuile vide (image 33) puis permuter avec l'image vide. Le seul problème est que je n'ai aucune idée par où commencer. Mon code jusqu'ici est ci-dessous. D'après ce que j'ai vu, ce serait quelque chose comme l'utilisation des images ID, mais je suis très nouveau pour javascript et n'ai pas pu trouver beaucoup de choses qui m'ont aidé jusqu'à présent. Toute aide est vraiment appréciée.

<html> 
<head> 
<title>Shuffle</title> 
</head> 
<body> 

<script language="JavaScript"> 
<!-- 

var Pics = []; 
var Top = 16; 

Pics = new Array(); 


for(i = 0; i < Top; i++) { 
    document.write("<img>"); 
    if ((i+1)%4 == 0) { 
    document.write("<br>"); 
    } 
} 

function ShuffleArray(a) { 
    var n = a.length; 
    for(var i = n - 1; i > 0; i--) { 
     var j = Math.floor(Math.random() * (i + 1)); 
     var tmp = a[i]; 
     a[i] = a[j]; 
     a[j] = tmp; 
    } 
} 


function ViewerObj(Image, Pics, i) { 
    this.Image = Image; 
    this.Image.style.left = 800; 
    this.Pics = Pics; 
    this.Image.id = "ID" + i; 
} 

function Randomise() { 
    var i; 
    ShuffleArray(Pics); 
    for(i = 0; i < Top; i++) { 
    Viewers[i].Image.src = Pics[i]; 
    Viewers[i].Image.style.left = 200; 
    } 
} 



Viewers = new Array(); 
var i; 

for(var i = 0; i < 4; i++) { 
for(var j = 0; j < 4; j++) { 
Pics[j + 4*i] = "images/Tree" + (i) + (j) + ".jpg"; 
} 
} 

for(i = 0; i < Top; i++) { 
    document.images[i].src = Pics[i]; 
    document.images[i].style.left = 300; 
    Viewers[i] = new ViewerObj(document.images[i], Pics, i); 
} 


//--> 
</script> 
<h1>Shuffle</h1> 
    <form> 
    <input type="button" value="Shuffle" onClick="Randomise();"/> 
    </form> 
</body> 
</html>

Source

2010-12-12 user319940

Vous devriez opter pour jQuery. Cela rendra beaucoup de choses plus faciles.

Source

2010-12-13 00:47:04 Ilyssis

Cela fait partie d'un projet où je ne peux pas utiliser les bibliothèques - j'apprécierais vraiment de l'aide, car c'est une pierre d'achoppement majeure! – user319940

Cela ne fonctionne pas pour moi, mais mybe vous obtenez quelques conseils: http://www.dhtmlgoodies.com/scripts/image_puzzle/image_puzzle.html – Ilyssis

semble un peu trop compliqué - j'essaie d'apprendre cela aussi simple que possible est ce dont j'ai besoin. – user319940

Échange d'images avec Javascript/Dom

Répondre

Questions connexes