多くのタッチベースHTML5ゲームでは、仮想ジョイスティックのメカニズムが使用されています。ユーザは画面をタッチして入力を開始し、次に入力を行うためにスワイプする。ジョイスティックを左に動かすのと同じように、左にスワイプします。ユーザーがスワイプするほど、入力値は大きくなります。 simpleGameライブラリには、タッチベースのデバイスに仮想ジョイスティックを簡単に実装できる仮想ジョイスティックオブジェクトがあります。
<！ - 1 - >
仮想ジョイスティックは数値データを返すことで動作します。数値出力を視覚的要素にマッピングする前に数値出力を調べることで、それがどのように機能するかを理解するのが最も簡単です。
ジョイスティックテストvarゲーム; var出力; varジョイスティック。 関数init（）{game = new Scene（）;出力=ドキュメント。 getElementById（ "output"）; if（game。touchable）{ joystick = new Joy（）; } else { alert（ "このテストにはタッチベースのインターフェースが必要です"）; } ゲーム。 {（999）jx =ジョイスティックの場合）{ if（game。touchable）{ getMouseX（）; jy =ジョイスティック。 getMouseY（）; jdx =ジョイスティック。 getDiffX（）; jdy =ジョイスティック。 getDiffY（）; result = "joystick x：" + jx + " ";
result + = "joystick y：" + jy + " ";
result + = "joystick dx：" + jdx + " ";
result + = "joystick dy：" + jdy + " ";
出力。
ここにはまだ何もありません 仮想ジョイスティックは非常に使いやすいです：
ジョイスティックの変数を作成します。
-
ジョイスティックと呼ぶことができます。キャッチーな種類。
できるだけジョイスティックを作成します。
-
ゲームを使用します。 touch interfaceが存在するかどうかを判断するためにtouchableプロパティを使用します。そうでない場合は、ユーザーにメッセージを送信します。
マウスの位置を取得します。
-
仮想ジョイスティックオブジェクトが画面上のタッチを検出すると、mouseXとmouseYの値がトリガされます。ジョイスティックのgetMouseX（）メソッドとgetMouseY（）メソッドを使用して、タッチのXとYの位置を決定します。このようにして、タッチインタフェースは伝統的なマウスのように機能します。
<！ - 3 - >
ジョイスティックからdiffXとdiffYを読み込みます。 -
ユーザが画面をタッチすると、ライブラリは初期タッチの座標を追跡する。その後、ユーザーがスワイプした距離を測定します。 Xの違いをdiffX、Yの違いをdiffYといいます。仮想ジョイスティックオブジェクトのgetDiffX（）メソッドとgetDiffY（）メソッドを使用して、ユーザーが画面に触れてから移動したXとYのピクセル数を判断します。
現在の値を表示します。
-
この最初のパスでは、ジョイスティックが何を表示しているのかを理解することが重要なので、値を取り出してスクリーン出力に出力してください。
もちろん、仮想ジョイスティックのポイントは、画面上で物を動かすことです。
コードは次のとおりです：
joystick Test var game; varボール; varジョイスティック;関数init（）{ゲーム=新しいシーン（）;ボール=新しいスプライト（ゲーム、 "redBall。png"、50、50）; else {alert（ "このゲームにはタッチスクリーンが必要です"）;} //ボールの場合は終了します。 setSpeed（0）;玉。 setPosition（400、300）;ゲーム。 start（）;} //終了するinit関数update（）{ゲーム。 clear（）; if（game。touchable）{ボール。 setDX（ジョイスティック。getDiffX（））;玉。 setDY（ジョイスティック。getDiffY（））;} //タッチ可能なボールを終了します。 update（）;} // end update
この例は、前の例よりもさらに単純です。
単純なボールスプライトを作成します。
-
この例では、単純なボールが使用されています。他の基本スプライトと同じように作成します。
ジョイスティックオブジェクトを作成します。
-
仮想ジョイスティックオブジェクトを作成します。
ジョイスティックのdiffXとdiffYをボールのdxとdyの値にマップします。
-
これは非常に敏感な動きを与えるので、diffXとdiffYをいくつかの倍率で除算することで感度を調整することができます。
