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

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

使用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 3

我个人会选择使用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 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