私は、プレイヤーがカードをクリックして画面上で任意の方向にドラッグできるゲームに取り組んでいます。一度に合計 64 枚の 100x80 のオーバーラップ カードが 800x800 のキャンバスにあり、それぞれが手続き型ドローです。おそらく疑う人もいると思いますが、canvas は移動ごとにそのキャンバス全体を再描画することを好みません。これを回避するために、バッファ キャンバスを使用してカードを描画し、drawImage()
. 描画が蓄積されないようにするために、 をdrawImage()
使用する予定のキャンバスの領域をクリアしclearRect()
ます。
私が経験している問題は、clearRect()
とに使用される (x,y) 座標がマウスの位置から来ているため、ユーザーの動きが速すぎると、座標が最後に実行された時刻drawImage()
とは異なることです。次の描画シーケンス中に呼び出されます。結果は、カードがドラッグされている速さに比例して、最後のシーケンスからの残りのドローです。drawImage()
clearRect()
からの (x,y) 座標を維持し、次のシーケンスでdrawImage()
(現在のマウスの位置の代わりに) それらを使用しようとしました。clearRect()
ただし、残差ドローが表示される代わりに、残差クリア (消去) が表示されるようになりました。
どうすればこれに対処できるか考えていますか?
注: 私のアニメーション レートはRequestAnimationFrame
、 ではなく を使用して処理されSetInterval()
ます。