キャンバスは更新されませんか？

Question

私はオンラインチェッカーゲームを作っています。

ピース移動機能が追加され、ピースは移動しますが、移動するようには見えません。 https://jsfiddle.net/y1s0uoq6/

あなたは作品をクリックし、移動するためのオプションのいずれかをクリックすると、片xyはアップデートを調整し、彼らは新しい場所でクリックすることができます。ここでは

は、私は私のプロジェクトで作られたJSFiddleですチェッカーは新しい場所に表示されません。

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()から引数ですコンストラクタ。

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

更新デモ：https://jsfiddle.net/y1s0uoq6/1/

あなたは 現在座標を取得するために this.xと this.yを使用する必要があります