javascript - 在 JavaScript 中按单箭头键连续移动

Question

我正在为我的网络技术类(class)作业设计一个类似吃 bean 人的游戏，但如果似乎无法弄清楚如何通过按特定方向的单个箭头来保持吃 bean 人移动，并且当按下另一个箭头键时移动pacman不断朝那个方向？在我看来 setInterval 必须用于此目的，但我不知道它是如何工作的......请帮助。我使用如下开关盒进行运动:

  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

不要从键盘事件调用移动函数。

使用 key up 和 key down 事件来记录按键事件

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

然后在主游戏循环中，只需检查按键是否移动，并在按键按下时执行需要按下的操作。

//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
    }
}

主循环和键盘处理程序示例

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