javascript - SetInterval 在 javascript 对象中表现得很奇怪

Question

我一直在开发 Canvas 游戏，并且一直在尝试使用对象和方法来完成此任务。现在我遇到了一个问题。这有点难以解释。基本上有一堆应该随机移动的方 block 。正方形对象内部的方法使用 setInterval 方法每 1/10 秒移动一次正方形。每 10 秒添加一个新方 block 。一旦添加了新的方 block ，问题就出现了。除 1 平方之外的所有移动。其他人被卡住了(他们不应该这样做)。我希望我能解释得足够好，这是问题所在。

function enemy(clr, cx, cy) {
    this.color = clr;
    this.cordX = cx;
    this.cordY = cy;
    this.move = function() {
        color = this.color;
        cordX = this.cordX;
        cordY = this.cordY;
        setInterval(function() {
            var direction = Math.floor(Math.random() * 4);
            switch (direction) {
                case 0:
                    if (cordX + 20 <= 480) {
                        context.clearRect(cordX, cordY, 20, 20);
                        cordX = cordX + 20;
                        context.fillStyle = color;
                        context.fillRect(cordX, cordY, 20, 20);
                    }

                    break;
                case 1:
                    if (cordX - 20 >= 0) {
                        context.clearRect(cordX, cordY, 20, 20);
                        cordX = cordX - 20;
                        context.fillStyle = color;
                        context.fillRect(cordX, cordY, 20, 20);
                    }
                    break;
                case 2:
                    if (cordY + 20 <= 480) {
                        context.clearRect(cordX, cordY, 20, 20);
                        cordY = cordY + 20;
                        context.fillStyle = color;
                        context.fillRect(cordX, cordY, 20, 20);
                    }
                    break;
                case 3:
                    if (cordY - 20 >= 0) {
                        context.clearRect(cordX, cordY, 20, 20);
                        cordY = cordY - 20;
                        context.fillStyle = color;
                        context.fillRect(cordX, cordY, 20, 20);
                    }
                    break;
            }

        }, 100);
    }
}

和正方形创建者:

var newEnemy = new enemy("rgb(" + Math.floor(Math.random() * 200) + "," + Math.floor(Math.random() * 200) + "," + Math.floor(Math.random() * 200) + ")", Math.floor(Math.random() * ((500 - 0) / 20)) * 20 + 0, Math.floor(Math.random() * ((500 - 0) / 20)) * 20 + 0);
newEnemy.move();
enemyNum = enemyNum + 1;
}, 10000);

您可以实际查看它 here

Answer 1

注意到每添加一个方 block ，运动就会变得越来越不稳定吗？

您忘记在 this.move 函数中添加 var color, cordX, cordY，这意味着这些变量现在是全局变量，每个方 block 仅作用于最后一个方 block 而不是它本身。这就是为什么只有一个方格会移动。