畫布不會更新？

Question

我在做一個在線跳棋遊戲。

我增加了棋子移動功能，棋子移動，但他們似乎沒有移動。

這裏是一個的jsfiddle我做我的項目：https://jsfiddle.net/y1s0uoq6/

當你點擊一個棋子，再點擊移動的選項之一，片xy座標更新，他們可以在新的點被點擊，但檢查器不會出現在新的位置。

我這個更新所有的棋子的位置上：

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/