用Javascript/Dom交換圖像

-1

這是我今天晚上第二次使用Javascript/Dom查詢，但這是一個非常不同的查詢，因此可能值得一個新的話題。我的最終目標是創建一個4 x 4網格的滑動益智遊戲。在另一個線程中獲得一些幫助後，我得到腳本以隨機順序在4 x 4網格中顯示圖像，並使用隨機按鈕來隨機化圖像。這些圖像是名稱image00,01,02,03,10,11等33 - 33是我的空白圖像。用Javascript/Dom交換圖像

現在我想添加一些命令，說明是否單擊了該圖像，並且它位於空白圖塊旁邊（圖33），然後與空白圖像交換。唯一的問題是，我不知道從哪裏開始。我的代碼到目前爲止在下面。從我看到的情況來看，它會沿着使用圖像ID的方向發展，但我對JavaScript非常陌生，迄今爲止還找不到多少幫助我的東西。任何幫助真的很感激。

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

來源

2010-12-12 user319940

你應該去jQuery。這將使許多事情變得更容易。

來源

2010-12-13 00:47:04 Ilyssis

這是一個項目的一部分，我不能使用庫 - 真的很感謝這個幫助，因爲它是一個主要的絆腳石！ – user319940 2010-12-13 00:55:56

這不適合我，但mybe你得到一些提示：http://www.dhtmlgoodies.com/scripts/image_puzzle/image_puzzle.html – Ilyssis 2010-12-13 01:11:51

看起來有點太複雜 - 我試圖儘可能簡單地學習這一點是我需要的。 – user319940 2010-12-13 01:17:27

用Javascript/Dom交換圖像

回答

相關問題