当我在移动版本中点击底部时，Javascript游戏会滞后

Question

我正在尝试使用JavaScript制作游戏。在计算机版本中，它可以正常运行，但是当我尝试在移动版本中进行证明时（Google chrome> F12>切换设备工具栏或Ctrl + Shift + M），游戏在点击左/右底部时会滞后。

我曾尝试将div元素更改为buttom，但实际上我不知道问题出在哪里。这不是一个复杂的游戏，或者至少我认为。

这里是代码：

var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");





    function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
    }

    //paleta
    var paddleHeight = 10;
    var paddleWidth = 75;
    var paddleXD = (canvas.width-paddleWidth)/2;
    var paddleXU = (canvas.width-paddleWidth)/2;

    var rightPressedU = false;
    var leftPressedU = false;

    var rightPressedD = false;
    var leftPressedD = false;

    document.addEventListener("keydown", keyDownHandlerD, false);
    document.addEventListener("keyup", keyUpHandlerD, false);
    document.addEventListener("keydown", keyDownHandlerU, false);
    document.addEventListener("keyup", keyUpHandlerU, false);

    document.getElementById("der").addEventListener("mousedown", function () {
        rightPressedD = true;
    }, false);
    document.getElementById("izq").addEventListener("mousedown", function () {
        leftPressedD = true;
    }, false);
    document.addEventListener("mouseup", function () {
        rightPressedD = false;
        leftPressedD = false;
    }, false)
    document.getElementById("der").addEventListener("touchstart", function () {
        rightPressedD = true;
    }, false);
    document.getElementById("izq").addEventListener("touchstart", function () {
        leftPressedD = true;
    }, false);
    document.addEventListener("touchend", function () {
        rightPressedD = false;
        leftPressedD = false;
    }, false)

    //flechas (ABAJO)
    function keyDownHandlerD(e) {
        if(e.keyCode == 39) {
            rightPressedD = true;
        }
        else if(e.keyCode == 37) {
            leftPressedD = true;
        }
    }

    function keyUpHandlerD(e) {
        if(e.keyCode == 39) {
            rightPressedD = false;
        }
        else if(e.keyCode == 37) {
            leftPressedD = false;
        }
    }


    //A y D ARRIBA
    function keyDownHandlerU(e) {
        if(e.keyCode == 100) {
            rightPressedU = true;
        }
        else if(e.keyCode == 97) {
            leftPressedU = true;
        }
    }

    function keyUpHandlerU(e) {
        if(e.keyCode == 100) {
            rightPressedU = false;
        }
        else if(e.keyCode == 97) {
            leftPressedU = false;
        }
    }


    //lugar donde aparecerá la bola
    var x = canvas.width/2;
    var y = canvas.height-30;

    //esto es la 'velocidad', los pixeles que recorren cada 10 milisegundos.
    var dx = 2;
    var dy = -2;

    //el radio del balon
    var ballRadius = 10;


    function drawBall() {//esto simplemente pinta la bola
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI*2);
        //ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }
    function drawPaddleU() {
        ctx.beginPath();
        ctx.rect(paddleXU, 0, paddleWidth, paddleHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }
    function drawPaddleD() {
        ctx.beginPath();
        ctx.rect(paddleXD, canvas.height-paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddleD();
        drawPaddleU();

        if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
            dx = -dx;
            //ctx.fillStyle = getRandomColor();
        }
        if(y + dy < ballRadius) {
            dy = -dy;
        } else if(y + dy > canvas.height-ballRadius) {
            if(x > paddleXD && x < paddleXD + paddleWidth) {
                dy = -dy;
            }
            else {
                //alert("GAME OVER");
                document.location.reload();
            }
        }
        if(rightPressedD && paddleXD < canvas.width-paddleWidth) {
            paddleXD += 7;
        }
        else if(leftPressedD && paddleXD > 0) {
            paddleXD -= 7;
        }

        if(rightPressedU && paddleXU < canvas.width-paddleWidth) {
            paddleXU += 7;
        }
        else if(leftPressedU && paddleXU > 0) {
            paddleXU -= 7;
        }
        x += dx;
        y += dy;
    }
    



        //document.write("la bola esta en X: "+x+" Y: "+y);
    

    setInterval(draw,10);

* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; border: 1px solid black;}
        table{touch-action: manipulation;}
        #izq{
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        #der{
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>game</title>
</head>
<body>
<center>
<table>
<tr >
    <td colspan="2">
        <canvas id="myCanvas" width="480" height="320"></canvas>
    </td>
</tr>
<tr>
    <td>
        <div id="izq" style="background-color: green; width: 240px; height: 160px;">left</div>
    </td>
    <td>
        <div id="der" style="background-color: green; width: 240px; height: 160px;">right</div>
    </td>
</tr>
</table>
</center>

</body>
</html>

Answer 1

这也发生在我身上，我不知道问题出在哪里。我向Chrome小组提交了bug report，response如下：

我相信这是预期的。如果您添加事件监听器，触摸开始可能会指示滚动即将发生（Chrome无法告诉先验事件是否会阻止默认事件）。因此，我们避免安排任何Javascript任务（例如计时器），以确保触摸处理器保持响应状态，以便潜在的即将出现的滚动可以尽快开始。

因此，基本上，Chrome浏览器在用户开始触摸屏幕后会停止计时器一段时间，以确保滚动响应。

有两种简单的方法可以避免这种情况：

1. 使用被动事件侦听器。

   这是对Chrome的保证，即处理程序不会调用ev.preventDefault()，因此我们可以提前告知触摸拖动会导致滚动。因此，当我们准备好滚动（离开Javascript线程）时，我们不必等待处理程序做出响应，并且可以立即滚动，因此我们不必保持JS线程空闲即可获得响应。

2. 呼叫ev.preventDefault()。这将防止滚动，但可能会导致更好的性能。