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

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

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

这里我提供一个图像参考

如何为屏幕的右侧和左侧添加不可见的碰撞器？（我应该使用HTML画布还是Javascript）

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

---

如果您使用jQuery，在屏幕上捕获点击是非常容易的

这是一把小提琴，它能满足你的要求

单击功能将测量div的宽度，然后比较单击的x位置，查看它是否超过或小于div的一半

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

这可能会帮助您：

$("#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");
    }
});