Question

所以我正在制作一个简单的游戏，我想知道如何在页面加载时将图像分配给随机div。例如，我有两行div标签，标记为 -

<div id="1_1" class="mapsquare"></div>
<div id="2_1" class="mapsquare"></div>
<div id="3_1" class="mapsquare"></div>
<div id="1_2" class="mapsquare"></div>
<div id="2_2" class="mapsquare"></div>
<div id="3_2" class="mapsquare"></div>

我希望能够在页面加载时随机地向其中一个div添加一个图像（播放器精灵）。这就是我到目前为止所做的一切，但我不知道如何使用div id进行此操作。

<script>
function myFunction()
{
var x=document.getElementById("player")
x.innerHTML=Math.floor((Math.random()*6)+1);
}
</script>

由于

Answer 1

也许是这样的：

var divs = document.querySelectorAll(".mapsquare"),
    randomIndex = Math.floor( Math.random() * divs.length );
divs[randomIndex].appendChild(document.getElementById("player"));

或者，抱歉，只是看到了jQuery标签：

var $divs = $(".mapsquare");
$("#player").appendTo( $divs.get(Math.floor(Math.random() * $divs.length)) );

基本演示：http://jsfiddle.net/DWfc6/

当然，鉴于许多游戏涉及相当多的随机计算，您可能希望将随机代码放入其自己的函数中，例如from MDN：

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

Answer 2

试试这个：

$('div.mapsquare:eq(' + Math.floor(Math.random() * $('div.mapsquare').length) + ')').append(player)

Answer 3

假设#player元素是您要附加到随机div的图像，请尝试以下操作：

var $player = $('#player');
var rnd = Math.floor(Math.random() * $('.mapsquare').length);
$('.mapsquare').eq(rnd).append($player);

Answer 4

您可以使用math.random获取随机div id值，如

var divName = Math.ceil(Math.random()*3) + "_" + Math.ceil(Math.random()*3);

然后基于id你可以添加图片

请参阅示例 DEMO * http://jsbin.com/OqEMoVU/1/edit *

将图像分配给随机div？

4 个答案: