javascript - 对象的移动，不受任何操作系统的干扰？-6ren

javascript - 对象的移动，不受任何操作系统的干扰？

转载作者：可可西里更新时间：2023-11-01 13:03:15

有一个测试代码给你:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        bri {
            position: absolute;
            width: 20px;
            height: 20px;
        }
        .dirt {
            background-color:brown;
        }
        .gracz {
            background-color:red
        }
    </style>
    <script >
        function makeLevel() {
            width = 30
            heigth = 30

            var bricks = document.getElementById('bricks')
            bricks.style.width = 20 * heigth + 'px'
            bricks.style.height = 20 * width + 'px'
            bricks.innerHTML = ''

            for (var i = 0; i < width; i++) {
                for (var j = 0; j < heigth; j++) {
                    var bri = document.createElement("bri");
                    bricks.appendChild(bri)
                    bri.style.top = i * 20 + "px"
                    bri.style.left = j * 20 + "px"
                    bri.id = i + "_" + j
                    bri.className = 'dirt'
                }
            }
            pos_player_x = Math.floor(Math.random() * width)
            pos_player_y = Math.floor(Math.random() * heigth)
            bri = document.getElementById(pos_player_x + '_' + pos_player_y);
            bri.className = 'gracz'
        }

        function moving(event) {
            var key = event.which
            //87 - w , 83 -s, 65 -a, 68 - d
            switch (key) {
                case 87:
                    var new_x = pos_player_x - 1;
                    var new_y = pos_player_y - 0;
                    break;
                case 83:
                    var new_x = pos_player_x + 1;
                    var new_y = pos_player_y - 0;
                    break;
                case 65:
                    var new_x = pos_player_x - 0;
                    var new_y = pos_player_y - 1;
                    break;
                case 68:
                    var new_x = pos_player_x - 0;
                    var new_y = pos_player_y + 1;
                    break;
            }
            var new_pos = document.getElementById(new_x + '_' + new_y)
            var old_pos = document.getElementById(pos_player_x + '_' + pos_player_y)
            if (new_pos != null) {
                new_pos.className = 'gracz';
                old_pos.className = 'clean';
                pos_player_y = new_y;
                pos_player_x = new_x;
            }
        }
    </script>

</head>
<body onload="makeLevel()" onkeydown="moving(event)">                
            <div id="game">
                <div id="bricks" draggable="false"></div>
            </div>
</body>
</html>

而我们需要专注于称为“移动”的功能。如果我们按住“WASD”按钮之一，我们的播放器将遵循此方向。但是，第一秒他移动了一次，之后他们会重复移动直到他到达其中一堵墙。

问题来了。如果我们按住其中一个按钮，如何消除这个小停顿？

这是我的第一篇文章，如有错误请见谅。

最佳答案

目前，您的 Action 与收到的按键次数有关。这是有问题的，不仅是因为您感知到的操作系统问题(即它会在多长时间内开始发送重复键)，而且还因为如果有人比基本重复更快地按下键(“垃圾邮件”)，它允许更快的移动按下按钮的速度。

相反，您的游戏应该有一个内部“滴答声”，它可以量化运动。当按下和释放键时，您会将这些更改传播到一个内部变量，并且每次您的游戏决定该移动时，都会根据该变量的当前状态移动。这意味着无论某人是按住按键还是发送垃圾邮件，无论操作系统发送重复信号的速度如何，方 block 都将按照您的游戏允许的速度移动。

编辑:这是您的代码的调整版本。注意新引入的startGameLoop功能，以及我如何使用 onkeydown和 onkeyup事件。在这个版本中，蛇在按下一个键时以稳定的速度移动，并且在释放后不再移动。

HTML:<body onload="makeLevel()" onkeydown="registerKey(event)" onkeyup="releaseKey()">

Javascript:

    var currentlyPressedKey;

    function makeLevel() {
        width = 30
        heigth = 30

        var bricks = document.getElementById('bricks')
        bricks.style.width = 20 * heigth + 'px'
        bricks.style.height = 20 * width + 'px'
        bricks.innerHTML = ''

        for (var i = 0; i < width; i++) {
            for (var j = 0; j < heigth; j++) {
                var bri = document.createElement("bri");
                bricks.appendChild(bri)
                bri.style.top = i * 20 + "px"
                bri.style.left = j * 20 + "px"
                bri.id = i + "_" + j
                bri.className = 'dirt'
            }
        }
        pos_player_x = Math.floor(Math.random() * width)
        pos_player_y = Math.floor(Math.random() * heigth)
        bri = document.getElementById(pos_player_x + '_' + pos_player_y);
        bri.className = 'gracz';
        startGameLoop();
    }

    function startGameLoop(){
      setInterval(move,250);
    }

    function registerKey(event){
      currentlyPressedKey = event.which;
    }

    function releaseKey(){
      currentlyPressedKey = null;
    }

    function move() {
        var key = currentlyPressedKey;
        //87 - w , 83 -s, 65 -a, 68 - d
        switch (key) {
            case 87:
                var new_x = pos_player_x - 1;
                var new_y = pos_player_y - 0;
                break;
            case 83:
                var new_x = pos_player_x + 1;
                var new_y = pos_player_y - 0;
                break;
            case 65:
                var new_x = pos_player_x - 0;
                var new_y = pos_player_y - 1;
                break;
            case 68:
                var new_x = pos_player_x - 0;
                var new_y = pos_player_y + 1;
                break;
        }
        var new_pos = document.getElementById(new_x + '_' + new_y)
        var old_pos = document.getElementById(pos_player_x + '_' + pos_player_y)
        if (new_pos != null) {
            new_pos.className = 'gracz';
            old_pos.className = 'clean';
            pos_player_y = new_y;
            pos_player_x = new_x;
        }
    }

