Javascript 努力实现游戏状态

在我解释我的问题之前，请让我知道我是否在任何时候开始胡扯，因为我不想浪费太多的时间

作为一个大学项目的继续，我正在尝试制作一个WarioWare风格的游戏，游戏每N帧就改变一次。这是我到目前为止得到的

//画布
让画布；
//图形上下文
让ctx；
//董事会的规模
让boardSize=20；
设细胞大小=30；
设frame=0；
//游戏状态
var GameState=“Snake”；
//玩家是否还活着
让活着=真实；
//苹果对象
让苹果={}；
//记分器
var计数器=0；
//蛇的叫声
让蛇={
方向X:0，
方向：-1，
分段列表：[
[10, 10]
]
}
//安排比赛
window.onload=（）=>{
//打印到控制台apon成功加载
log（“已成功加载脚本！”）；
//设置画布参数
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（'2d'）；
document.addEventListener（'keydown'，keyhandler）
ctx.font='30px Verdana'；
ctx.fillStyle='#000'；
//检查游戏的初始状态
如果（游戏状态=“蛇”）{
appleMove（）；
}
draw（）；
//启动计时器，该计时器将每10000密耳秒调用ChangeGame函数（微调打开
//我们希望玩家玩每个游戏的时间为多少毫秒，直到需要更改为止）
设置间隔（ChangeGame，10000）
}
//更改当前正在调用的游戏
ChangeGame=（）=>{
GameState=“Misselecommand”；
}
常量绘图=（）=>{
frame++；
如果（帧>8）{
帧=0
如果（游戏状态=“蛇”）{
updateSnake（）；
}
//如果（GameState=“MissileCommand”）
//{
//updateMissileCommand（）；
//}
}
//清屏
ctx.fillStyle='#d5e6ee'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//根据gmae状态绘制相关元素
如果（游戏状态=“蛇”）{
//画苹果
ctx.fillStyle='#000'；
ctx.fillRect（苹果.x*手机号，苹果.y*手机号，手机号，手机号）；
//画蛇
drawSnake（）；
}
如果（游戏状态==“任务命令”）{
牵引砂浆（）；
}
//抽签计分器
ctx.fillText（计数器，50，50）
如果（！活着）{
ctx.fillText（“游戏结束”，200250）
}
请求动画帧（绘制）；
}
keyhandler=（e）=>{
如果（游戏状态=“蛇”）{
开关（电子钥匙）{
案例“w”：
snake.directionX=0；
snake.directionY=-1；
打破
案例“s”：
snake.directionX=0；
snake.directionY=1；
打破
案例“a”：
snake.directionX=-1；
snake.directionY=0；
打破
案例“d”：
snake.directionX=1；
snake.directionY=0；
打破
违约：
打破
}
}
}
updateSnake=（）=>{
如果（！活着）{
返回
}
//更新snake
设x=snake.segmentList[0][0]+=snake.directionX；
设y=snake.segmentList[0][1]+=snake.directionY；
for（设i=1；iboardSize-1 | | y<0 | | y>boardSize-1）{
活着=假；
设x=snake.segmentList[0][0]-=snake.directionX；
设y=snake.segmentList[0][1]-=snake.directionY；
}
如果（x==apple.x&&y==apple.y）{
snake.segmentList.push（[apple.x，apple.y]）；
appleMove（）；
计数器++；
控制台日志（计数器）；
}
}
drawSnake=（）=>{
//画蛇
ctx.fillStyle='#00000'
for（让snake的segment.segmentList）
ctx.fillRect（分段[0]*单元大小，
分段[1]*单元大小，
手机号，手机号）
}
常量appleMove=（）=>{
apple.x=Math.floor（Math.random（）*boardSize）；
apple.y=Math.floor（Math.random（）*boardSize）；
}
//updateMissileCommand=（）=>
//{
//如果（！alive）{return}
//}
//在飞弹命令中抽取玩家的摩塔枪管
DrawMortart=（）=>{
ctx.fillStyle='#00000'
ctx.fillRect（100,100,20,50）；
}

控制

使用WASD执行与移动相关的任何操作，并在导弹指挥过程中（待定）进行射击。

这可能会给你一些想法，也可能不会给你一些想法。如果无用，可全额退款：D

“严格使用”；
window.addEventListener（'load'，onload，false）；
设frameNum=0；
var-ctx；
功能已加载（evt）
{
ctx=document.querySelector（'canvas'）.getContext（'2d'）；
安乃近（）；
}
函数onAnimate（）
{
clearRect（0,0，ctx.canvas.width，ctx.canvas.height）；
drawTimerBall（frameNum）；
drawGameFrame（frameNum）；
frameNum++；
window.requestAnimationFrame（onAnimate）；
}
函数drawGameFrame（frameNum）
{
让度=（frameNum%360.0）；
var-outputStr；
//您可以调用不同的函数，而不是打印消息
//在此处，为每个帧执行单帧绘制和关键点检查
//游戏风格。
如果（度<90度）
outputStr='A'；
否则，如果（度<180度）
outputStr='b'；
否则，如果（度<270）
outputStr='3'；
其他的
outputStr='最终'；
document.getElementById（'gameNumOut'）。textContent=outputStr；
}
//绘制一个围绕某个点旋转的球
//每个帧将球旋转1度
函数drawTimerBall（frameNum）
{
设pathRadius=20；
设裕度=20；
设centerX=ctx.canvas.width-margin-pathRadius；
设centerY=边距+路径半径；
让度=（frameNum%360.0）；
设rad=degrees*Math.PI/180.0；
设dx=Math.cos（rad）*路径半径；
设dy=Math.sin（rad）*路径半径；
ctx.beginPath（）；
ctx.arc（dx+centerX，dy+centerY，4,0,2*Math.PI）；
ctx.fill（）；
ctx.closePath（）；
}

画布
{
边框：实心1px红色；
}