将我的 HTML5 游戏控件更改为鼠标/触摸答案

【问题标题】：Changing my HTML5 game controls to mouse/touch将我的 HTML5 游戏控件更改为鼠标/触摸
【发布时间】：2015-02-27 15:04:14
【问题描述】：

所以我将控件设置为空格键来跳转，但我希望我的 HTML5 游戏可以在任何地方运行，因此我需要将其更改为鼠标/触摸。鼠标/触摸没有键码，那么对此代码执行此操作的最佳方法是什么？我需要分别做鼠标和触摸吗？

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

// jump higher if the space bar is continually pressed
if (KEY_STATUS.space && jumpCounter) {
  player.dy = player.jumpDy;
}

【问题讨论】：

标签： javascript html mobile

【解决方案1】：

您正在谈论 JavaScript 中的触摸事件。如果用户触摸屏幕，您将必须添加一个事件侦听器并捕获。 Here 您可以找到一个文档齐全的教程，了解如何在触摸屏和鼠标上使用它。

查看第一个answer，您将不得不这样做。您必须在 canvas 本身上添加一个事件侦听器，就像那个人在 myDiv 上所做的那样。

这是我写的一个例子（请不要介意我很奇怪）：

<div id="fakeCanvas">
    Click or touch me!
</div>

<script type="text/javascript">
    var fakeCanvas = document.getElementById('fakeCanvas');

    function methodToInvokeForClick() {
        alert('I have been clicked!');
    }

    function methodToInvokeForTouch() {
        alert('I have been touched!');
    }

    fakeCanvas.addEventListener("click", methodToInvokeForClick, false);
    fakeCanvas.addEventListener("touchstart", methodToInvokeForTouch, false);
</script>

我想你可以从现在开始接管它。我对fakeCanvas div 所做的事情，你必须对你的canvas 做同样的事情，给它一个id 等等。祝你好运！

【讨论】：

感谢您的回复！我已经阅读了教程，但它对我的问题没有帮助，我不知道如何将其整合到我的游戏中。
@GoogleFailedMe，我编辑了我的答案。看看吧，也许对你有帮助。
如果我在画布上添加一个事件监听器，如何在 if 语句中使用它，以便让玩家跳转？你能编辑我的代码，让我看看它是如何完成的吗？谢谢，我是初学者，很抱歉不知道
@GoogleFailedMe，哦，对了，我忘了说我再次编辑了我的答案。