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

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 = 100canvas.height = 100canvas.style.backgroundColor = 'steelblue'document.body.appendChild(canvas)const ctx = canvas.getContext('2d')const RADIUS = 5const SPEED = 0.6let pos = [canvas.width / 2, canvas.height / 2]let direction = [0, 0]setInterval(function() {&nbsp; &nbsp; pos[0] += direction[0] * SPEED&nbsp; &nbsp; pos[1] += direction[1] * SPEED&nbsp; &nbsp; if(pos[0] <= RADIUS || pos[0] >= canvas.width - RADIUS ||&nbsp; &nbsp; pos[1] <= RADIUS || pos[1] >= canvas.height - RADIUS) {&nbsp; &nbsp; &nbsp; &nbsp; pos = [canvas.width / 2, canvas.height / 2]&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; ctx.clearRect(0, 0, canvas.width, canvas.height)&nbsp; &nbsp; ctx.fillStyle = "snow"&nbsp; &nbsp; ctx.fillRect(pos[0] - RADIUS, pos[1] - RADIUS, 2 * RADIUS, 2 * RADIUS)}, 20)setInterval(function() {&nbsp; &nbsp; const randomAngle = Math.random() * 2 * Math.PI&nbsp; &nbsp; direction = [Math.cos(randomAngle), Math.sin(randomAngle)]}, 1000)

Answer 2

我个人会选择使用Array.prototype添加一个方法来获取数组的随机元素，然后使用setInterval每秒更新值：Array.prototype.getRandom = function() {&nbsp; let index = Math.floor(Math.random() * this.length);&nbsp; return this[index];}var myArray = [-3.5,0,3.5];var dX, dY;function updateDerivatives() {&nbsp; dX = myArray.getRandom(),&nbsp; dY = myArray.getRandom();&nbsp; console.log("Updated values:", { dX, dY });}setInterval(updateDerivatives, 1000);

Answer 3

使用setInterval()&nbsp;https://javascript.info/settimeout-setintervalvar myArray = [-3.5,0,3.5];var dX, dYsetInterval(() => {&nbsp; dX = myArray[Math.floor(Math.random()*myArray.length)];&nbsp; 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(){...},...)&nbsp; &nbsp; dX = myArray[Math.floor(Math.random()*myArray.length)];&nbsp; &nbsp; dY = myArray[Math.floor(Math.random()*myArray.length)];}, 1000) // 1000 milliseconds