Question

我正在尝试将图像调用到益智游戏的表格中，但它没有做任何事情。

我的根文件夹有一个index.html和一个文件夹，其中的图像名为“images” 我的图片名为 P1.png 到 P16.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>

Answer 1

问题是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>

益智游戏中的Javascript图像放置

1 个答案: