gpt4 book ai didi

javascript - 如何使用javascript将图像随机插入到表格中?

转载 作者:行者123 更新时间:2023-11-28 01:17:12 25 4
gpt4 key购买 nike

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

最佳答案

更改 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:如果你的代码中没有写作业,你会得到更多回复。)

关于javascript - 如何使用javascript将图像随机插入到表格中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23689804/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com