shahriarshafin/JavaScript-Game-Controller.html

## JavaScript-Game-Controller.html
<!-- https://github.com/ShahriarShafin -->
<!-- https://jsfiddle.net/HwR9N/3/  -->

<!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>
	<!-- https://github.com/ShahriarShafin -->
	<!-- https://jsfiddle.net/HwR9N/3/ -->

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