我的javascript没有'；当我重新加载页面时，它崩溃了

这是我的代码，当运行时，屏幕中央不是一个包含我的游戏的黑匣子，而是一个空白，似乎没有任何网站可以告诉我哪里出了问题：

console.log（“启动”）
//全局函数
var canvas=document.getElementById（“canva”）；
var canvasCon；
var snakeX=400；
var-snakeY=300；
var方向；
var蛇速=1；
var苹果=假；
var-appleX；
瓦阿普利
var-snakeSize=30；
var scoreboard=document.getElementById（“分数”）；
var得分=0；
var trailX=新数组（）；
var trailY=新数组（）；
log（“设置全局变量！”）
window.onload=函数（）{
log（“在窗口加载函数时运行”）
canvasCon=canvas.getContext（'2d'）；
//每秒调用“绘图”和“移动”fps次
var fps=30
setInterval（函数（）{
移动（）
图纸（）
}，1000/帧）；
}
文件。addEventListener（'keydown'，getKey）；
函数getKey（事件）{
//获取键代码
方向=event.keyCode；
返回方向；
}
//移动对象
函数move（）{
//创建一种更易于阅读的方法来检查getKey的值
左var=37；
var-up=38；
var右=39；
var-down=40；
//改变蛇的位置
开关（方向）{
案例权利：
蛇X=蛇X+蛇速；
打破
案例左：
snakeX=snakeX-蛇速；
打破
个案：
蛇形=蛇形-蛇形速度；
打破
按大小写：
蛇形=蛇形+蛇形速度；
打破
}
trail（）
//检查snake是否已离开电路板，如果返回True，则将snake移动到电路板的另一端
如果（蛇>画布宽度）{
蛇x=0
}否则，如果（蛇<0）{
snakeX=canvas.width
}
如果（snakeY>canvas.height）{
snakeY=0
}否则如果（snakeY<0）{
snakeY=canvas.height
}
}
//绘制所有内容/w更新的坐标
函数图（）{
//比赛的后回合
canvasCon.fillStyle='黑色'；
canvasCon.fillRect（0,0，canvas.width，canvas.height）；
//蛇
canvasCon.fillStyle='绿色'；
canvasCon.fillRect（蛇形，蛇形，蛇形，蛇形）；
//苹果创意
苹果
canvasCon.fillStyle='红色'；
canvasCon.fillRect（appleX，appleY，25,25）；
}
//让苹果起作用
函数apples（）{
if（碰撞（））{
分数+=1
控制台日志（Score）
scoreboard.innerHTML=“分数：+Score+”
苹果=假
}
if（apple==false）{
苹果=真
appleX=Math.floor（Math.random（）*（canvas.width-50））；
appleY=Math.floor（Math.random（）*（canvas.height-50））；
}
}
函数冲突（）{
var distX=Math.abs（appleX-snakeX-snakeSize/2）；
var distY=Math.abs（appleY-snakeY snakeSize/2）；
如果（distX分数）{
var指数=trally.indexOf（0）；
连续拼接（索引1）；
}
if（trailY.length！=trailX.length）{
console.log（“trailY！=trailX”）
}
对于JS的第一条规则（i=trailX.length-1；i），如果它被卡住了，您可能会有一个无止境的循环

事实上，你的期末考试有一个无休止的循环：

for(i= trailX.length-1; i<=0; i--){
        canvasCon.fillStyle = 'yellow';
        canvasCon.fillRect(trailX[i],trailY[i],25,25);
    }

for（i=trailX.length-1；i）您是否使用了调试器来精确跟踪它崩溃的位置？很可能是一个无限循环，这些是导致页面崩溃/冻结的经典罪魁祸首我不知道这是否是问题的原因，但您不应该使用
setInterval
来编写动画。现代浏览器都有这样的功能