JavaScript 赛车游戏控制器

Question

我正在尝试构建一个 Web 应用程序（WIFI Car Controller），我可以使用以下 javascript 控制汽车：

 //keyDown
 window.addEventListener('keydown',function(event){
       if(event.keyCode===38) { //ArrowUp
          carForward();
         }

       if(event.keyCode===40) { //ArrowDown
          carBackword();
         }

       if(event.keyCode===38 && 39) { //ArrowUp and ArrowRight
        carRight();   //not working
        }

       if(event.keyCode===38 && 37) { //ArrowUp and ArrowLeft
        carleft();    //not working
        }
        });

//keyUp
window.addEventListener('keydown',function(event){
   if(event.keyCode===38) { //ArrowUp
      stop();
     }

   if(event.keyCode===40) { //ArrowDown
     stop();
     }

   if(event.keyCode===38 && 39) { //ArrowUp and ArrowRight
     stop();    //not working
    }

   if(event.keyCode===38 && 37) { //ArrowUp and ArrowLeft
     stop();    //not working
    }
    });

我只是想让它像 赛车游戏控制器
我是 JavaScript 初学者，我尝试了很多方法。 你能帮帮我吗..
How to detect if multiple keys are pressed at once using JavaScript?

Answer 1

您只检查 if 语句中的两个值之一。您需要将 event.keyCode===38 && 39 更改为 event.keyCode===38 && event.keyCode===39 并将 event.keyCode===38 && 37 更改为 event.keyCode===38 && event.keyCode===37

Answer 2

找到解决方案。

<!-- https://github.com/ShahriarShafin -->
<!-- APRIL 7,2021  -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Multiple Keyup Keydown</title>
</head>

<body>

    <!-- view key command and actions -->
    <center>
        <h2 id="action">Action for command</h2>
        <h3 id="cmdMonitor">Key Command</h3>
    </center>

    <script>
        // ----------------------- START KEY LISTENER ------------------------------------ 
        var cmd, keys = [];
        window.addEventListener("keydown",
            function (e) {
                keys[e.keyCode] = e.keyCode;
                var keysArray = getNumberArray(keys);
                cmd = keysArray;
                controller();
            },
            false);

        window.addEventListener('keyup',
            function (e) {

                keys[e.keyCode] = false;
                cmd = "STOP" + getNumberArray(keys);
                controller();
            },
            false);

        function getNumberArray(arr) {
            var newArr = new Array();
            for (var i = 0; i < arr.length; i++) {
                if (typeof arr[i] == "number") {
                    newArr[newArr.length] = arr[i];
                }
            }
            return newArr;
        }
        // ----------------------- END KEY LISTENER ------------------------------------ 

        // ----------------------- START CONTROLLER ------------------------------------ 
        function controller() {
            // view in html
            document.getElementById("cmdMonitor").innerHTML = cmd;

            // getting cmd(to string) as command   
            const command = cmd.toString();

            // _____________FORWARD____________
            // --------ArrowUp / KeyW---------
            if (command == "38" || command == "STOP38" || command == "87" || command == "STOP87") {
                // your actions
                document.getElementById("action").innerHTML = "FORWARD";
            }
            // ____________BACKWARD____________
            // ------ArrowDown / KeyS---------
            if (command == "40" || command == "STOP40" || command == "83" || command == "STOP83") {
                // your actions
                document.getElementById("action").innerHTML = "BACKWARD";
            }
            // ___________WHEEL-LEFT___________
            // ------ArrowLeft / KeyA---------
            if (command == "37" || command == "STOP37" || command == "65" || command == "STOP65") {
                // your actions
                document.getElementById("action").innerHTML = "WHEEL-LEFT";
            }
            // ___________WHEEL-RIGHT__________
            // -----ArrowRight / KeyD---------
            if (command == "39" || command == "STOP39" || command == "68" || command == "STOP68") {
                // your actions
                document.getElementById("action").innerHTML = "WHEEL-RIGHT";
            }
            // ___________FORWARD-LEFT_________
            // --Arrow[Up + Left] / Key[W + A]--
            if (command == "37,38" || command == "65,87") {
                // your actions
                document.getElementById("action").innerHTML = "FORWARD-LEFT";
            }
            // ___________FORWARD-RIGHT________
            // --Arrow[Up + Right] / Key[W + D]--
            if (command == "38,39" || command == "68,87") {
                // your actions
                document.getElementById("action").innerHTML = "FORWARD-RIGHT";
            }
            // __________BACKWARD-LEFT_________
            // --Arrow[Down + Left] / Key[S + A]--
            if (command == "37,40" || command == "65,83") {
                // your actions
                document.getElementById("action").innerHTML = "BACKWARD-LEFT";
            }
            // __________BACKWARD-RIGHT________
            // --Arrow[Down + Right] / Key[S + D]--
            if (command == "39,40" || command == "68,83") {
                // your actions 
                document.getElementById("action").innerHTML = "BACKWARD-RIGHT";
            }
            // ______________STOP______________
            // -----------Any KewUP---------
            if (command == "STOP") {
                // your actions
                document.getElementById("action").innerHTML = "STOP";
            }
        }
        // ----------------------- END CONTROLLER ------------------------------------ 
    </script>
</body>

</html>

JavaScript 赛车游戏控制器

Racing Game Controller with JavaScript

javascript

keypress

keydown

keyboard-events

keyup