Question

我正在处理480x480px精灵，225个独立的32x32px图像布局为15x15网格，因此它是一个完美的方形jpeg。我想：

创建一种在background-position字段中生成随机数的方法，该方法将在范围内注入一个随机数，并指定增量（范围为0-480，inc为32）。这是为了调用div的随机精灵背景图像。
生成一个类似的随机数（只是范围），用于div变换的时间：rotateY（180deg）样式。这是为了让div“翻转”并返回。我有一个前/后过渡已经在代码中工作，但当然时间是统一的。
找到克隆或复制该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（可能是背景或页脚），有数十个（可能是数百个）32x32px看似随机的图像。每个人以不同的间隔过渡到不同的图像。显然我正在寻找任何优雅的方式。

Answer 1

我不确定你的情况，但我会建议以下程序：

获取<div>的引用，该%应使用平铺的图像网格填充。
通过图块宽度加一：得到它的宽度和高度以及模数除以（numTiles）这些值：

var rect = div.getBoundingClientRect（）;

var numTiles =（rect.width％tileWidth + 1）*（rect.height％tileWidth + 1）;
创建<div>是overflow : hidden元素并随机设置其背景位置：

var bgTop = Math.floor（Math.random（）* numTilesInMap）;

var bgLeft = Math.floor（Math.random（）* numTilesInMap）;
我只是将所有div元素浮动并将它们附加到容器中，因此容器应该有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 ]; }，因为网格总是更大。

如果您想拥有唯一的随机数，并且只有地图中可用的图片，那么您可以执行以下操作：

<canvas>

我没有对此进行测试，它应该只是作为建议如何生成随机唯一数字。它也可以用数组完成，也许更快。

...问候

修改

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

Answer 2

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)
}

CSS随机背景图像在范围和增量内的位置;变换时间的随机数

2 个答案: