javascript - Canvas 不会更新？

Question

我正在制作一个在线跳棋游戏。

我添加了棋子移动功能，棋子移动了，但它们似乎没有移动。

这是我为我的项目制作的 JSFiddle:https://jsfiddle.net/y1s0uoq6/

当您单击一个棋子，然后单击要移动的选项之一时，棋子的 x y 坐标会更新，并且可以在新位置单击它们，但棋子不会出现在新位置。

我用这个更新所有跳棋者的位置:

for(var checker of this.checkers) {
    checker.draw();         
}

但是检查器仍然没有以图形方式更新。只有他们的位置似乎在更新。

这是为什么呢？ 有人可以阐明这个问题吗？

Answer 1

问题出在 .draw() 函数中的这一行:

ctx.ellipse(x+32,y+32,28,28,45 * Math.PI/180,0,2 * Math.PI);

您正在使用 x 和 y，它们是创建检查器时使用的原始坐标 - 它们是来自您的参数Checker() 构造函数。您需要使用 this.x 和 this.y 来获取当前坐标:

ctx.ellipse(this.x+32,this.y+32,28,28,45 * Math.PI/180,0,2 * Math.PI);

更新的演示:https://jsfiddle.net/y1s0uoq6/1/