一种更简洁的方法来循环按键上的功能？

Question

我想要完成什么？

我试图让 TrumpHead 继续移动，直到按下另一个键将其移动到不同的方向，就像在游戏中的蛇一样。我能想到的唯一一件事是制作一堆案例，每个案例中都充满了案例？欢迎任何想法和需要帮助，JavaScript 新手。

我的代码

var width = 1000, height = 1000; //Width and Height of Canvas
var cvs = document.getElementById('Snake'); //cvs is representing Canvas
var ctx = cvs.getContext('2d'); //ctx is context represented in 2 dimentions.

cvs.width = window.innerWidth; //setting the canvas width to be the width above.
cvs.height = window.innerHeight; //setting the canvas height to be the height above.

var img = new Image();
img.src = 'snakeHead.png';
var TrumpHead = canvasImage(100, 100, img);
window.addEventListener('keydown',this.checkOn,false);
//window.addEventListener('keyUp',this.checkOff,false);

function canvasImage(x, y, img) {
    this.image = img;
    this.x = x;
    this.y = y;
    this.width = img.width;
    this.height = img.height;
    return this;
}

function checkOn(e) {
    //var pos = getTrumpPos();
    //var x = pos [0];
    //var y = pos [1];
    //alert(e.keyCode);
    switch (e.keyCode) { 
        case 37://left

        if (TrumpHead.x == cvs.width) {  //this is just alerting you lose if 
            you go off the canvas
            alert("You Lose");
        } else if (TrumpHead.x < 0) {
            alert("You Lose");
        } else {
            LeftDirection ();
            console.log("Pressed Left");
            console.log(x,y);
        }
        break;

        case 38: //up key

        if (TrumpHead.y < 0) {
            alert("You Lose");
        } else if (TrumpHead.y > cvs.height) {
            alert("You Lose");
        } else {
            console.log("Pressed Up");
            UpDirection();
            console.log(x,y);
        }
        break;

        case 39: //right

        if (TrumpHead.x > cvs.width) {
            alert("You Lose");
        } else if (TrumpHead.x < 0) {
            alert("You Lose");
        } else{
            console.log("Pressed Right");
            console.log(x,y);
            RightDirection();
        }
        break;

        case 40: //down

        if (TrumpHead.y < 0) {
            alert("You Lose");
        } else if (TrumpHead.y > cvs.height) {
            alert("You Lose");
        } else{
            console.log("Pressed Down");
            console.log(x,y);
            DownDirection(); //this is a function defined in the movementFunctions section.
        }
        break;
        // default: alert(e.keyCode); //Everything else
    }
}

function gameLoop()
{
    // change position based on speed
    checkOn();
    setTimeout("gameLoop()",10);
}

function LeftDirection ()
{
    TrumpHead.x = TrumpHead.x - 50;
    ctx.clearRect(0,0,cvs.width,cvs.height); //clears the gamescreen
    ctx.drawImage(TrumpHead.image, TrumpHead.x, TrumpHead.y, 50, 50); 
    //Puts Trump down.
}
function RightDirection ()
{
    TrumpHead.x = TrumpHead.x + 50;
    ctx.clearRect(0,0,cvs.width,cvs.height);
    ctx.drawImage(TrumpHead.image, TrumpHead.x, TrumpHead.y, 50, 50);
}
function UpDirection () 
{
    TrumpHead.y = TrumpHead.y - 50;
    ctx.clearRect(0,0,cvs.width,cvs.height);
    ctx.drawImage(TrumpHead.image, TrumpHead.x, TrumpHead.y, 50, 50);
}

function DownDirection () {
    TrumpHead.y = TrumpHead.y + 50;
    ctx.clearRect(0,0,cvs.width,cvs.height);
    ctx.drawImage(TrumpHead.image, TrumpHead.x, TrumpHead.y, 50, 50);
}

Answer 1

您需要两个循环：一个用于输入，一个用于在显示器上实际绘图。您可以使用浏览器事件来检查键输入（此处使用向上和向左箭头键显示，并根据按下的键设置状态。然后您可以在更新循环中使用它。这是一个示例：

var movingLeft = false, movingUp = false;

document.body.onkeydown(function(e) { 
   switch(e.keyCode) { 
      case 38: 
          movingUp = true;
          movingLeft = false;
          break;
      case 37: 
          movingLeft = true;
          movingUp = false;
          break;
   }
});

// and a loop:

function loop() {
  if (movingLeft) {
    updateDisplayByLeftIncrement(); //update display how you want
  else if(movingUp) {
     updateDisplayByUpIncrement(); //update display how you want
  } //...and so on for all the movements
}

//and then you can use setInterval() to loop with a delay between iterations
setInterval(loop, timeOut);

Answer 2

您需要将程序执行分成至少两个循环/泵。
1）一个输入循环， 2) 更新循环

如果您不这样做，那么您的场景更新将取决于您的用户输入或相对。

祝你好运！