html5ゲームにタッチイベントを追加する

Question

私はまだこのhtml5ゲームのチュートリアルで作業しています。タッチイベントを追加しようとしており、タッチスクリーンデバイスでゲームをプレイできるようにしています。私がいることをKEY_CODES変数に追加機能を追加しようとしました

player.update = function() { 

    if (KEY_STATUS.space && player.dy === 0 && !player.isJumping) { 
    player.isJumping = true; 
    assetLoader.sounds.jump.play(); 
    player.dy = player.jumpDy; 
    jumpCounter = 12; 
    } 

    if (KEY_STATUS.space && jumpCounter) { 
    player.dy = player.jumpDy; 
    assetLoader.sounds.jump.play(); 
    } 

    jumpCounter = Math.max(jumpCounter-1, 0); 

    this.advance(); 

    }; 

：

var KEY_CODES = { 
32: 'space' 
}; 
var KEY_STATUS = {}; 
for (var code in KEY_CODES) { 
if (KEY_CODES.hasOwnProperty(code)) { 
KEY_STATUS[KEY_CODES[code]] = false; 
    } 
} 
document.onkeydown = function(e) { 
var keyCode = (e.keyCode) ? e.keyCode : e.charCode; 
if (KEY_CODES[keyCode]) { 
e.preventDefault(); 
KEY_STATUS[KEY_CODES[keyCode]] = true; 
    } 
}; 
document.onkeyup = function(e) { 
var keyCode = (e.keyCode) ? e.keyCode : e.charCode; 
if (KEY_CODES[keyCode]) { 
e.preventDefault(); 
KEY_STATUS[KEY_CODES[keyCode]] = false; 
    } 
}; 

更新プレーヤー機能で呼び出されます。私は、スペースバーを使用してジャンプするプレーヤーを可能に変数を持っています'onkeydown'と 'onkeyup'を 'ontouch'と 'onrelease'の代わりに使用しましたが、動作させることができませんでした。 引き続きKEY_CODEブロックに追加するか、または新しい変数を定義する必要がありますか？ ありがとうございます

Answer 1

デバイスの種類（タッチ/キーボード）に基づいてジャンプトリガーイベントを変更できます。両方のケースをカバーするように、keyCodeを処理するコードを更新する必要があります。

function is_touch_device() { 
    return 'ontouchstart' in window  // works on most browsers 
     || navigator.maxTouchPoints;  // works on IE10/11 and Surface 
}; 

var JUMP_START_EVENT = is_touch_device()? 'ontouchstart' : 'onkeydown'; 
var JUMP_END_EVENT = is_touch_device()? 'untouchend' : 'onkeyup'; 

document[JUMP_START_EVENT] = function(e) { 
var keyCode = (e.keyCode) ? e.keyCode : e.charCode; 
if (KEY_CODES[keyCode]) { 
e.preventDefault(); 
KEY_STATUS[KEY_CODES[keyCode]] = true; 
    } 
}; 

document[JUMP_END_EVENT] = function(e) { 
var keyCode = (e.keyCode) ? e.keyCode : e.charCode; 
if (KEY_CODES[keyCode]) { 
e.preventDefault(); 
KEY_STATUS[KEY_CODES[keyCode]] = false; 
    } 
};