Случайно движущиеся изображения притягиваются к верхнему левому углу экрана.

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

Изображения располагаются на экране случайным образом, а затем перемещаются от -15 пикселей до 15 пикселей каждые 10 мс.

Но через несколько секунд изображения концентрируются в верхнем левом углу экрана, а не разбрасываются по всему экрану (или, по крайней мере, концентрируются в другом углу экрана)...

Вы можете увидеть мой код в действии здесь: http://secretlabs.alwaysdata.net/bug.html

window.onload = function() {
    var imgUrl = 'http://image.jeuxvideo.com/smileys_img/18.gif';
    var imgs = [];
    var imgPos = [];

    for(var i = 0; i < 50; i++) {
        // Create 50 images.

        imgs.push(new Image());
        imgs[i].src = imgUrl;
        imgs[i].style.position = 'absolute';

        // Position them randomly on the screen.

        imgPos[i] = [Math.floor(Math.random() * window.innerWidth),
                    Math.floor(Math.random() * window.innerHeight)];

        imgs[i].style.left = imgPos[i][0] + 'px';
        imgs[i].style.top = imgPos[i][1] + 'px';
        document.body.appendChild(imgs[i]);
    }

    window.setInterval(function() {
        for(var i = 0; i < 50; i++) {
            // Move randomly each image from -15px to 15px, vertically and horizontally.

            imgPos[i][0] += Math.floor(Math.random() * 30) - 15;
            imgPos[i][1] += Math.floor(Math.random() * 30) - 15;

            // Avoid images to go out of the screen.

            if(imgPos[i][0] < 0)
                imgPos[i][0] = 0;
            if(imgPos[i][1] < 0)
                imgPos[i][1] = 0;
            if(imgPos[i][0] > window.innerWidth - 16)
                imgPos[i][0] = window.innerWidth - 16;
            if(imgPos[i][1] > window.innerHeight - 16)
                imgPos[i][1] = window.innerHeight - 16;

            imgs[i].style.left = imgPos[i][0] + 'px';
            imgs[i].style.top = imgPos[i][1] + 'px';
        }
    }, 10);
};

javascript random entropy graphics dhtml
person Supercactus    schedule 18.02.2013    source источник
comment
Лол... явно не случайно   -  person jeremy    schedule 18.02.2013
comment
Да, я пытаюсь понять, почему Math.floor(Math.random() * 30) - 15 не делает что-то случайное.   -  person Supercactus    schedule 18.02.2013

Ответы (1)


arrow_upward
3
arrow_downward

Если вы хотите что-то менее предвзятое, не округляйте в сторону отрицательных значений.

Заменять

Math.floor(Math.random() * 30) - 15

с

Math.round(Math.random() * 30  - 15)

Я только что сделал небольшой тест с этим кодом:

var N = 1000000;
for (var j=0; j<20; j++) {
  var sum = 0;
  for (var i=N; i-->0;) sum += Math.round(Math.random() * 30  - 15);
  console.log(sum/N);
}

Все в порядке (откройте консоль)

person Denys Séguret    schedule 18.02.2013