サンプル02　タッチ・マウス入力の検知（入力）

最初の講座で使ったサンプルプログラムでは、単にキャラを表示させるものでしたが、今度はタッチによってキャラを動かしてみましょう・・・😘

😆タッチ・スワイプとは？

スマートフォンが普及する以前、ゲームは入力操作をキーボードあるいはマウスから（＆ガラケーならボタン）受け付けることだけ考慮すれば良かったのですが、スマートフォンが爆発的に普及した今、タッチやスワイプへの対応が必須になりました。

スマートフォンにはキーボードもマウスもありませんからね・・・🤣

しかもブラウザ上で動かすアプリの場合、ユーザーがパソコンであってもスマートフォンであっても対応できなくてはいけません。（タッチ・スワイプしか対応できないと、机上でテストもできません・・・😂）

そこで今回のサンプルは、タッチ入力・マウス入力の両方に対応したプログラムとしました。

先ずはサンプルプログラムのダウンロードをお願いします👇

サンプルプログラムのファイル構成は、最初の講座で使ったもの（サンプル01）と同じです。

下記のファイルを変更しました。

（１）index.html

（２）nfld.js

（３）main.js

それぞれ解説します。

表示するタイトルと説明文を変えたのみです。

ちなみに「<br>」は改行コードですね。

タッチ入力のキモがここに集中しています・・・😨

110～213行目。タッチ関連のコールバック関数です💀

おおかまに３つです。

　　①タッチ開始：　Touch_Start(e){…、　Mouse_Down(e){…、UI_Start(ex,ey){…

　　②スワイプ検知：　Touch_Move(e){…、　Mouse_Move(e){…、UI_Move(ex,ey){…

　　③タッチ完了（指が離された）：　Touch_End(e){…、　Mouse_End(e){…、UI_End(){…

この中で、キャラを移動させる処理は151～170行目に記述しています。

右に、左に、下に、上にスワイプした時それぞれの処理としています。

上記のnfld.jsにて定義したコールバック関数を呼び出す処理です・・・😃

47～69行目。

タッチ入力を行なうには、nfld.jsに記述したコールバック関数と、main.jsに記載した呼び出し元の処理を追記すれば良い、というものでした。

意外にも簡単ですね・・・😘　入力処理を増やしたいような場合には（たとえば、タップ処理）nfld.jsのコールバック関数の中身を増やすことで実現できます。