将 JavaScript 游戏的键盘控件转换为触摸界面

Converting Keyboard controls of a javascript game to touch interface

本文关键字：转换 触摸 界面 控件 键盘 JavaScript 游戏      更新时间：2023-09-26

我目前正在开发一个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 }

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

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

  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
  }

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

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

相关文章：