Question

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faded-div"><a href="#" class="fade-out">Click To FadeOut</a></div>
  <a href="#" class="fade-in">Click To FadeIn</a>

和方形创作者：

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

您可以在行动here

中查看它

Answer 1

注意每增加一个方格后，运动变得越来越不稳定了吗？

你在var color, cordX, cordY函数中忘记了this.move，这意味着这些变量现在是全局变量，每个正方形只适用于最后一个方格而不是自身。这就是为什么只有一个方格移动的原因。

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

1 个答案: