在 x 和 -x 轴之间切换后的延迟答案

【问题标题】：Delay after switching between x and -x axes在 x 和 -x 轴之间切换后的延迟
【发布时间】：2020-03-13 00:07:09
【问题描述】：

我正在制作一个类似于 pong 的游戏，你必须移动那个白色矩形来破坏黑点。但是，如果您继续按住左箭头键，然后按下右箭头键，则矩形开始向右移动之前会有延迟。我认为这与 moveSelection 功能有关。

<html>
<body onload="docReady()" onkeydown="" onkeyup="">

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<canvas id="canvas" width=500 height=500></canvas>    
<!--issue starts here-->

<script type="text/javascript">
            function leftArrowPressed() {
            var element = document.getElementById("rec");
            element.style.left = parseInt(element.style.left) - 5 + 'px';
            }

            function rightArrowPressed() {
            var element = document.getElementById("rec");
            element.style.left = parseInt(element.style.left) + 5 + 'px';

            }

            function moveSelection(evt) {
                switch (evt.keyCode) {
                    case 37:
                    leftArrowPressed();
                    break;
                    case 39:
                    rightArrowPressed();
                    break;
                    case 38:
                    upArrowPressed();
                    break;
                    case 40:
                    downArrowPressed();
                    break;
                    }
                };

        function docReady()
        {

          window.addEventListener('keydown', moveSelection);
        }
</script>

<!--issue ends here-->

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// newly spawned objects start at Y=0
var spawnLineY = 0;

// spawn a new object every 375ms
var spawnRate = 375;

// set how fast the objects will fall
var spawnRateOfDescent = 2.0;

// when was the last object spawned
var lastSpawn = 1.34;

// this array holds all spawned object
var objects = [];

// save the starting time (used to calc elapsed time)
var startTime = Date.now();

animate();


function spawnRandomObject() {

    // select a random type for this new object
    var t;

    // create the new object
    var object = {
        // set this objects type
        type: t,
        // set x randomly but at least 10px off the canvas edges
        x: Math.random() * (canvas.width - 30) + 10,
        // set y to start on the line where objects are spawned
        y: spawnLineY,
    }

    // add the new object to the objects[] array
    objects.push(object);
}

function animate() {

    // get the elapsed time
    var time = Date.now();

    // see if its time to spawn a new object
    if (time > (lastSpawn + spawnRate)) {
        lastSpawn = time;
        spawnRandomObject();
    }

    // request another animation frame
    requestAnimationFrame(animate);

    // clear the canvas so all objects can be 
    // redrawn in new positions
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // x is drawn randomly
    // y; draw the line where new objects are spawned
    ctx.beginPath();
    ctx.moveTo(0, spawnLineY);
    ctx.lineTo(canvas.width, spawnLineY);
    ctx.stroke();


    // move each object down the canvas
    for (var i = 0; i < objects.length; i++) {
        var object = objects[i];
        object.y += spawnRateOfDescent;
        ctx.beginPath();
        ctx.arc(object.x, object.y, 8, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = object.type;
        ctx.fill();
    }

}

</script>

<style>

#rec {

    position: absolute;
}

#canvas {

    border: 5px;
    border-style: solid;
    border-color: cadetblue;
    background: rgb(1,0,90);
    background: linear-gradient(75deg, rgb(85, 0, 0)3%, rgb(161, 0, 0) 50%, rgb(85, 0, 0) 100%);

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto

}

body {

background:rgb(23, 10, 206);
background:linear-gradient(75deg, rgb(9, 7, 116) 0%, rgb(23, 10, 206) 50%, rgb(9, 7, 116) 100%);

}

</style>
<img id="rec" src="https://cdn.discordapp.com/attachments/580178253185155073/645595326769659934/Untitled-1.png" style="position:absolute;left:0; top:0;" height="20" width="150">
</body>
</html>

【问题讨论】：

您遇到的问题可以具体说明吗，提供更多的描述
如果你运行代码，我会这样做，按住右箭头键然后按住左箭头键矩形将需要几秒钟才能向左移动。
我没有遇到所描述的问题，但是如果你想忽略连续按下箭头而只想执行第一个按键，你应该搜索按键的去抖动

标签： javascript html css html5-canvas

【解决方案1】：

再次检查您的代码，延迟是因为您的 element.style.left 在达到零时分配了负值，并且在达到 screen.width 时也会发生同样的情况。您需要在左右箭头按下功能（如

）中分配新值后通过检查左值来停止它

function leftArrowPressed() {
        var element = document.getElementById("rec");
        element.style.left = parseInt(element.style.left) - 5 + 'px';
        //when you reach to zero
        if (parseInt(element.style.left) <= 0) {
            element.style.left = '0px';
        }
    }

    function rightArrowPressed() {
        var element = document.getElementById("rec");
        element.style.left = parseInt(element.style.left) + 5 + 'px';
        // when you reach to right border of the screen 
        if (parseInt(element.style.left) > window.screen.width - parseInt(element.width)) {
            element.style.left = window.screen.width - parseInt(element.width) + "px";
        }
    }

它对我有用，检查一下

【讨论】：