Javascript 按键 + setTimeout()-6ren

Javascript 按键 + setTimeout()

转载作者：行者123 更新时间：2023-11-28 07:08:36

27

4

我正在用 html 和 javascript 制作游戏。只是为了澄清，这不是重复或任何东西。没有什么可以给我我需要的答案。另外，在解释之前，我想说我对按键监听器没有任何问题，我的游戏知道何时按下按键以及何时释放按键。好的，我有 5 个 Angular 色行走的帧。我有一个 while 循环，基本上表示当按下 D 键或按下右箭头时，然后增加帧以使 Angular 色看起来像是在行走。然后它有一个 setTimeout 函数，暂停 1/10 秒。这应该会让 Angular 色看起来像是在行走。我知道这与 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，但我已经尝试多次解决这个问题。图像甚至没有改变。

最佳答案

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

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

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

关于Javascript 按键 + setTimeout()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31495826/

27

4

0

文章推荐： javascript - 模拟目录File对象

文章推荐： javascript - Cordova 地理位置返回空

文章推荐： javascript - 如何使这个 javascript async while 循环工作？

JavaScript 按键
我对 JavaScript 上的 onkeypress 事件有疑问。是否可以仅检测 Cntl 键或 Alt 键？此时，如果同时按下 Cntl 和 m，则 onkeypress 事件可以触发单击。是否
Firebase 按键 - 允许的字符
我想知道按键中允许使用什么样的字符。它是否也生成一个符号下划线(_)？我总是得到一个带有 - 字母的按键。最佳答案按键使用修改过的 Base64 字母表: -0123456789ABCDEFGHI
xml - 按键:选择前一个同级节点的最后一个子节点
我有以下格式的（格式错误的DITA）XML： BLARG BLARG Definition BLARG2 BLARG2 Definition BLARG3 BLARG3 Definition
javascript - 按键/值合并对象数组
我有两个单独的对象数组，如果特定键值匹配，我需要将它们合并。分析数据后可能更有意义: 数组 1 let categories = [ { id: 5, slug: 'category-5',
Javascript 按键 addEventListener
由于我是新手，所以我的低效编码给大家带来了巨大的麻烦，对此我提前表示歉意。我正在尝试在 HTML5 Canvas 上使用 Javascript 制作一个非常基本的游戏，但我似乎找不到一种简单的方法来
javascript - 按键/值合并对象数组
我试图找出将多维数组中的对象 id 属性映射到共享相同 id 的另一个数组中的对象值的最佳方法。举个例子，我有一个像这样的genre_ids数组: 0: {id: 1, name: 'sci-fi'
java - 在镜头之间添加延迟(按键)
我有一个游戏，当按下一个键时，您可以通过将子弹添加到 Controller 类来发射子弹。这是代码来自 KeyPressed(); else if (key == KeyEvent.VK_Q && !
Python:按键、值比较两个相同的字典
我想比较两个字典的长度以及每个字典中每个键、值对的长度。如果在查找时没有匹配项，我还需要能够打印出来。我当前的代码似乎传递了长度标准，但在尝试匹配元素时失败: assert_that(len(mod
c# - OpenTK 按键？
我正在寻找一种跨平台(Win 和 MacOS)方法来检测 C# 中 OpenGL 应用程序的按键。以下有效，但仅适用于字母数字字符。 protected override void OnKeyPre
未捕获 JavaFX 按键
我正在 try catch 按键事件(向上和向下翻页)，但根本没有收到任何按键事件。这是相关代码:构造函数: private MainLayout() { imageView = new Im
javascript - 按键 - 转义不起作用
$(el).bind('blur keypress', function(event){ if(event.type == 'keypress' && event.keyCode != 13) r
c++ - SDL 按键
我有这段代码: while (SDL_PollEvent(&event)) { if (event.type == SDL_KEYDOWN) { switch(event.key.keys
javascript - 按键，但当输入或文本区域处于焦点时不按键
我正在使用下面的代码: $(document).keypress(function (e) { if (e.which === 68 || e.which === 100) {
Javascript 按键 + setTimeout()
我正在用 html 和 javascript 制作游戏。只是为了澄清，这不是重复或任何东西。没有什么可以给我我需要的答案。另外，在解释之前，我想说我对按键监听器没有任何问题，我的游戏知道何时按下按键以
javascript - 按键/更新未正确调用？
我正在尝试用 Javascript 制作游戏，但目前我已经陷入停滞。我正在尝试检测按键并检查它们是否不断按下以移动 Angular 色。这是我正在使用的代码: var THREE; var keys;
PHP:使用foreach从多维数组中删除元素(按键)
我得到了多维数组。我想从每个子数组中删除/取消设置索引为 1 的值。我的数组 $data。 Array ( [3463] => Array ( [0]
javascript - 按键 Action
我正在设计一个基于网络的会计软件。例如，每当用户按 N 键时，我想打开“新会计凭证”。并在他/她按下 S 键时打开“设置”。我看到了一些基于 JavaScript 和 jQuery 的脚本。但它们并
输入之外的 meteor 按键/按键事件
阅读此主题后: Keypress events stopped working outside of "input" elements in Meteor after update to 0.5.2
javascript - 切换按钮上的背景颜色(按键/键码)
所以，当我按下按钮 1“1 PLAY/STOP”时，按钮变成绿色，当我再次按下它时它会去除颜色。如果我按下 button2“2 PLAY/STOP”，同样的事情会发生。如果两个按钮之一播放而我按下
pywinauto - 使用 pywinauto 按键
非常直接的问题。只想按一个键盘键。像输入一样，使用 pywin auto。我不想在任何应用程序窗口的上下文中按下它。只是键盘键的原始按键，如 a 或 enter 或退格。最佳答案只需使用 #

首页

博学

6Ren·AI

商城

Javascript 按键 + setTimeout()