html5 게임에 터치 이벤트 추가하기

Question

나는이 html5 게임 튜토리얼에서 아직 작업 중이며 터치 스크린 장치에서 게임을 재생할 수 있도록 터치 이벤트를 추가하려고합니다. 나는 스페이스 바를 사용하여 이동 플레이어 수있는 변수가 : 업데이트 플레이어 기능에라고

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; 
    } 
}; 

: 나는 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(); 

    }; 

그 'ontouch'와 'onrelease'에 대해 'onkeydown'과 'onkeyup'을 대체했지만 작동시키지 못했습니다. 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; 
    } 
};