How do I fix my movement error in this Javascript program so it doesn't break when I press two keys at the same time?
Question
I am coding a box that moves with arrow keys. I want to program it so when I press a key on my keyboard, the intervals detect the key pressed and puts the number value into an array called KeyDown. The function keyPressed detects if the keyCode is already in the keyArray as to not call it again, and have the box zoom across the screen, but rather at a consistent pace. If the keyPressed function does not find a duplicate, then it adds it to the array to be run by intervals and moveMover to move the box. Afterwards, when the pressed key is lifted, that specific instance is spliced out from the whole array.
The programs works find when I press my left and arrow key. However when I press two keys at the same time, the program can't splice both keys and as a result, one is left running. The box then continually moves to the left or right. I've tried to use logic to try to find a solution, but I don't understand.
This is the box moving program in all html, with css tags and style ones.
function getTheStyle(id, styleProperty) { var elem = document.getElementById(id); var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue(styleProperty); return theCSSprop; } function keyPressed(e, keyArray) { //check if keyCode is already in the keyArray for (i = 0; i < keyArray.length; i++) { if (keyArray[i] == e.keyCode) { return; } } keyArray.push(e.keyCode); } function keyLifted(e, keyArray) { //check for every instance of the keyCode and splice it out, theory one instance, go through key array and make sure there isnt a copy anywhere for (i = 0; i < keyArray.length; i++) { if (keyArray[i] == e.keyCode) { keyArray.splice(i - 1, 1); console.log(keyArray); } } } function moveMover(mover, keyArray) { //loop through key array, if number 39, if finds left key getting pressed, then add 2 for (var i = 0; i < keyArray.length; i++) { if (keyArray[i] == 39) { //left mover.style.left = parseInt(getTheStyle(mover.id, "left")) + 2 + "px"; console.log(keyArray); } else if (keyArray[i] == 37) { //right mover.style.left = parseInt(getTheStyle(mover.id, "left")) - 2 + "px"; console.log(keyArray); } } } //-----------MAIN PROGRAM ---------------------- var MoverTimer; //timer for user controled element var mover; //inner moving element var keysDown = []; //all the currently depressed keys window.onload = function() { mover = document.getElementById("mover"); MoverTimer = setInterval(function() { moveMover(mover, keysDown); }, 5); }
body { background-color: skyblue; } #mover { position: absolute; top: 100px; left: 130px; z-index: 2; background-color: green; width: 50px; height: 50px; border: 2px solid black; }
<html> <head> <title>Two Movers</title> </head> <body onkeydown="keyPressed(event,keysDown)" onkeyup="keyLifted(event,keysDown)"> <div id="mover"></div> </body>
1 answers
solution1
1 ACCPTED 2020-11-21 06:01:35
You have a bug in keyLifted . It should be splicing on i , not i - 1 :
function keyLifted(e, keyArray) {
//check for every instance of the keyCode and splice it out, theory one instance, go through key array and make sure there isnt a copy anywhere
for (i = 0; i < keyArray.length; i++) {
if (keyArray[i] == e.keyCode) {
keyArray.splice(i, 1);
console.log(keyArray);
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.