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