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

在更新播放器功能中调用：

  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();

  };

我试图在KEY_CODES变量中添加其他函数，用'onkeyd'代替'onkeyd'和'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;
  }
 };

在html5游戏中添加触摸事件

1 个答案: