按下Java键+ setTimeout（）

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>

我究竟做错了什么？ 我知道它必须是setTimeout的，但我试图解决这个问题很多次。 图像甚至不会改变。

Answer 1

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

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

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

按下Java键+ setTimeout（）

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-07-18 21:47:07

按下Java键+ setTimeout（）

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-07-18 21:47:07

解决方案1
0 已采纳 2015-07-18 21:47:07