每秒随机从数组中选择一个新数字

Question

var canvas = document.createElement("canvas");        b = canvas.getContext("2d");        canvas.id = "canvas"                canvas.width = 900;        canvas.height = 600;                document.body.appendChild(canvas);                                var posX =  430;        posY = 300;                var myArray = [-3.5,0,3.5];                var dX = myArray[Math.floor(Math.random()*myArray.length)];        var dY = myArray[Math.floor(Math.random()*myArray.length)];                             setInterval(function (){                b.fillStyle = "steelblue";                b.fillRect(0, 0, canvas.width, canvas.height);                posX += dX;                posY += dY;                            if (posX > 875){                    dX = 0;                    posX = 875;                }                if (posX < 5){                    dx = 0;                    posX = 5;                }                if (posY > 575){                        dY = 0;                        posY = 575;                }                if (posY < 5){                        dY = 0;                        posY = 5;                }                b.fillStyle = "snow";        b.fillRect(posX, posY, 20, 20);        }, 20)这就是我的全部代码。我想随机移动背景上的立方体。现在它只向一个随机方向移动。但我希望它每秒都改变这个方向。因为 dX 和 dY 必须每秒改变一次。

Answer 1

这样做：如果您对代码有任何疑问。随意写评论。

const canvas = document.createElement('canvas')

canvas.width = 100

canvas.height = 100

canvas.style.backgroundColor = 'steelblue'

document.body.appendChild(canvas)

const ctx = canvas.getContext('2d')

const RADIUS = 5

const SPEED = 0.6

let pos = [canvas.width / 2, canvas.height / 2]

let direction = [0, 0]

setInterval(function() {

    pos[0] += direction[0] * SPEED

    pos[1] += direction[1] * SPEED

    if(pos[0] <= RADIUS || pos[0] >= canvas.width - RADIUS ||

    pos[1] <= RADIUS || pos[1] >= canvas.height - RADIUS) {

        pos = [canvas.width / 2, canvas.height / 2] 

    }

    ctx.clearRect(0, 0, canvas.width, canvas.height)

    ctx.fillStyle = "snow"

    ctx.fillRect(pos[0] - RADIUS, pos[1] - RADIUS, 2 * RADIUS, 2 * RADIUS)

}, 20)

setInterval(function() {

    const randomAngle = Math.random() * 2 * Math.PI

    direction = [Math.cos(randomAngle), Math.sin(randomAngle)]

}, 1000)

Answer 2

我个人会选择使用Array.prototype添加一个方法来获取数组的随机元素，然后使用setInterval每秒更新值：

Array.prototype.getRandom = function() {

  let index = Math.floor(Math.random() * this.length);

  return this[index];

}

var myArray = [-3.5,0,3.5];

var dX, dY;

function updateDerivatives() {

  dX = myArray.getRandom(),

  dY = myArray.getRandom();

  console.log("Updated values:", { dX, dY });

}

setInterval(updateDerivatives, 1000);

Answer 3

使用setInterval() https://javascript.info/settimeout-setinterval

var myArray = [-3.5,0,3.5];

var dX, dY

setInterval(() => {

  dX = myArray[Math.floor(Math.random()*myArray.length)];

  dY = myArray[Math.floor(Math.random()*myArray.length)];

}, 1000)

Answer 4

var myArray = [-3.5,0,3.5];

var dX;

var dY;

setInterval(() => { // you could also use setInterval(function(){...},...)

    dX = myArray[Math.floor(Math.random()*myArray.length)];

    dY = myArray[Math.floor(Math.random()*myArray.length)];

}, 1000) // 1000 milliseconds