javascript对象中的SetInterval

我一直在做一个画布游戏，我一直在尝试使用对象和方法来实现这一点。现在我遇到了一个问题。这有点难以解释。基本上，有一堆方块应该是随机移动的。square对象内部的方法使用setInterval方法每1/10秒移动一次square。每10秒添加一个新的方块。一旦新的方块被添加，问题就会出现。除了一个方块外，其余都是方块。其他人被冻住了（他们不应该这样）。我希望我能解释得足够好，以下是问题所在

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);
    }
}

---

你可以在行动中观察它

注意到每增加一个方块，运动会变得越来越不稳定吗

---

在

this.move

函数中，您忘记了

var color、cordX、cordY

，这意味着这些变量现在是全局变量，每个方块只作用于最后一个方块，而不是自身。这就是为什么只有一个方块移动。

注意到每增加一个方块，移动变得越来越不稳定了吗

在

this.move

函数中，您忘记了

var color、cordX、cordY

，这意味着这些变量现在是全局变量，每个方块只作用于最后一个方块，而不是自身。这就是为什么只有一个正方形移动

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);