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

提问于 2024-05-09T08:03:44+08:00

浏览次

-4

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

用户需要握住屏幕的右侧以将涂鸦向右移动并向左按住以将涂鸦移动到左侧

这里我提供图像参考

enter image description here

如何为屏幕左右两侧添加隐形对撞机？（我应该使用HTML画布还是Javascript）
如何在Javascript中编写Eventlistener函数代码，以便玩家能够通过触摸移动屏幕的左侧或右侧来移动涂鸦

1 回答

0
如果你使用jQuery，很容易捕获屏幕上的点击 .

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

click函数将测量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 .
回复于 2024-05-09T08:03:44+08:00

相关问题