0

私は jsbin で小さなゲームを作成していますが、これまでのところすべてうまくいっていますが、少し問題があります。ゲームの目的は、ランダムに現れる円を 1 分間にできるだけ多くクリックすることです。残り時間とコーナーのスコアを出力したいので、そうしました。問題は、それらが互いに上書きしていることです。これはちらつきを防ぐために使わないことにしたからです

c.clearRect(0,0,canvas.width,canvas.height);

代わりに、クリックしたときに円のすぐ上に clearRect を描画します。私はテキストで同様のことをしたいです。私はこの行を使用しました：

c.clearRect(0,fontSize,c.measureText(timeLeft),fontSize);

これは機能するはずですが、効果はありません。私はすべてを試しましたが、この行の何が問題なのかわかりません。私の唯一の他の理論は、それがコードの間違った場所にあるということですが、問題は見つかりませんでした。

ここに私が取り組んでいる現在のバージョンへのリンクがあります: http://jsbin.com/touchgame/10/edit

ありがとう！

4

1 に答える 1

0

measureText() は width プロパティを持つオブジェクトを返すため、c.measureText(timeLeft).width を使用する必要があります。

また、timeLeft を減らしてから clearRectを呼び出しました。これにより、timeLeft の新しい幅に基づいて四角形がクリアされます。「古い」timeLeft 値の幅に基づいてクリアしてから、timeLeftを減らします。

if (timeLeft < 1){
  c.clearRect(0,fontSize,c.measureText(timeLeft).width + 5,fontSize*1.5);

  timeLeft--;
  //clear over time output

  console.log(c.measureText(timeLeft));
}

これはうまくいくはずです。テキストの描画方法により、テキストのバウンディング ボックスを正確に把握することは簡単ではありません。そのため、fontSize よりも大きな領域をクリアします。c.textBaseline = 'top' を使用できます。これにより、y にあるテキストのベースラインではなく、指定した y に上の座標を持つテキストが配置されます。

最後に、グラフィックを更新したい場合は、キャンバスを完全にクリアしてすべてを再描画する方が簡単な方法だと思います。キャンバスをクリアしてからすぐにすべてを再描画すると、ちらつきは発生しません。すべてを再描画することによるパフォーマンスへの影響は、通常、ほとんどの場合無視できる程度であり、作業が大幅に簡素化されます。

于 2012-08-19T18:34:21.353 に答える