Canvas 画布迷宫游戏平滑动画

我正在建立一个基于教程的迷宫游戏。我成功地让玩家矩形继续移动，只要你按住箭头键。当您第一次开始游戏时，动画非常漂亮且快速，但在玩游戏几秒钟后，动画似乎变得越来越慢。有人能帮我弄清楚为什么会这样吗

我已经创建了一个代码片段，但不幸的是，它不能正常工作，因为我使用的迷宫图像导致了一个跨原点错误

var画布；
var-ctx；
var-dx=2；
var-dy=2；
var宽度=482；
var高度=482；
//运动
var x=200，
y=5，
staticX=200，//这应该与x相同（用于重置游戏）
staticY=5，//这应该与y相同（用于重置游戏）
键=[]；
var img=新图像（）；
var冲突=0；
var showingscreen=false；
var-playerSize=15；
var startTime=null，
lastTime=null，
endTime，//用于缩放
isRunning=false，
FPS=1000/60；//理想帧速率
函数rect（x，y，w，h）{
ctx.beginPath（）；
ctx.rect（x，y，w，h）；
ctx.closePath（）；
ctx.fill（）；
}
函数clear（）{
ctx.clearRect（0，0，宽度，高度）；
}
函数drawMaze（）{
ctx.drawImage（img，0,0）；
}
函数drawPlayer（）{
doKeyDown（）；
ctx.fillStyle=“紫色”；
rect（x，y，15,15）；
}
函数绘图（）{
清除（）；
如果（显示WinScreen）{
isRunning=false；
drawRect（0,0，canvas.width，canvas.height，“黑色”）；
ctx.fillStyle=“白色”；
ctx.font=“20px Arial”；
ctx.fillText（“你赢了！再次点击播放”，70，canvas.height/2）；
ctx.fillText（“经过的时间：”+endTime，70，canvas.height*0.6）；
返回；
}
isRunning=true；
drawMaze（）；
drawPlayer（）；
请求动画帧（循环）；
}
函数drawRect（leftX、topY、宽度、高度、drawColor）{
ctx.fillStyle=drawColor；
ctx.fillRect（leftX、topY、宽度、高度）；
}
//计时器
函数循环（时间戳）{
如果（！开始时间）{
开始时间=时间戳；
}
var timeDiff=lastTime？timeStamp-lastTime:FPS，
时间流逝=时间戳-开始时间，
timeScale=timeDiff/FPS；//调整帧速率的变化
lastTime=时间戳；
var totalTime=TimePassed*0.001；
var分钟=数学楼层（总时间/60）；
var秒=总时间%60；
drawRect（宽度，10,70,30，“黑色”）；
ctx.fillStyle=“白色”；
ctx.font=“14px Arial”；
ctx.fillText（分钟+”：“+（秒）.toFixed（2），宽度*1.04,30）；
endTime=minutes+“：”+（秒）.toFixed（0）；
如果（正在运行）请求动画帧（循环）；
}
函数init（）{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
img.src=”https://html5.litten.com/images/maze.gif";
var framesPerSecond=60；
返回setInterval（函数（）{
draw（）；
}，1000/帧每秒）；
}
函数checkcollision（）{
var imgd=ctx.getImageData（x，y，playerSize，playerSize）；
var pix=imgd.data；
对于（变量i=0；n=pix.length，iG:'+G+'
B:'+B）；
isRunning=false；
showingscreen=true；
}
}
}
函数handleMouseClick（事件）{
如果（显示WinScreen）{
showingscreen=false；
x=静态x；
y=静态；
draw（）；
}
}
//箭头键
函数doKeyDown（）{
//左
如果（键[37]）{
如果（x-dx>0）{
x-=dx；
检查碰撞（）；
checkWin（）；
如果（碰撞==1）{
x+=dx；
碰撞=0；
}
}
}
//对
如果（键[39]）{
if（x+dx<宽度）{
x+=dx；
检查碰撞（）；
checkWin（）；
如果（碰撞==1）{
x-=dx；
碰撞=0；
}
}
}
//向下
如果（键[40]）{
如果（y+dy<高度）{
y+=dy；
检查碰撞（）；
checkWin（）；
如果（碰撞==1）{
y-=dy；
碰撞=0；
}
}
}
//向上
如果（键[38]）{
如果（y-dy>0）{
y-=dy；
检查碰撞（）；
checkWin（）；
如果（碰撞==1）{
y+=dy；
碰撞=0；
}
}
}
}
init（）；
window.addEventListener（“向下键”，函数（e）{
键[e.keyCode]=真；
});
window.addEventListener（“键控”，函数（e）{
密钥[e.keyCode]=假；
});
canvas.addEventListener（“鼠标向下”，鼠标点击）；
（功能（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
})（）

如果您的浏览器不支持HTML5画布，则会显示此文本。

这里最大的问题是什么？
你的计时器

让我们删除与画布相关的所有内容，然后尝试记录每帧绘制此小时间计数器的次数：

//如果一切正常，帧计数不应大于1
变量帧计数=0；
var总计数=0；
函数框架_循环（）{
frame_log.textContent=frame_计数；
total_log.textContent=总计数；
//重置帧计数器
帧计数=0；
//下一个循环再做一次
requestAnimationFrame（frame_循环）；
}
帧_循环（）；
var startTime=null，
lastTime=null，
endTime，//用于缩放
isRunning=false，
FPS=1000/60；//理想帧速率
函数绘图（）{
isRunning=true；
请求动画帧（循环）；
}
//计时器
函数循环（时间戳）{
帧计数++；
总计数++；
如果（！开始时间）{
开始时间=时间戳；
}
var timeDiff=lastTime？timeStamp-lastTime:FPS，
时间流逝