关于javascript - 对象的移动，不受任何操作系统的干扰？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36515528/

文章推荐： php - 使用 php 为 imagick 设置密度参数

文章推荐： html - 弹出框在 overflow hidden 的 div 内不可见

JavaScript 干扰
这是我的 + 部分: function insert(){ var linkElement = document.getElementById("BackButton"); var linkEl
Arduino+多个超声波传感器+干扰
我有两辆 buggy 在轨道上移动，它们都使用超声波测量模块来检测路径中的障碍物，并由 Arduino 微 Controller 控制。两个超声波传感器以相同的频率工作，并且这个频率不能改变。两个超声
Python -\n 干扰
希望能快速解决这个问题。我有一个用文件位置替换特定值的脚本。不幸的是，该位置似乎经常包含\n 或 n\(因为当前目录位于临时文件夹中)，导致该行中断或从该行中完全删除自身，从而使文件夹位置无效。临时
PYTHONPATH 干扰 virtualenv
我使用的是 Mac OSX 10.10.1。我通常使用brew或pip来安装所有东西。我注意到我的 virtualenv 总是抓取我本地安装的所有 Python 包。我通过删除我的 $PYTHONPA
php - str_replace 干扰
我正在尝试使用 str_replace 将两个字母的语言缩写转换为完整的单词。我遇到的问题是它们在回显时会相互影响。 $lang = str_replace("en", "English", $lan
正在进行的通话中的 Android 干扰
我已经创建了用于结束通话的 aidl 文件 ITelephony.aidl。现在，在通话结束之前，我需要生成正在进行的通话中的语音，以便听众认为接下来的工作有问题。我尝试通过三种方式自己解决这个问题:
sql - SUM 干扰 COUNT
使用这个查询，我得到了我需要的每个客户下的订单数量的结果。但是，当我在 SELECT 字段中使用 SUM(OrderLine.ActualPrice) 并使用内部联接将 Order 表链接到包含价格的
java - @RolesAllowed 干扰@RequestMapping
在 Spring Boot 应用程序中，仅使用注释，我想实现安全性我已将 @EnableGlobalMethodSecurity(jsr360Enabled=true) 添加到配置类。该类还有一个
c - pthread_sigmask 干扰 GDB
我一直在 Linux 下开发一个多线程程序，对信号处理有特殊要求。例如，我需要程序打印单个 Ctrl-C 输入的统计信息。我使用 pthread_sigmask 和 sigwait 实现了这一点，即
scala - 干扰 Scala 动态特征的方法解析的字段？
作为我第一次涉足 Dynamic Scala 领域，我想我会尝试通过 applyDynamic 访问 bean 属性。我的第一个非常粗略的剪裁是 trait BeanProperties ext
javascript - Turbolinks 干扰 javascript
我知道这是一个令人沮丧的话题，但我尝试遵循文档和其他类似的帖子。我的问题是，除非重新加载页面，否则 JS 将无法工作。我有以下 JS: $(function() { $('a.form-sho
Javascript Alert 干扰 Ajax
我正在使用 JQuery Ajax 从服务器获取脚本。 $.ajax({ url: src, type: "GET", dataType: "script", time
javascript - 干扰 .innerHTML 输出触发器
我正在尝试根据每个产品的选定数量分别输出计算价格。我尝试复制代码并重命名所有变量，但输出是由各种增加/减少按钮触发的。这是目前的代码: $(".incr-btn_mobile").on("click
javascript - Greasemonkey Jquery 干扰？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: jQuery in Greasemonkey 1.0 conflicts with websites usi
ios - UISwipeGestureRecognizer 干扰 slider
我在一个 iOS 应用程序 (Obj-C) 中有一个 View ，它在中心有一个 ImageView ，紧接着在其下方有一个 slider 。 ImageView 显示专辑封面， slider 可用于
iphone - UITapGestureRecognizer 干扰 UIPinchGestureRecognizer
我有一个 View Controller ，将 UITapGestureRecognizer 附加到它的主 UIView，并使用户能够点击屏幕以使状态、导航和工具栏重新出现/消失(如照片应用程序)。我
java - log4j 干扰 - 级别一直设置为 "OFF"
我正在尝试在我的应用程序中设置 log4j，但我的一个第三方 JAR 似乎以某种方式不断将我的日志级别设置为“关闭”。它仅在执行该库中的代码时发生。我不知道它是如何做到这一点的，因为我没有使用它知道名
ios - interactivePopGestureRecognizer 干扰 UIScrollView
我有一个 UIScrollView，其框架与包含的 View Controller 相同。当 ScrollView 的缩放比例大于 1 时，从屏幕左侧 50% 开始从左向右滑动会导致 interac
css - 干扰 CSS 的脚本标签
我是网页设计的新手，最近接触了 Bootstrap。我最近也开始使用 Codepen。在 Codepen 中完成一个元素后，我将代码从那里复制并粘贴到 Sublime 中，无论出于何种原因，它更改了我
jQuery 干扰 CSS 背景图片位置？
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 对象的移动，不受任何操作系统的干扰？