Question

我目前正在开发一款javascript游戏，但我无法在移动设备上使用触控功能。这是一个简单的游戏，你可以按向上箭头跳转，或向下箭头滚动。

我也希望实现触控，因此触摸/按住显示屏的左侧会使角色滚动，并且通过触摸/按住屏幕的右侧，角色会跳跃。

这是向我和向上箭头工作的代码：

var KEY_CODES = {
    38: 'up',
    40: 'down'
  };

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

然后我可以通过以下方式让角色做事：

if (KEY_STATUS.up) { stuff and things }

任何可能对我有帮助的建议，提示，建议或可能的代码碎片？提前谢谢！

Answer 1

您应该能够使用触摸事件。在许多情况下，您可以使用为按键编写的相同功能，也可以单独编写它们。这是一个例子

  var touchedElement = document.getElementById("myElementToBeTouched");
  touchedElement.addEventListener("touchstart", funcTouchStart, false);
  touchedElement.addEventListener("touchend", funcTouchEnd, false);
  touchedElement.addEventListener("touchmove", funcTouchMove, false);

  function funcTouchStart(e) {
    //code to do what you want like set variables and check where on screen touch happened

    var touches = e.changedTouches; //gets array of touch points, to get position
  }

  function funcTouchEnd(e) {
    //code
  }

  function funcTouchMove(e) {
    //code
  }

要让它们响应左侧或右侧屏幕，您可以使用这些事件附带的触摸[i] .pageX，并将动作设置为仅在触摸[i]的屏幕的25％时发生.pageX = 0（左）或最后25％触摸[i] .pageX =屏幕/视口宽度。

这不是一个完整的工作示例，但我希望它足以让您了解自己可以做些什么。如果您需要有关这些事件的更多帮助，请尝试查看MDN示例之一，例如： https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

将javascript游戏的键盘控制转换为触摸界面

1 个答案: