タッチ操作

第１４回マウス、タッチ操作２

JavaScriptでゲーム作成を目指す学習コーナーです。今回はタッチによるゲーム操作を実装します。

2020.11.292020.11.30

イベント
実行

イベント

タッチ開始、終了時に特定の関数を実行します。初期処理に次のコードを追加します。

    /*
      初期処理
    */
    function init(){
        document.addEventListener("keydown", keyDown);
        document.addEventListener("keyup", keyUp);
        document.addEventListener('mousedown',mouseDown);
        document.addEventListener('mouseup',stop);
        document.addEventListener('touchstart',touchStart);
        document.addEventListener('touchend',stop);

    ・
    ・

初期処理

function init(){

document.addEventListener("keydown", keyDown);

document.addEventListener("keyup", keyUp);

document.addEventListener('mousedown',mouseDown);

document.addEventListener('mouseup',stop);

document.addEventListener('touchstart',touchStart);

document.addEventListener('touchend',stop);

・

タッチ時にtouchStart()、タッチ終了時にstop()関数を実行します。stop()関数はマウスクリックと同じ関数です。

touchStart()()関数ではタッチされた座標をゲーム画面、パッド毎に求めます。そしてタッチ時の処理を行うaction()関数を実行します。このaction()関数もマウス操作と同じ関数です。

    /*
      タッチスタート
    */
    function touchStart(e){
        var x = e.changedTouches[0].pageX - controller.getBoundingClientRect().left;//コントローラーのタッチ横座標
        var y = e.changedTouches[0].pageY - controller.getBoundingClientRect().top;//コントローラーのタッチ縦座標
        var x2 = e.changedTouches[0].pageX - canvas.getBoundingClientRect().left;  //ゲーム画面のタッチ横座標
        var y2 = e.changedTouches[0].pageY - canvas.getBoundingClientRect().top;   //ゲーム画面のタッチ縦座標
        action(x,y,x2,y2);  //タッチ処理
    }

タッチスタート

function touchStart(e){

var x = e.changedTouches[0].pageX - controller.getBoundingClientRect().left;//コントローラーのタッチ横座標

var y = e.changedTouches[0].pageY - controller.getBoundingClientRect().top;//コントローラーのタッチ縦座標

var x2 = e.changedTouches[0].pageX - canvas.getBoundingClientRect().left; //ゲーム画面のタッチ横座標

var y2 = e.changedTouches[0].pageY - canvas.getBoundingClientRect().top; //ゲーム画面のタッチ縦座標

action(x,y,x2,y2); //タッチ処理

}

実行

タッチ操作でゲーム開始ができるか、移動、発射ができるか確認します。PCで確認する場合は「PCブラウザでスマホ画面をテスト」を参考にしてください。

実行画面へ

ソースコードを掲載します。

Download Now!