jQuery：オブジェクトのkeydownの動きを制限する

Question

jQueryでピンポンのゲームを作ろうとしていて、どのようにしてコンテナ内のスライダの位置を制限できますか？

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

私はそれに取り組んできましたが、私はまだコンテナの内側にスライダを保持し、ボールをバウンドすることに苦労しています。

ご協力いただければ幸いです。 MyCodeSoFar

Answer 1

申し訳ありませんが、あなたのコードはちょっと面倒です。どんなものでも、ゲームのようなjsポンというこのアイデアを見つけました。私はあなたのコードをあなたが意図したとおりに修正しました。

this fiddleをご覧になり、私にいくつかのフィードバックをお寄せください。

Answer 2

多くの一般的な質問がありましたので、いくつかの一般的な情報をお伝えします。 :)

私はjQueryでピンポンのゲームを作ろうとしていますが、どのようにしてコンテナ内のスライダの位置を制限できますか？

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

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

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

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

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

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

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

ボールをバウンスさせるには、とyのベロシティをゲームタイマーでインクリメントします。ボールがパドルまたはゲームエリアのエッジのいずれかに衝突すると、これらの記号を反転させます。 Pong-likeにすると、バウンドがパドルの特定の領域に当たったときのバウンスの修正方法を混乱させることができます。たとえば、遠端に当たった場合や反転したときにシャープな角度になります。

ボールがゲームエリアの端に当たっているかどうかを判断するには、上で説明したのと同じ方法を使用します。

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

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