用JavaScript中的单箭头键连续移动

Question

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 1

Dont call the movement functions from the keyboard events.

Use the key up and key down events to just record the key events

const keys = {};
function keyEventHandler(event){
    keys[event.code] = event.type === "keydown";
    event.preventDefault();
}
window.addEventListener("keydown",keyEventHandler);
window.addEventListener("keyup",keyEventHandler);

Then in the main game loop just check for the keys to move and do what ever action needs down when they are down.

//call from Main loop once every frame
function doPlayerMove(){
    if(keys.ArrowLeft){
          // move left
    }
    if(keys.ArrowRight){
          // move right
    }
    if(keys.ArrowDown){
          // move down
    }
    if(keys.ArrowUp){
          // move up
    }
}

Example of a main loop and keyboard handler

 var createImage=function(w,h){var i=document.createElement("canvas");i.width=w;i.height=h;i.ctx=i.getContext("2d");return i;} var canvas = createImage(512,200); var ctx = canvas.ctx; document.body.appendChild(canvas); var player = { controls : { up : "ArrowUp", left : "ArrowLeft", right : "ArrowRight", down : "ArrowDown", }, x : 100, y : 100, dx : 0, dy : 0, dir : 0, doMove(){ var k = this.controls; this.dy = 0; this.dx = 0; if(keys[k.up]){ this.dy = -2; this.dir = Math.PI * 1.5; } if(keys[k.down]){ this.dy = 2; this.dir = Math.PI * 0.5; } if(keys[k.left]){ this.dx = -2; this.dir = Math.PI * 1; } if(keys[k.right]){ this.dx = 2; this.dir = Math.PI * 0; } this.x = (this.x + canvas.width + this.dx) % canvas.width; this.y = (this.y + canvas.height + this.dy) % canvas.height; }, draw(){ var open = Math.abs(Math.sin(globalTime/200)); ctx.fillStyle = "yellow"; var x,y; x = Math.cos(this.dir) * -6; y = Math.sin(this.dir) * -6; ctx.beginPath(); ctx.moveTo(this.x + x,this.y + y); // move back of mouth away from circle center ctx.arc(this.x,this.y,20,open + this.dir, this.dir + Math.PI * 2 - open); ctx.fill(); } } const keys = {}; function keyEventHandler(event){ keys[event.code] = event.type === "keydown"; keys.firstKeyPressed = true; event.preventDefault(); } document.addEventListener("keydown",keyEventHandler); document.addEventListener("keyup",keyEventHandler); canvas.addEventListener("click",function(){keys.focus = true;}); /** SimpleUpdate.js begin **/ // short cut vars var w = canvas.width; var h = canvas.height; var cw = w / 2; // center var ch = h / 2; var globalTime; ctx.font = "16px arial"; ctx.textAlign = "center"; // main update function function update(timer){ globalTime = timer; ctx.setTransform(1,0,0,1,0,0); // reset transform ctx.globalAlpha = 1; // reset alpha ctx.fillStyle = "black"; ctx.fillRect(0,0,w,h); if(!keys.focus){ ctx.fillStyle = "Yellow"; ctx.fillText("Click to get focus.",256,16); }else if(!keys.firstKeyPressed ){ ctx.fillStyle = "Yellow"; ctx.fillText("Use arrow keys to move.",256,16); } player.doMove(); player.draw(); requestAnimationFrame(update); } requestAnimationFrame(update); 

Answer 2

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);