Racing Game Controller with JavaScript

Question

I'm trying to build a Web App( WIFI Car Controller ) and I can control the car with following javascripts:

 //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
    }
    });

I'm just trying to make it like Racing Game Controllers
I'm a JavaScript beginner and I have tried many ways. Can you please help me..
How to detect if multiple keys are pressed at once using JavaScript?

score 0 · Answer 1 · answered Mar 19 '21 at 23:33

0

You're checking for only one of the two values in your if statements. You need to change event.keyCode===38 && 39 to event.keyCode===38 && event.keyCode===39 and event.keyCode===38 && 37 to event.keyCode===38 && event.keyCode===37

answered Mar 19 '21 at 23:33

StelKizi

90
1
11

I tried it not working for me. I think this is the solution https://stackoverflow.com/questions/5203407/how-to-detect-if-multiple-keys-are-pressed-at-once-using-javascript Will you make it a little easier for me? – Shahriar Shafin Mar 19 '21 at 23:39

score 0 · Accepted Answer · answered Apr 14 '21 at 11:27

Found a solution.

<!-- 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>

Racing Game Controller with JavaScript

2 Answers2