随机移动的图像被屏幕的左上角吸引

Randomly moving images are attracted by the top-left corner of the screen

本文关键字：左上角 屏幕 移动 图像 随机      更新时间：2023-09-26

我正在尝试制作在屏幕上随机移动的图像。

图像在屏幕上随机定位，然后每10ms从-15px移动到15px。

但几秒钟后，图像会集中在屏幕左上角，而不是分散在屏幕上（或者至少集中在屏幕的另一个角落）。。。

你可以在这里看到我的代码：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);
};

如果你想要一些不那么有偏见的东西，不要向负值取整。

更换

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

看起来还可以（打开控制台）

相关文章：