Javascript 在一个案例中，一种更简洁的方法在按键上循环一个函数？

我想要完成什么？

我试图让喇叭头继续移动，直到按下另一个键将其移动到不同的方向，就像在游戏中的蛇一样。我能想到的唯一一件事是，制作一堆案例，每个案例中都有充满案例的函数？欢迎任何想法并提供所需帮助，这是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);
}

var宽度=1000，高度=1000//帆布的宽度和高度
var cvs=document.getElementById（'Snake'）//cvs代表画布
var ctx=cvs.getContext（'2d'）//ctx是用二维表示的上下文。
cvs.width=window.innerWidth//将画布宽度设置为上面的宽度。
cvs.height=window.innerHeight//将画布高度设置为上方的高度。
var img=新图像（）；
img.src='snakeHead.png'；
var TrumpHead=画布图像（100100，img）；
window.addEventListener（'keydown'，this.checkOn，false）；
//window.addEventListener（'keyUp'，this.checkOff，false）；
功能画布图像（x、y、img）{
this.image=img；
这个.x=x；
这个。y=y；
this.width=img.width；
此高度=img高度；
归还这个；
}
功能检查（e）{
//var pos=getTrumpPos（）；
//var x=位置[0]；
//变量y=位置[1]；
//警报（如钥匙代码）；
开关（e.keyCode）{
案例37://左
if（TrumpHead.x==cvs.width）{//这只是提醒您如果
你离开了画布
警惕（“你输了”）；
}else if（TrumpHead.x<0）{
警惕（“你输了”）；
}否则{
左方向（）；
控制台日志（“按下左键”）；
控制台日志（x，y）；
}
打破
案例38://向上键
if（trunghead.y<0）{
警惕（“你输了”）；
}否则如果（TrumpHead.y>CV.height）{
警惕（“你输了”）；
}否则{
控制台日志（“按下”）；
向上（）；
控制台日志（x，y）；
}
打破
案例39://对
如果（TrumpHead.x>CV.width）{
警惕（“你输了”）；
}else if（TrumpHead.x<0）{
警惕（“你输了”）；
}否则{
console.log（“按下右键”）；
控制台日志（x，y）；
右方向（）；
}
打破
案例40://向下
if（trunghead.y<0）{
警惕（“你输了”）；
}否则如果（TrumpHead.y>CV.height）{
警惕（“你输了”）；
}否则{
控制台日志（“按下”）；
控制台日志（x，y）；
DownDirection（）；//这是在movementFunctions部分中定义的函数。
}
打破
//默认值：alert（e.keyCode）；//其他所有内容
}
}
函数gameLoop（）
{
//根据速度改变位置
checkOn（）；
setTimeout（“gameLoop（）”，10）；
}
函数LeftDirection（）
{
TrumpHead.x=TrumpHead.x-50；
ctx.clearRect（0,0，cvs.width，cvs.height）；//清除游戏屏幕
ctx.drawImage（trunghead.image，trunghead.x，trunghead.y，50,50）；
//让特朗普下台。
}
函数右方向（）
{
TrumpHead.x=TrumpHead.x+50；
ctx.clearRect（0,0，CV.宽度，CV.高度）；
ctx.drawImage（trunghead.image，trunghead.x，trunghead.y，50,50）；
}
函数向上（）
{
TrumpHead.y=TrumpHead.y-50；
ctx.clearRect（0,0，CV.宽度，CV.高度）；
ctx.drawImage（trunghead.image，trunghead.x，trunghead.y，50,50）；
}
函数向下（）{
TrumpHead.y=TrumpHead.y+50；
ctx.clearRect（0,0，CV.宽度，CV.高度）；
ctx.drawImage（trunghead.image，trunghead.x，trunghead.y，50,50）；
}

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

如果不这样做，则场景更新将取决于用户输入或vis-a-vis

---

祝你好运

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

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

---

尝试使用对象映射，切换大小写增加complexity@brk谢谢，有学习对象映射的好地方吗？我对这个很陌生。