HTML5ゲームでのユーザーインタラクションの作成方法 - ダミー

HTML5ゲームとアニメーションの最大の違いは、ユーザーの操作です。それをゲームにしたいのであれば、ユーザーは関与する必要があります。そしてそれを行う方法はここにあります。

コードは：

車です。 html varシーン。 var car;関数init（）{シーン=新しいシーン（）; car = new Sprite（シーン、 "car。png"、50、30）;車。 setAngle（270）;車。 setSpeed（0）;シーン。 start（）;} //終了するinit関数update（）{シーン。 clear（）; //（keysDown [K_LEFT]）{ carの場合、キー をチェックします。 changeAngleBy（-5）; } // if  999 if（keysDown [K_RIGHT]）{ 車。 changeAngleBy（5）; } // if（keysDown [K_UP]）{ car。 changeSpeedBy（1）; } // if（keysDown [K_DOWN]）{ car。 changeSpeedBy（-1）; } // end if 車。 update（）;} // end update 車を運転してください！ <！ゲームにキーボードを使用する方法 何とかユーザーがページとやりとりする必要があります。キーボードは、使用するのが最も簡単な入力要素の1つです。 simpleGameはキーボードをチェックするいくつかの方法を提供しますが、最も強力なテクニックはkeysDownという特別な変数を使います。これはどのように動作するのですか？

keysDown
はグローバル配列です。

この変数は、シーンを構築するときに自動的に作成されます。これはブール値の配列です。つまり、各要素は真または偽のみであることを意味します。

<！ - 2 - >

各キーには定数が定義されています。 標準キーボードの各キーには、既に定義された特別な定数があります。たとえば、K_AはAキーを表し、K_BはBキーを表します。 keysDown
はすべてのキーの状態を示します。
Aキーが現在押されている場合、keysDown [A]は値trueを含みます。 Aキーが押されていない場合、keysDown [A]には値falseが入ります。 <！ - 3 - >
キーの現在の状態を確認できます。 keysDown []配列をチェックして、キーの現在の状態を確認します。 複数のキーを同時に押すことができます。
この技術の主な目的は、複数のキーを一度に押すことができるようにすることです。通常のコンピューティングでは、一度に複数のキーを持つことは珍しいことです。ゲームでは、一度に複数のキーを押すのが一般的です。そのため、この期待を裏付けるメカニズムが必要です。
ゲームスプライトの移動方法 スプライトは基本的にXとYのプロパティによって制御される位置を持ちます。数学クラスから覚えている場合、Xは水平値を表し、Yは垂直位置を表します。
原点（0、0）は画面の左上隅です。

X座標は、あなたが数学クラスから覚えているのと同じように機能します。 X値が大きくなると、スプライトは右に移動します。コンピュータグラフィックスでは、Yは数学クラスとは少し違った働きをします。ほとんどのディスプレイハードウェアは上から下にスキャンするので、Yは画面の上部で0になり、下に移動するとYが増加します。

最大の高さと幅はシーン：シーンに格納されていることに注意してください。高さとシーン。幅。さまざまな移動方法は、実際にはXとYを操作することです。これらの値を手動で設定することも（setPosition（）、setX（）、setY（））、値を変更することもできます（changeXby（）、changeYby （））。これらのメソッドはそれぞれすぐに動作するので、スプライトの位置や動きを指示するために使用できます。これらの機能のいくつかは互いに類似しているように見えます。たとえば、changeXby（）はsetChangeX（）とよく似ています。これらの関数は微妙ではあるが重要な違いがあります。 changeXby（）関数は、Xの値を1回変更します。変更を続行するには、この関数を呼び出しておく必要があります。

setChangeX（）関数は、一度呼び出すことができるのでより強力です。また、setChangeX（）を再度呼び出すまで、決まった値でxを繰り返し変更します。

ほとんどのスプライトでは、スプライトに角度と速度を与えて放すだけです。スプライトオブジェクトには、この動作に必要なメソッドがあります。 setAngle（）はスプライトの方向を決定し、setSpeed（）はその方向に進む速度を指定します。ほとんどのモーション関数と同様に、changeAngle（）メソッドとchangeSpeed（）メソッドもあります。

ゲームでの車のコントロール方法

keysDownメカニズムをモーションメソッドと組み合わせると、車を簡単に制御できます。 update（）の関連するコードは次のとおりです：

function update（）{scene。 clear（）;

//（keysDown [K_LEFT]）{

carの場合、キー

をチェックします。 changeAngleBy（-5）;

} // if  999 if（keysDown [K_RIGHT]）{ 車。 changeAngleBy（5）; } // if（keysDown [K_UP]）{ car。 changeSpeedBy（1）; } // if（keysDown [K_DOWN]）{ car。 changeSpeedBy（-1）; } // end if 車。 update（）;} // end update 実際のコーディングはわかりやすいです： シーンをクリアします。 いつものように、update（）関数の最初の注文は、プレイルームをクリーンアップすることです。前のフレームを消去したことを確認してから、他の作業をしてください。 左矢印キーを確認します。 keysDownメカニズムを使用して、左矢印が現在押されているかどうかを判断します。 左矢印が押されている場合は、車を左折します。 ユーザが現在左矢印キーを押している場合、車を反時計回りに5度回す。 changeAngleBy（）メソッドを使用して、車の外観と走行方向を変更します。

右矢印を繰り返します。

右矢印チェックも同様ですが、今回は車を時計回りに5度回転させます。

上矢印を使用して加速します。
ユーザが上矢印を押すと、車の速度を変更する。車を加速するには正の値を使用してください。このコードは1秒間に20回チェックされているので、あまり時間がかかりません。

下向きの矢印で車をゆっくりと下ろします。
下向き矢印にも同様のメカニズムを使用します。車を減速させるには、速度をマイナスの値に変更します。このアプローチでは負の値が許され、望むなら車がバックアップします。

新しい位置に車を引きます。
スプライトのモーション関数

を呼び出すと車の位置は変わらないことを覚えておくことが非常に重要です！
ゲームのメモリ内の内部データのみを変更します。これらの変更が実際に行われているかどうかを確認するには、carのupdate（）メソッドを呼び出す必要があります。