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

プログラミング支援

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

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

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

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

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

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

😉サンプルプログラムの解説

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

https://nengasoft.com/prj/sample02.zip

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

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

(1)index.html

(2)nfld.js

(3)main.js

それぞれ解説します。

😗index.html

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

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

😚nfld.js

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

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

おおかまに3つです。

  ①タッチ開始: 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行目に記述しています。

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

🤗main.js

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

47~69行目。

😊まとめ

スワイプ操作で移動したキャラクター

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

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

コメント

タイトルとURLをコピーしました