HTML5ゲームにリアルなモーションを追加する方法 - ダミー

ビデオ: What the heck is the event loop anyway? | Philip Roberts | JSConf EU 2025

空間を見てみましょう。 html。このシンプルなゲームは、HTML5ゲームに現実的なモーションを適用するための良い例です。これは、古典的なゲーム小惑星とスペクタクルで有名な制御スキームを利用しています！（小惑星はよく知られていますが、 Spacewar！はこれまでのより影響力のあるゲームです） - 1 - >

完全な経験を得るには、ここをクリックしてください。

ゲームのオブジェクトに力ベクトルを追加する方法

船は矢印キーで制御されますが、ニュートンの効果は地面よりも宇宙で見やすい（邪魔にならない抗力）。左矢印キーと右矢印キーは船を回転させますが、船の動きには影響しません。上向きの矢印はロケットを発射し、ロケットは現在船が向いている方向に力ベクトルを加えます。

<！ - 2 - >

コードは次のとおりです。

space var ship; varゲーム;関数Ship（）{tShip = new Sprite（ゲーム、 "船.png"、25,25）; tShip。 setSpeed（3）; tShip。 checkKeys = function（）{if（keysDown [K_LEFT]）{

これです。 changeImgAngleBy（-5）; } if（keysDown [K_RIGHT]）{ これ。 changeImgAngleBy（5）; } if（keysDown [K_UP]）{ これ。 addVector（this。getImgAngle（）、。1）; }} //終了関数return tShip;} //オブジェクト定義関数init（）{game = new Scene（）; ship =新しい船（）;ゲーム。 setBG（ "black"）;ゲーム。 start（）;} //終了するinit関数update（）{ゲーム。 clear（）;船。 checkKeys（）;船。 update（）;} // end update ゲームのスペースをシミュレートする方法

<！ - 9 - >

ここでは、次のようなことがあります。

例を通常の方法で開始します。

ほとんどのsimpleGameデモと同様、スプライトとシーンで始まります。船にはカスタムメソッドがあるので、それをユニークなオブジェクトにします。

船にcheckKeys（）メソッドを与えます。
checkKeys（）メソッドは、キーの押下を探し、それに応じて船の動作を変更します。

画像の角度を変更します。
スプライトは実際には2つの異なる角度を持ちます。これは、指している角度（simpleGameのimgAngleと呼ばれる）と、それが動いている角度（moveAngleと呼ばれる）を持つことができます。角度を変更すると、オブジェクトが直面している方向に単に移動するという前提で、移動角度とイメージ角度の両方が変更されます。簡単な例として、これは問題ないが、多くの種類の動きは画像と動きの角度を切り離す必要がある。 changeImgAngleBy（）メソッドを使用すると、モーション角度を変更せずに画像が指し示す方向を変更できます。（changeMotionAngle（）メソッドもありますが、頻繁には使用されません）。

推力をシミュレートするための力ベクトルを追加します。

ユーザが上矢印を押すと、船は主ロケットを発射する。これは、船が現在直面している方向に小さな力ベクトルを加える。船が現在直面している方向を判断するには、getImgAngle（）メソッドを使用し、この値を使用して力を追加する場所を指定します。
このコードはアニメーションループで発生しており、矢印キーを押したまま増幅されるため、非常に小さな力しか必要ありません。