1

我正在处理一个 480x480px 的精灵，225 个单独的 32x32px 图像布置在 15x15 网格中，所以它是一个完美的方形 jpeg。我在尝试着：

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

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

  3. 找到一种方法来克隆或复制该 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（可能是背景或页脚），其中包含数十个（可能数百个）32x32px 看似随机的图像。每一个都以不同的间隔过渡到不同的图像。显然我正在寻找任何优雅的方式。

4

2 回答 2

0 
procces= function() {
  TimeSpeed=100;
  startRange=1;
  stopRange=100;
  incrementRenge=5;
  setTimeout(function run(){
        if(startRange >=stopRange) {
          console.info("stop");
        }
        else {
          console.info("rinning");
          startRange+=Math.floor(Math.random()*incrementRenge);
          $(".face back").css({"background-position":startRange+"px ,"+startRange+"px"});
          setTimeout(function() {
            run()
          },TimeSpeed) 
        }
      },TimeSpeed)
}
于 2012-11-22T10:15:46.587 回答
0

我不太确定你在说什么，但我会建议以下程序：

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

  2. 得到它的宽度和高度，然后将%这些值除以平铺宽度加一：

    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. 我会简单地浮动所有 div 元素并将它们附加到容器中，因此容器应该有overflow : hidden，因为网格总是更大。

如果您想拥有唯一的随机数并且只需要与地图中可用的图像一样多的图块，则可以执行以下操作：

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()具有随机值的方法，只要它已满，您只需在画布上绘制瓷砖地图的区域。这减少了 DOM 的大小，您可以创建与容器的确切大小相同的画布。如果您没有捕捉到任何导致 tilemap 区域或其他图像依赖参考的事件，这可能是最快的解决方案。

于 2012-11-22T07:38:30.227 回答