6

マルチプレイヤー ピンポン ゲームを作成しましたが、約 60 ミリ秒のラグがあるため、弾むボールがスムーズに動きません。ゲーム自体はここで入手できますが、クロムでのみ動作し、サイト自体は私の母国語で書かれているため (動作させるには明らかに 2 つのブラウザーが必要です)、問題の jsfiddle を次に示します。

http://jsfiddle.net/yc6Lb/75/

フィドルでわかるように、dxとdyが定義されており、1 秒あたりのリフレッシュ数は として定義されていspeedます。これら 3 つの変数を一定に保つ必要があります (ボールがスムーズに動かない原因になっていることはわかっています)。

ここで質問です: これらの変数に触れずに、ボールが滑らかに動くように見せるためのトリックはありますか? ボールの新しい位置をレンダリングする + ボールの以前の位置を不透明度 50% でレンダリングすることを考えていましたが、まだテストしていません。この問題に対する他の解決策はありますか?

4

4 に答える 4

3

@Jasonが言ったように、アニメーションで（たとえばanimationFrameを使用して）必要なだけ正確なステップを作成し、リモート情報を取得する問題を個別に処理できると思います。
ただし、簡単な修正のために、私が時々使用するそのトリックを使用できます。不透明度を下げてcontext2dをクリアすることにより、トレイル/シャドウ効果があります。
したがって、クリア関数は次のようになります。 

function clear() {
  cxt.globalAlpha=0.3;
  cxt.fillStyle='#FFFFFF';
  cxt.fillRect(0, 0, WIDTH, HEIGHT);
  cxt.globalAlpha=1;
}

その場合、 draw() 関数でクリアしてはならず、描画ループで clear() を呼び出してはなりません。

私はあなたのフィドルを更新しました:

http://jsfiddle.net/gamealchemist/yc6Lb/86/

アルファで遊んで、必要な効果を得てください。

Rq : 画面の一部 (スコアなど) を完全な不透明度でクリアし、キャンバスのアニメーション部分でのみ低い不透明度を使用することができます。

于 2013-10-23T22:34:22.577 に答える