caitan correia caitan correia - 4 years ago 123
Javascript Question

Continuous movement with single arrow key press in JavaScript

I'am designing a pacman like game for my webtech course assignment,but if can't seem to figure out how to keep the pacman moving with a single arrow press in a particular direction and when another arrow key is pressed move the pacman in that direction continuously??
It seems to me setInterval has to be used for this purpose but I don't know how would that work...please help.
I'am using switch case as follows for the movement:

switch (event.keyCode) {
case 37:

inter=setInterval(leftArrowPressed(),50); //Move Left function call
break;
case 39:
inter=setInterval(rightArrowPressed(),50); //Move Right function call
break;
case 38:
inter=setInterval(upArrowPressed(),50); //Move Up function call
break;
case 40:
inter=setInterval(ownArrowPressed(),50); //Move Down function call
break;
default:
alert("Invalid Key pressed");
break;
}


}

function leftArrowPressed() //Left Arrow
{
document.getElementById("player").style.transform="rotateY(180deg)";
var newleftA = leftA - 5;
var z = newleftA / d;
m = Math.floor(z);

if(parseInt(document.getElementById("player").style.left)<=0)
{
document.getElementById("player").style.left= 555 +'px';
document.getElementById("player").style.top= 180 +'px';
document.getElementById("player").width.width= 614 +'px';
document.getElementById("player").style.height= 239 +'px';
}
if ((a[divTop][m]) == 1 || (a[divBottom][m] == 1)) {
/*alert("Hit obstacle");*/
;

} else {
document.getElementById("player").style.left = newleftA + 'px';
/*cell.style.backgroundImage="";*/
}


}

function upArrowPressed() //Up Arrow
{
document.getElementById("player").style.transform = "rotate(270deg)";
var newtopA = topA - 5;
var z = newtopA / d;
m = Math.floor(z);

if ((a[m][divLeft] == 1) || (a[m][divRight] == 1)) {
/*alert("Hit obstacle");*/
;

} else {
document.getElementById("player").style.top = newtopA + 'px';
}


}

function rightArrowPressed() //Right Arrow
{
document.getElementById("player").style.transform = "rotate(0deg)";
var newrightA = rightA + 5;
var z = newrightA / d;
m = Math.floor(z);

if(parseInt(document.getElementById("player").style.left)>=545)
{
document.getElementById("player").style.left= 0 +'px';
document.getElementById("player").style.top= 180 +'px';
document.getElementById("player").width.width= 54 +'px';
document.getElementById("player").style.height= 239 +'px';
}
if ((a[divTop][m] == 1) || (a[divBottom][m] == 1)) {
/* alert("Hit obstacle");*/

} else {
document.getElementById("player").style.left = parseInt(document.getElementById("player").style.left) + 5 + 'px';
}


}

function downArrowPressed() // Down Arrow
{
document.getElementById("player").style.transform = "rotate(90deg)";
var newbottomA = bottomA + 5;
var z = newbottomA / d;
m = Math.floor(z);
if ((a[m][divLeft] == 1) || (a[m][divRight] == 1)) {
/* alert("Hit obstacle");*/

} else {
document.getElementById("player").style.top = parseInt(document.getElementById("player").style.top) + 5 + 'px';
}


}

Answer Source

One way to approach this would be to :

  • have the state stored somewhere that records which arrow buttons has been pressed

  • update the position of PacMan depending on state

Store state change:

var direction = 'right';  // this is declared outside the function that alters it

window.addEventListener("keyup", changeState(event));

function changeState(event){
  switch (event.key) {
    case 37:
        direction = 'left';
        break;
    case 39:
        direction = 'right';
        break;
    case 38:
        direction = 'up';
        break;
    case 40:
        direction = 'down';
        break;
    default:
        alert("Invalid Key pressed");
        break;
  }
}

You can then have a function called by an interval that checks this stored button press value and then invokes the appropriate function to move your PacMan character:

var intervalUpdateState = setInterval(movePacMan, 200);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download