画布不会更新？

Question

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

我添加了片段移动功能，片段移动，但它们似乎不会移动。

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

当您单击某个部分然后单击其中一个要移动的选项时，部分x y坐标会更新，并且可以在新位置单击它们，但检查器不会出现在新位置。

我更新了所有的跳棋＆＃39;这个职位：

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/