javascript - CSS 随机背景图像位置在范围和增量内；转换时间的随机数

Question

我正在处理一个 480x480 像素的 sprite，其中有 225 张单独的 32x32 像素的图像布置在 15x15 的网格中，因此它是一个完美的正方形 jpeg。我正在尝试:

1. 创建一种在背景位置字段中生成随机数的方法，该方法将在我指定的范围和增量内注入(inject)随机数(范围为 0-480，inc 为 32)。这是为了调用 div 的随机 Sprite 背景图像。

2. 生成一个类似的随机数(只是范围)以用于 div 变换的计时:rotateY(180deg) 样式。这是为了让 div “翻转”并返回。我有一个已经在代码中工作的前/后转换，但当然时间是统一的。

3. 找到一种克隆或复制该 div 及其内容以填充包含的 div 的方法。

我一直在努力尝试做一些像这样的东西:

<div class="face back" style="
background-position-x: [myNumber]px;
background-position-y: [myNumber]px;
"></div>

使用如下脚本:

var myNumber = Math.floor((Math.random()*14)+1);
myNumber = myNumber *32;

我知道我一直没有以正确的方式去做。

所需的结果是一个 div(可能是背景或页脚)，其中包含数十个(可能数百个)看似随机的 32x32 像素图像。每一个以不同的间隔过渡到不同的图像。显然我正在寻找任何优雅的方式。

Answer 1

我不太确定您的意思，但我建议您执行以下步骤:

1. 获取对 <div> 的引用应该用图像的平铺网格填充。

2. 获取它的宽度和高度，然后将这些值除以 ( %) 除以图 block 宽度加一:

   var rect = div.getBoundingClientRect();

   var numTiles = ( rect.width % tileWidth + 1 ) * ( rect.height % tileWidth + 1 );

3. 创建 numTiles是<div>元素并随机设置它们的背景位置:

   var bgTop = Math.floor( Math.random() * numTilesInMap );

   var bgLeft = Math.floor( Math.random() * numTilesInMap );

4. 我会简单地 float 所有 div 元素并将它们附加到容器，因此容器应该有 overflow : hidden因为网格总是更大。

如果您希望拥有唯一的随机数，并且 map 中可用的图 block 数量与图片一样多，那么您可以这样做:

var randoms = {};
for( var i = 0; i < numImages.length; i++ ){
    randoms[i] = i;
};

var rand, index;
while( Object.keys( randoms ).length > 0 ){
    index = Math.round( Math.random() * ( Object.keys( randoms ).length - 1 ) );
    rand = randoms[ index ];

    //do something with the random number here

    delete randoms[ index ];
}

我还没有测试过这个，它应该只是作为如何生成随机唯一数字的建议。它也可以用数组来完成，这可能更快。

问候...

编辑

我在这里忘记提到的是，在 »div« 解决方案旁边，您还可以创建一个 <canvas>。并使用 drawImage()具有随机值的方法，只要它已满，您只需在 Canvas 上绘制瓦片 map 的区域。这减少了 DOM 的大小，您可以创建与容器大小完全相同的 Canvas 。如果您没有捕获任何导致 tilemap 区域或其他图像依赖引用的事件，这可能是最快的解决方案。