在拼圖遊戲中的Javascript圖像位置

我想要將圖像稱爲拼圖遊戲的表格，但它沒有做任何事情。在拼圖遊戲中的Javascript圖像位置

我的根文件夾中有一個index.html，並在名爲「圖像」與圖像的文件夾我的我的圖像通過到P16.png命名P1.png。

如果你看看遊戲是如何工作的，你會發現表格有字母「A」到「O」，如果你點擊它，它會將它移動到開放空間。我試圖得到相同的結果，但與圖像，而不是字母。

任何幫助，將不勝感激。

這是我正在處理的代碼。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Puzzle Game</title> 
</head> 

<body> 
<center> 
<form name=table> 


<table border=1 cellpadding=1 cellspacing=1> 
<tr> 
<td colspan=4 align=center>GG WP</td> 
</tr> 

<script> 
bx=3; 
by=3; 

for (y=0;y<4;y++) { 
    document.write('<tr>'); 

for (x=0;x<4;x++) { 
    document.write('<td><img onclick="move('+x+','+y+');"></td>'); 
} 

document.write('</tr>'); 
} 

function move(x,y) { 
    ax=Math.abs(bx-x); 
    ay=Math.abs(by-y); 
    if (((ax*ay)==0)&&((ax+ay)==1)) { 
     f=document.table; 

     f.elements[4*by+bx].src=f.elements[4*y+x].src; 
     f.elements[4*y+x].src="images/"; 

     bx=x; 
     by=y; 
     f.msg.value++; 
    } 
} 
function rndize() { 

    alpha="ABCDEFGHIJKLMNO "; 

    for (i=0;i<16;i++) { 
     x=0; 
     y=0; 

     while (document.table.elements[4*y+x].src!="") { 
      x=Math.floor(Math.random()*4); 
      y=Math.floor(Math.random()*4); 
     } 

     document.table.elements[4*y+x].src="P"+i+".png"; 
    } 

    bx=x; 
    by=y; 
} 

rndize(); 

</script> 

</table> 
<table border=1 cellpadding=1 cellspacing=1> 
</table> 
</form> 
</center> 
</body> 
</html>

這裏是爲遊戲是怎麼想的工作。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Puzzle Game</title> 
</head> 

<body> 
<center> 
<form name=table> 


<table border=1 cellpadding=1 cellspacing=1> 
<tr> 
<td colspan=4 align=center>GG WP</td> 
</tr> 

<script> 





bx=3; 
by=3; 

for (y=0;y<4;y++) { 
    document.write('<tr>'); 

for (x=0;x<4;x++) { 
    document.write('<td><tt><input type=button value=" " '); 
    document.write('onclick="move('+x+','+y+');"></tt></td>'); 
} 

document.write('</tr>'); 
} 

function move(x,y) { 
    ax=Math.abs(bx-x); 
    ay=Math.abs(by-y); 

    if (((ax*ay)==0)&&((ax+ay)==1)) { 
     f=document.table; 

     f.elements[4*by+bx].value=f.elements[4*y+x].value; 
     f.elements[4*y+x].value=" "; 

     bx=x; 
     by=y; 
     f.msg.value++; 
    } 
} 

function rndize() { 

    alpha="ABCDEFGHIJKLMNO "; 

    for (i=0;i<16;i++) { 
     x=0; 
     y=0; 

     while (document.table.elements[4*y+x].value!=" ") { 
      x=Math.floor(Math.random()*4); 
      y=Math.floor(Math.random()*4); 
     } 

     document.table.elements[4*y+x].value=alpha.substring(i,i+1); 
    } 

    bx=x; 
    by=y; 

} 

rndize(); 




</script> 
</table> 
<table border=1 cellpadding=1 cellspacing=1> 
</table> 
</form> 
</center> 
</body> 
</html>

來源

2014-07-19 Dean Byron

我不明白是什麼問題... –

它不是圖像加載到表 - 表保持爲空 –

的問題是，document.table.elements包含<form name=table>元件，其是input button元素，但不是img元件。

它可以固定這樣的：

<form name=table> 


<table border=1 cellpadding=1 cellspacing=1> 
<tr> 
<td colspan=4 align=center>GG WP</td> 
</tr> 

<script> 
bx=3; 
by=3; 

for (y=0;y<4;y++) { 
    document.write('<tr>'); 

for (x=0;x<4;x++) { 
    document.write('<td><img onclick="move('+x+','+y+');"></td>'); 
} 

document.write('</tr>'); 
} 

function move(x,y) { 
    ax=Math.abs(bx-x); 
    ay=Math.abs(by-y); 
    if (((ax*ay)==0)&&((ax+ay)==1)) { 
     f= document.table; 
     var imgElements = document.getElementsByTagName("img"); 

     imgElements[4*by+bx].src = imgElements[4*y+x].src; 
     imgElements[4*y+x].removeAttribute("src"); 

     bx=x; 
     by=y; 
     f.msg.value++; 
    } 
} 
function rndize() { 

    alpha="ABCDEFGHIJKLMNO "; 
    var imgElements = document.getElementsByTagName("img"); 

    for (i=0;i<16;i++) { 
     x=0; 
     y=0; 

     while (imgElements[4*y+x].src!="") { 
      x=Math.floor(Math.random()*4); 
      y=Math.floor(Math.random()*4); 
     } 
     if (i < 15) { 
      imgElements[4*y+x].src= "images/P"+i+".png"; 
     } 

    } 

    bx=x; 
    by=y; 
} 

rndize(); 

</script> 

</table> 
<table border=1 cellpadding=1 cellspacing=1> 
</table> 
</form>

來源

2014-07-19 13:29:48 slaweet

謝謝你很多。現在唯一的問題是，onclick不工作...當我點擊圖片時，它假設將它移動到負空間。 –

我編輯瞭解決onclick問題的答案。 – slaweet

現在完美的工作！：）非常感謝 –

在拼圖遊戲中的Javascript圖像位置

回答

相關問題