Javascript 按键 + setTimeout()

Question

我正在用 html 和 javascript 制作游戏。只是为了澄清，这不是重复的或任何东西。什么都没有我需要的答案。在我解释之前，我想说我对按键侦听器没有任何问题，我的游戏知道何时按下按键以及何时释放按键。好的，我有一个角色行走的 5 帧。我有一个 while 循环，基本上说当按下键 D 或按下右箭头时，然后增加帧数以使其看起来像角色在走路。然后它有一个暂停 1/10 秒的 setTimeout 函数。这应该使它看起来像角色在走路。我知道它与 setTimeout() 函数有关。这是 while 循环：

while (keys[68] || keys[39]) {
    charFrame++;
    setTimeout(function() {

    }, 100);
}

那么这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sparring Spartans</title>
        <style type="text/css">

        </style>
    </head>
<body>
    <canvas id="canvas" width="1000" height="600"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var width = canvas.width;
        var height = canvas.height;
        var groundX = 0, groundY = 400;
        var playerx = width/2, playery = groundY-120;
        var charFrame = 1;
        var speed = 4;
        var keys = [];
        window.addEventListener("keydown", function(e) {
            keys[e.keyCode] = true;
        }, false);
        window.addEventListener("keyup", function(e) {
            delete keys[e.keyCode];
        }, false);

        var spartan1 = new Image();
        spartan1.src = "spartan1.png";
        var spartan2 = new Image();
        spartan2.src = "spartan2.png";
        var spartan3 = new Image();
        spartan3.src = "spartan3.png";
        var spartan4 = new Image();
        spartan4.src = "spartan4.png";
        var spartan5 = new Image();
        spartan5.src = "spartan5.png";
        var stone = new Image();
        stone.src = "stone.png";

        function game() {
            update();
            render();
        }

        function player() {
            if (charFrame === 1) {
                context.drawImage(spartan1, playerx, playery);
            } else if (charFrame === 2) {
                context.drawImage(spartan2, playerx, playery);
            } else if (charFrame === 3) {
                context.drawImage(spartan3, playerx, playery);
            } else if (charFrame === 4) {
                context.drawImage(spartan4, playerx, playery);
            } else if (charFrame === 5) {
                context.drawImage(spartan5, playerx, playery);
            }
        }

        function ground() {
            for (var i = 0; i <= 1000; i += 55) {
                context.drawImage(stone, i, groundY);
            }
            for (var i = 0; i <= 1000; i += 55) {
                context.drawImage(stone, i, groundY+55);
            }
            for (var i = 0; i <= 1000; i += 55) {
                context.drawImage(stone, i, groundY+110);
            }
            for (var i = 0; i <= 1000; i += 55) {
                context.drawImage(stone, i, groundY+165);
            }
        }

        function manager() {
            ground();
            while (keys[68] || keys[39]) {
                charFrame++;
                setTimeout(function() {

                }, 100);
            }   
            player();
        }

        function update() {
            manager();
            player();
        }

        function render() {
            context.fillStyle = "#AFE4FF";
            context.fillRect(0, 0, width, height);
            manager();
        }

        setInterval(function() {
            game();
        }, 1000/30);
    </script>
</body>
</html>

我做错了什么？我知道 HAS 是 setTimeout，但我已多次尝试解决此问题。图像甚至没有改变。

Answer 1

因为您的 manager 函数每秒被调用 30 次，您应该使用 if 语句而不是循环来检查每帧一次按键：

function manager() {
    ground();
    if (keys[68] || keys[39]) {
        charFrame++;
    }
}

此外，您的 manager 函数每帧被调用两次，一次在 update 函数中，一次在 render 函数中。此外，您的 player 函数在 update 和 manager 中都被调用，每帧调用两次。您的代码需要进行一些重构才能正常工作，以确保每帧不会调用两次。

Javascript 按键 + setTimeout()

Javascript Key Pressed + setTimeout()

javascript

settimeout