Last active
April 18, 2021 23:22
-
-
Save shahriarshafin/dd665f20ef976aaf594c388de242ec15 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment