2

jQuery でピンポンのようなゲームを作ろうとしていますが、コンテナー内のスライダーの位置を制限するにはどうすればよいのか疑問に思っていました。

また、ボール/ボックスを生成する方法と、コンテナーの側面と上部の壁でバウンドさせる方法についても助けが必要です。

私はなんとかそれに取り組みましたが、スライダーをコンテナ内に保持するのにまだ苦労しており、ボールが跳ね返るのに苦労しています.

どんな助けでも大歓迎です。 MyCodeSoFar

4

2 に答える 2

1

あなたは多くの一般的な質問をしましたので、私はあなたにいくつかの一般的な指針を与えます。:)

jQueryでピンポンのようなゲームに取り組んでいますが、コンテナー内のスライダーの位置をどのように制限できるのでしょうか。

パドルを拘束するには、いくつかのオフセットを確認するだけです。

左の境界線に接触しているかどうかを確認するには、左からのオフセットを確認します。の場合は0、無視してください←</kbd> keydown.

右の境界線に接触しているかどうかを判断するには、左のオフセットを取り、パドルの幅を追加します。ゲームエリアの幅と等しい場合は、無視してください→</kbd> keydown.

また、ボール/ボックスを生成する方法と、それをコンテナの側面と上部の壁で跳ね返らせる方法についてもサポートが必要です。

ではなく要素を使用しているのでcanvas、CSSでボールを生成できます...

#ball {
    width: 20px;
    height: 20px;
    border-radius: 20px;
}

ここで重要なのは、ボールのとborder-radiusに等しいことです。widthheight

ボールをバウンドさせるにはx、yゲームタイマーで増加する速度を設定します。ボールがパドルまたはゲームエリアの端に衝突したときに、これらのサインを反転させます。よりポンのようにするために、パドルの特定の領域に当たったときのバウンスを変更する方法を混乱させることができます。たとえば、遠端に当たった場合、反転したときに角度が鋭くなります。

ボールがゲームエリアの端に当たったかどうかを判断するには、上記と同様の手法を使用します。

ボールがパドルに衝突したかどうかを判断するには、衝突検出コードを使用します。ボールのYオフセットがパドルのYオフセットよりも高いかどうかを確認します（パドルは水平トラック上を直線的に移動すると想定しています）。次に、その条件が満たされている場合は、ボールのXオフセットがパドルのXオフセットと（）パドルの幅の範囲内にあるかどうかを確認します+。

パドルとゲームエリアが変更されない場合は、これらの幅をキャッシュすると便利です。

于 2012-02-16T22:46:06.530 に答える
1

申し訳ありませんが、あなたのコードは私にとって少し厄介です。いずれにせよ、私はゲームのようなjsポンのこのアイデアが面白いと感じ、あなたが意図したことをするようにあなたのコードを適応させました。

このフィドルを見て、フィードバックを送ってください。

于 2012-02-23T08:31:08.430 に答える