2

JavaScriptでキャンバスを使用してPongを作成しようとしています。

ゲームを作ってから何年も経ちますので、かなり初心者です。

ボールを動かそうとして（今のところx位置だけ）、前の位置を削除しようとしているという問題があります。私が使用しているコードは、パドル（パドルを移動するための上下のキー）で機能しました。

しかし、それはボールで働きたくないようです。

私は何が間違っているのですか？

this.draw = function() {
    ctx.clearRect(this.prevX - this.radius, this.prevY - this.radius, this.radius * 2, this.radius * 2);

    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fill();

    this.prevX = this.x;
    this.prevY = this.y;
 }

jsFiddle。

使用していることは知っていますclearRect()が、キャンバスの長方形の部分が削除されているだけだという印象を受けました。

clearRect(x,y,width,height)：指定した領域をクリアして完全に透明にします

ソース。

私はこれについてはほとんど初心者なので、他のヒントもお気軽に教えてください。

4

3 に答える 3

5

これは、実際には を呼び出していないためです。beginPath新しい円を描くたびに、古い円もすべて再描画されます!

ここをイラストで修正：

http://jsfiddle.net/UvGVb/15/

への通話を取り出して、beginPath以前に何が起こっていたかを確認します。

于 2011-04-27T16:10:10.507 に答える
0

私はキャンバスの専門家ではないので、「他のヒントも」という嘆願に同意します. :-) キャンバスから離れて、代わりに div などの html 要素を使用してパドルとボールを描画する場合は、わざわざ削除する必要はなく、移動するだけです。次に、要素の配置、アニメーションなどに役立つライブラリがたくさんありますが、その中で jQuery が私の最初の選択肢です。

于 2011-04-27T12:41:32.920 に答える
0

ボールの新しい位置をレンダリングするときに、「clearrect」関数に誤った座標を指定している可能性があります。「これ」への言及のいくつかは、あまりにも危険なように見えます。

var that = this;

上記は関数内にあります-ボールのスコープではなく、関数のローカルスコープで「this」を参照していると思います（これはあなたが意図していると思います）。これ (ボール スコープ) への参照を設定し、必要に応じて内部関数内から使用できます。

ボールの座標と以前の位置の座標を出力してみてください。次に、キャンバスの正しい領域をクリアしているかどうかを判断できます。また、 this キーワードの使用を確認し、目的の範囲内にあることを確認します。

ざっと見ただけなので、間違っていたらすみません。

于 2011-04-27T12:46:36.677 に答える