Question

我是javascript的新手，我正在创建一个游戏，用户通过点击重新排列图片表。这些图像实际上是用户必须整理的较大图像的碎片。

用户单击表格中的一个图像，然后单击表格中的另一个图像，并交换位置。我必须使用javascript，所以我创建了一个3x4表，并填充了12个“部分”图像，需要重新安排。

每次页面加载时，我都要让每个单元格中的图像被随机分配，这样每个游戏，用户都必须以不同的方式对图像进行排序。

为此，我使用diffImage（）函数从我拥有的图像数组中选择一个随机图像。因此，如果我的一个图像被命名为“mario01.jpg”，则该函数将获取图像并使其成为<img src="mario01.png" />。

我的diffImage（）函数还会从阵列中选择它所选择的图像，这样图像就不会再次插入到表格中。

我想知道的是，如何将diffImage（）函数合并到我设置表格的html中，以便每次页面加载时，图像都在不同的单元格中？

这是我到目前为止所做的代码：

<head>
<link rel="stylesheet" href="hw3CSS.css" type="text/css"/>
<title>Picture Scramble Game</title>
</head>
<script>
var imagelist = ["mario01.jpg", "mario02.jpg", "mario03.jpg", "mario04.jpg", "mario05.jpg", "mario06.jpg", "mario07.jpg", "mario08.jpg", "mario09.jpg", "mario10.jpg", "mario11.jpg", "mario12.jpg"];


function diffImage() {
    whichImage = Math.floor(Math.random()*imagelist.length);
    document.write('<img src="'+imagelist[whichImage]+'" />');
    imagelist.splice(whichImage,1);
}


</script>
<body onload="addEventListeners();">
</script>
<div id="table">
<table>
    <tr><td><img class="element" id="image1" src="mario02.jpg" /></td>
    <td><img class="element" id="image2" src="mario02.jpg" /></td>
    <td><img class="element" id="image3" src="mario01.jpg" /></td>
    </tr>
    <tr><td><img class="element" id="image4" src="mario05.jpg" /></td>
    <td><img class="element" id="image5" src="mario04.jpg" /></td>
    <td><img class="element" id="image6" src="mario06.jpg" /></td>
    </tr>
    <tr><td><img class="element" id="image7" src="mario09.jpg" /></td>
    <td><img class="element" id="image8" src="mario08.jpg" /></td>
    <td><img class="element" id="image9" src="mario07.jpg" /></td>
    </tr>
    <tr><td><img class="element" id="image10" src="mario11.jpg" /></td>
    <td><img class="element" id="image11" src="mario10.jpg" /></td>
    <td><img class="element" id="image12" src="mario12.jpg" /></td></tr>
</table>
</div>
</body>

Answer 1

更改diffImage函数，使其返回一个等于所需图像的src的值

类似的东西：

function diffImage() {
    var output = '';
    whichImage = Math.floor(Math.random()*imagelist.length);
    output = imagelist[whichImage];
    imagelist.splice(whichImage,1);
    return output;
}

然后用以下内容浏览所有图像：

document.getElementById("image1").src = diffImage();
document.getElementById("image2").src = diffImage();
etc...

我希望我的回答可以帮助你，而不会过多地放弃你的家庭作业。

（PS：如果你的代码中没有说出作业，你会得到更多回复。）

Answer 2

一种方法......

将您的html更改为以下内容：

<table>
    <tr>
        <td id="cell1"></td>
        <td id="cell2"></td>
        <td id="cell3"></td>
    </tr>
    ...
    <tr>
        <td id="cell10"></td>
        <td id="cell11"></td>
        <td id="cell12"></td>
    </tr>
</table>

然后添加如下内容：

var cellElement, imageElement;
for (var i = 1; i <= 12; i++) {
    cellElement = document.getElementById("cell" + i);
    imageElement = document.createElement("img");
    imageElement.src = ""; // random image url spliced into here
    cellElement.appendChild(imageElement);
}

或者，使用Javascript创建表格及其中的单元格可能更容易（当然也更灵活）。

如何使用javascript将图像随机插入表格？

2 个答案: