触摸事件javascript

我制作了一个手机游戏，希望当用户触摸屏幕左侧时，球向右移动，如果用户触摸屏幕右侧，球应该向左移动。我找到了一个代码片段并尝试使用它，但它不起作用。有人给我一个解决这个问题的建议吗

window.onload=window.onresize=function（）{
var C=1；//画布宽度与视口宽度的比率
var W_TO_H=2/1；//画布宽度与画布高度之比
var el=document.getElementById（“myCanvas”）；
var viewportWidth=window.innerWidth；
var viewportHeight=window.innerHeight；
var canvasWidth=视口宽度*C；
var canvasHeight=canvasWidth/W_至_H；
el.style.position=“固定”；
el.setAttribute（“宽度”，画布宽度）；
el.setAttribute（“高度”，画布高度）；
el.style.top=（视口高度-画布高度）/2；
el.style.left=（视口宽度-画布宽度）/2；
var x=画布宽度/100；
变量y=画布高度/100；
window.ctx=el.getContext（“2d”）；
ctx.clearRect（0，0，画布宽度，画布高度）；
//画三角形
ctx.beginPath（）；
ctx.moveTo（x*90，y*50）；
ctx.lineTo（x*99，y*75）；
ctx.lineTo（x*99，y*25）；
ctx.closePath（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.moveTo（x*10，y*50）；
ctx.lineTo（x*1，y*25）；
ctx.lineTo（x*1，y*75）；
ctx.closePath（）；
ctx.stroke（）；
ballx=画布宽度/100；
//抽签
ctx.beginPath（）；
ctx.fillStyle=“#FF4422”
ctx.arc（ballx*50，y*50，x*5，0，2*Math.PI）；
ctx.fill（）；
函数init（）{
//参考我们的触控元件
var touchzone=document.getElementById（“游戏区”）；
//为touchstart事件添加事件处理程序
addEventListener（“touchstart”，touchHandler，false）；
}
函数touchHandler（事件）{
//获取坐标div的引用
var can=document.getElementById（“myCanvas”）；
//将触摸的坐标写入div
if（event.touchs[0].pageXx*50）{
ballx-=x*2；
}
}
}

---

您的HTML中有一个错误：

<div="gameArea">

在这两种情况下，您都需要检查pageX：

                } else if (event.pageX > x * 50) {

还请注意，我已将通过

x*2

修改ballx改为通过

1

修改它，因为在渲染函数中，您已经将其乘以

x

，因此

x*x*2

将导致球在画布外渲染

---

下面是一个稍微简化的版本，经过调整后可以在浏览器中使用：

这应该足以让你开始

            if (event.pageX < x * 50) {
                ballx += 1;
            } else if (event.pageY > x * 50) {
                ballx -= 1;
            }

                } else if (event.pageX > x * 50) {