Выбирать новое число из массива каждую секунду случайным образом

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

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

Answer 4

используйте 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)