物体的移动，而不受任何操作系统的干扰

movement of the object, without interference from the any operation system?

本文关键字：任何操作系统干扰移动更新时间：2024-03-19

有一个测试代码适合您：

<!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"，我们的玩家将沿着这个方向。但是，在第一秒钟，他移动了一次，之后他们会重复，直到他到达其中一堵墙。

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

这是我的第一篇文章，很抱歉出现错误。

当前您的移动与接收到的按键数有关。这不仅是因为你感知到的操作系统问题（即它多久会开始发送重复的按键），还因为如果有人按下按键的速度比按下按钮的基本重复速度更快（"垃圾邮件"），它会允许更快的移动。

相反，你的游戏应该有一个内部的"刻度"，它可以量化移动。当按键被按下和释放时，你会将这些变化传播到一个内部变量，每次你的游戏决定是时候移动时，都会根据这个变量的当前状态进行移动。这意味着，无论有人是按住密钥还是发送垃圾邮件，无论操作系统发送重复信号的速度如何，区块都会以游戏允许的速度移动。

编辑：这是您的代码的调整版本。请注意新引入的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;
        }
    }