パソコンのキー操作に対応させるためには以下のようにします。これだとキーが押されているあいだだけ移動の処理がおこなわれます。

PCでキーが押されているときだけキャラクタを移動させる

スマホでキャラクタを移動させる

ではスマホの場合はどうすればいいでしょうか?

スマホにはPCのようなキーボードがないのでボタンをタップしたらキャラクターが移動するようにします。

HTML部分にボタンを追加します。

clickはPCだけでなくスマホにも対応している

JavaScript部分に以下を追加します。

JavaScript

PCのmousedown mouseupはtouchstart touchendに対応

上のコードだとボタンをクリックすることで1ピクセルだけ移動します。またスマホでボタンをタップしても動作します。ただ連続で移動させることができません。ボタンを押している間だけ連続して移動させるためには以下のようにします。

ロングタッチ時のデフォルトの動作を抑止する

スマホはロングタッチをすると文字選択状態になってしまい、この状態で指を離しても’touchend’イベントを処理することができません。これでは移動を開始したキャラクターを止めることができません(実際にはそのボタンを押してすぐ離せばよいのだが、ユーザーにとってはそんなこと知る由もありません)。

自動で行なわれる動作を抑止するにはEvent.preventDefault()関数を呼び出すのですが、コンテキストメニューの表示も別に抑止する処理を入れてあります。

ユーザビリティは最悪?

各ボタンをタップしたときにe.preventDefault()を実行しなくても全体でデフォルトの動作を抑制する方法もあるのですが、これだとスクロールすることすらできなくなってしまいます。スクロール不要のゲームをつくるのであれば、これでもよいかもしれませんが、ユーザビリティは非常に悪くなります。

PCのマウス操作と落とし穴

PCのマウス操作に対応させるためには以下のようにします。これだけだと、マウスボタンを押したまま表示されているボタン以外の部分に移動したあとマウスボタンを離したときに問題がおきます。なので、どこであってもマウスボタンが離されたときにはすべての移動フラグをクリアする処理を入れています。