当我在移动版本中触底时,Javascript游戏落后

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

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

这是代码:

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>
评论
  • ni花痴
    ni花痴 回复

    This also happened to me and I had no idea what the problem was. I submitted a bug report to the Chrome team, and the response was the following:

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

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

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

    1. Use passive event listeners.

      This is a promise to Chrome that the handler doesn't call ev.preventDefault() so we can tell ahead of time that a touch drag will cause scrolling. Because of that, when we're ready to scroll (off the Javascript thread) we don't have to wait for handlers to respond and we can scroll immediately, so we don't have to keep the JS thread idle to get responsiveness.

      document.getElementById("der").addEventListener("touchstart", function () {
          rightPressedD = true;
      }, {passive: true});
      
    2. Call ev.preventDefault(). This will prevent scrolling, click events and other stuff, but might result in even better performance.

      document.getElementById("der").addEventListener("touchstart", function (ev) { // You need to use the first argument
          ev.preventDefault();
          rightPressedD = true;
      });
      

    Just be sure never to call ev.preventDefault() inside a passive event listener, otherwise you will get an error.