Question

我用html和javascript制作游戏。只是为了澄清，这不是重复或任何事情。什么都没有我需要的答案。在我解释之前，我想说我对关键监听器没有任何问题，我的游戏知道何时按下按键以及何时释放按键。好的，我有5帧角色走路。我有一个while循环，基本上是在按下键D或按下右箭头时，然后递增帧以使其看起来像角色正在行走。然后它有一个setTimeout函数，暂停1/10秒。这应该让它看起来像角色走路。我知道它与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 Key Pressed + setTimeout（）

1 个答案: