ゲームのコントローラ

赤い四角を動かすには、ボタンを押してください：

コントロールの取得

赤い四角をコントロールしようと思います。

上、下、左、右の 4 つのボタンを追加します。

選択した方向にコンポーネントを移動するため、各ボタン用の関数を記述します。

component コンストラクタに 2 つの新しいプロパティを作成し、speedX および speedY と呼びます。このプロパティは、速度インジケータとして使用します。

component コンストラクタに newPos() という関数を追加します。 この関数は、speedX と speedY プロパティを使用してコンポーネントの位置を変更します。

newpos 関数は、コンポーネントを描画する前に updateGameArea 関数から呼び出されます：

動作の停止

必要であれば、ボタンを離したときに赤い四角を停止させることができます。

速度インジケータに 0 を設定する関数を追加します。

通常スクリーンとタッチ・スクリーンの両方を処理するために、両デバイスのコードを追加します：

コントローラとしてのキーボード

キーボードの矢印キーを使用し、赤い四角をコントロールすることもできます。

キーが押されたかどうかをチェックするメソッドを作成し、myGameArea オブジェクトの key プロパティにキーコードを設定します。 キーを放したときは、key プロパティに false を設定します：

矢印キーのいずれかが押されていれば、赤い四角を動かすことができます：

複数キーを押下

同時に、複数のキーを押した場合はどうなるでしょうか？

上の例では、コンポーネントは横か縦方向にのみ移動できます。今度は、コンポーネントを斜めにも動かそうと思います。

myGameArea オブジェクト用に keys 配列を作成し、 押下された各キー毎に 1 つの要素を挿入して値を trueにします。 このキーの値は、キーが押されなくなるまでは true のままで、keyup イベントリスナ関数では< code class="w3-codespan"> false になります：

マウスカーソルをコントローラとして使用する

マウスカーソルを使用して赤い四角を制御したい場合は、マウスカーソルの x と y 座標を更新するメソッドを myGameArea オブジェクトに追加します。

その後、マウスカーソルを使って赤い四角を移動できるようになります：

画面タッチでゲームをコントロール

タッチスクリーンでも赤い四角をコントロールすることができます。

画面がタッチされた場所の x と y 座標を使用するメソッドを、myGameArea オブジェクトに追加します：

 その後で、マウスカーソルの場合と同じコードを使用して、ユーザが画面にタッチすると、赤い四角を動かすことができます：

キャンバス上のコントローラ

キャンバスに独自のボタンを描画して、コントローラとして使用することもできます：

コンポーネント（この場合はボタン）が、クリックされたかどうかを調べる新しい関数を追加します。

まず、マウスボタンがクリック（mousedown と mouseup）されたかどうかを 確認するイベントリスナを追加します。 タッチスクリーンを処理する場合にも、イベントリスナを追加して、画面がクリック（touchstart と touchend）されたかどうかを確認します：

myGameArea オブジェクトには、クリックの x- と y-座標を示すプロパティがあります。 これらのプロパティを使用して、青いボタンの 1 つの上でクリックが行われたかどうかを確認します。

新しいメソッドは clicked と呼ばれ、component コンストラクタのメソッドであり、コンポーネントがクリックさたかどうかを確認します。

 updateGameArea 関数では、青いボタンの 1 つがクリックされた場合に、必要なアクションを実行します：