如何在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。