CSS Случайное положение фонового изображения в пределах диапазона и приращения; случайное число для времени преобразования

Question

Я работаю над спрайтом 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, казалось бы, случайных изображений. Каждый из них переходит с разными интервалами к разным изображениям. Очевидно, я ищу любой элегантный способ.

Answer 1

Я не уверен, что то, что вы собираетесь, но я хотел бы предложить следующую процедуру:

1. получить ссылку на <div>, которые должны быть заполнены с черепичной сеткой изображений.

2. получить его ширину и высоту, и по модулю разрыва (%) Эти значения по ширине плитки плюс один:

   вар Rect = div.getBoundingClientRect();

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

3. numTiles создать это <div> элементы и установить их положение фона в случайном порядке:

   вар 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 ]; 
} 

Я не проверял это, она должна просто сделайте предложение как создать случайные уникальные числа. Это также можно сделать с помощью массива, который, возможно, быстрее.

Привет ...

Редактировать

Что я забыл упомянуть здесь, что рядом с »ДИВ« решение, которое вы также можете создать <canvas> и использовать метод drawImage() со случайными значениями, где вы просто рисуете области карты плитки на холсте, пока она заполнена. Это уменьшает размер DOM, и вы можете создать холст с точным размером контейнера. Если вы не поймаете каких-либо событий, которые приводят к области плитки, или другое изображение зависит от ссылки, это может быть самым быстрым решением.

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