Javascript 如何启动按键事件的蛇游戏？

我使用HTML5画布和JavaScript创建了一个简单的Snake游戏。我几乎完成了这个小项目，然而，我有一个问题我不能解决。加载时，snake的游戏会自动启动，通常会导致“游戏结束”，我希望玩家能够首先按下他们想要去的方向，然后开始游戏。我已经尝试了我能想到的所有可能的方法，主要是使用“keydown”或其他类似的事件侦听器。不管我把代码放在哪里，似乎都没用。有什么想法吗？非常感谢所有抽出时间帮助我的人，非常感谢。下面，我将为那些想要帮助的人留下项目的代码

蛇类游戏网站：

HTML/CSS：

window.onload=函数（）{
var cvs=document.getElementById（“画布”）；
var ctx=cvs.getContext（“2d”）；
var cvsW=cvs.width；
var cvsH=cvs高度；
var snakeW=20；
var snakeH=20；
分数=0；
var direction=“right”；
此.document.addEventListener（“keydown”，getDirection）；
功能方向（e）{
如果（e.keyCode==37&&direction！=“right”）{
方向=“左”；
}否则如果（e.keyCode==38&&direction！=“向下”）{
方向=“向上”；
}否则如果（e.keyCode==39&&direction！=“left”）{
direction=“right”；
}否则如果（e.keyCode==40&&direction！=“向上”）{
方向=“向下”；
}
}
函数drawSnake（x，y）{
ctx.fillStyle=“#507786”；
ctx.fillRect（x*蛇，y*蛇，蛇，蛇）；
ctx.fillStyle=“#507786”；
ctx.strokeRect（x*蛇，y*蛇，蛇，蛇）；
}
牵引蛇（4,5）；
var-len=4；
var-snake=[]；
对于（变量i=len-1；i>=0；i--）{
蛇推({
x:我，
y:0
});
}
食物={
x:Math.floor（Math.random（）*（cvsW/snakeW-1）+1），
y:Math.floor（Math.random（）*（cvsH/snakeH-1）+1）
}
功能性食品（x，y）{
ctx.fillStyle=“黑色”；
ctx.fillRect（x*蛇，y*蛇，蛇，蛇）；
ctx.fillStyle=“#507786”；
ctx.strokeRect（x*蛇，y*蛇，蛇，蛇）；
}
函数检查冲突（x、y、数组）{
对于（var i=0；i=cvsW/snakeW | |蛇>=cvsH/snakeH
||检查碰撞（蛇、蛇、蛇））{
snake=null；
document.getElementById（“gameover”）.innerHTML=“gameover”；
setInterval（函数（）{
location.reload（）；
}, 3000);
}
if（snakeX==food.x&&snakeY==food.y）{
食物={
x:Math.floor（Math.random（）*（cvsW/snakeW-1）+1），
y:Math.floor（Math.random（）*（cvsH/snakeH-1）+1）
}
var newHead={
x:snakeX，
y:斯纳基
};
分数+=1
document.getElementById（“gameScore”）.innerHTML=score；
}否则{
snake.pop（）；
var newHead={
x:snakeX，
y:斯纳基
};
}
蛇。未移位（新头）；
}
设置间隔（抽签，60）；
}

蛇类游戏
* {
填充：0px；
边际：0px；
}
#帆布{
背景色：#8BAC0F；
-网络工具包盒阴影：10px 10px 5px 0px rgba（0,0,0,0.75）；
-moz盒阴影：10px 10px 5px 0px rgba（0,0,0,0.75）；
盒子阴影：10px 10px 5px 0px rgba（0,0,0,0.75）；
}
#蛇类{
文本对齐：居中；
}
#蛇形石{
字体系列：“Sniglet”，草书；
字号：80px；
边缘顶端：40px；
边缘底部：20px；
}
#蛇类{
字体系列：“Sniglet”，草书；
字体大小：20px；
边缘底部：20px；
}
#游戏结束{
字体系列：“Sniglet”，草书；
字体大小：50px；
边缘底部：15px；
}
#页脚文本{
字体系列：“Sniglet”，草书；
字体大小：35px；
边缘顶部：25px；
}
Snake它会自动启动，因为您稍后会在代码下方调用
drawSnake（4，5）
，并且您已经将初始化方向设置为
“右”

您应该能够通过在初始化时将类似于
hasStarted
的变量赋值为false来解决此问题。然后在onKeydown处理程序中检查
hasStarted
是否为true或false。如果为false（游戏尚未开始），
hasStarted
设置为true，则应调用
setInterval（draw，60）

var hasStarted = false;
var direction = “”;
this.document.addEventListener("keydown", getDirection);

function getDirection(e) {
    if (!hasStarted) {
        hasStarted = true
        switch e.keyCode {
            case 37:
                direction = "left";
                break;
            case 38:
                direction = "up";
                break;
            case 39:
                direction = "right";
                break;
            case 40:
                direction = "down";
                break;
            default:
                direction = "right";
                break;
        }
        setInterval(draw, 60);
    } else {
        if (e.keyCode == 37 && direction != "right") {
            direction = "left";
        } else if (e.keyCode == 38 && direction != "down") {
            direction = "up";
        } else if (e.keyCode == 39 && direction != "left") {
            direction = "right";
        } else if (e.keyCode == 40 && direction != "up") {
            direction = "down";
        }
    }
}

编辑#1（马蒂亚斯的荣誉）：
您还必须删除最后一行代码中对setInterval的调用。
它会自动启动，因为您稍后会调用
drawSnake（4，5）
，并且您已经将初始化方向设置为
“right”

您应该能够通过在初始化时将类似于
hasStarted
的变量赋值为false来解决此问题。然后在onKeydown处理程序中检查
hasStarted
是否为true或false。如果我
...
    var direction = "";
...

...
    function draw() {
      if(direction != ""){
        ...
      }
    }
...

var direction = "start";

    var snakeX = snake[0].x;
    var snakeY = snake[0].y;

    if (direction == "start") 
    {
    snakeX =  snakeX*.0001;
    }