如何在 HTML5 手机游戏中添加触摸屏功能（点击屏幕左侧/右侧）？

Question

我目前正在使用 Javascript 和 HTML 将 Doodle Jump 游戏开发为一款移动网络游戏。

用户需要按住屏幕右侧将涂鸦向右移动，按住左侧将涂鸦向左移动

这里我提供一个图片参考

1. 如何为屏幕左右两侧添加隐形碰撞器？（我应该使用 HTML 画布还是 Javascript）

2. 如何在 Javascript 中编写 Eventlistener 函数，以便玩家能够通过触摸手机屏幕的左侧或右侧来移动涂鸦

Answer 1

如果您使用 jQuery，则很容易捕获屏幕上的点击。

这是一个可以满足您要求的小提琴。

点击函数会测量div的宽度，然后比较点击的x位置，看是大于还是小于div的一半。

https://jsfiddle.net/q82nhef0/

$("#thediv").click(function(e) {
    var divWidth = $("#thediv").width();        
    var clickX = e.clientX;
    if (clickX > divWidth/2) {
        console.log("Div was clicked on the right");
    } else {
        console.log("Div was clicked on the left");
    }
});

如果您使用的是 html5 画布，这将起作用。如果您正在使用 html5 元素的组合构建游戏场，那么我建议在整个游戏表面上放置一个 div，并且这个 div 应该具有较高的 z-index。