在Javascript中为画布游戏添加运行时间

我有一个问题，集成一个简单的计时器到一个游戏，我试图建立一个练习练习。我曾尝试在internet上搜索此解决方案，但我对.js的基本知识使我无法解决此问题。有人能帮我解决这个问题吗

我的代码笔位于此处：

var c=document.createElement（“画布”）；
var ctx=c.getContext（“2d”）；
c、 宽度=720；
c、 高度=480；
文件.正文.附件（c）；
var perm=[]；
while（perm.length<255）{
而（perm.includes（val=Math.floor（Math.random（）*255））；
永久推力（val）；
}
var-lerp=（a，b，t）=>a+（b-a）*（1-Math.cos（t*Math.PI））/2；
var noise=x=>{
x=x*0.01%254；
返回lerp（perm[Math.floor（x）]，perm[Math.ceil（x）]，x-Math.floor（x））；
}
var Player=function（）{
此.x=c.宽度/2；
这个。y=0；
这个.ySpeed=0；
这是0.rot=0；
这个.rSpeed=0；
this.img=新图像（）；
this.img.src=“./images/moto.png”；
this.draw=函数（）{
var p1=c.高度-噪声（t+此.x）*0.25；
var p2=c.高度-噪声（t+5+this.x）*0.25；
无功接地=0；
如果（p1-12>this.y）{
这是0.y速度+=0.1；
}否则{
this.ySpeed-=this.y-（p1-12）；
y=p1-12；
接地=1；
}
变量角度=数学atan2（（p2-12）-this.y，（this.x+5）-this.x）；
this.y+=this.y速度；
如果（！playing | | grounded&&Math.abs（this.rot）>Math.PI*0.5）{
玩=假；
该速度=5；
k、 ArrowUp=1；
这个.x-=速度*5；
}
if（接地和播放（&P）{
this.rot-=（this.rot-角度）*0.65；
this.rSpeed=this.rSpeed-（角度-this.rot）；
}
此.rSpeed+=（k.箭头左-k.箭头右）*0.05；
this.rot-=this.rSpeed*0.1；
如果（this.rot>Math.PI）this.rot=-Math.PI；
如果（this.rot<-Math.PI）this.rot=Math.PI；
ctx.save（）；
ctx.translate（this.x，this.y-3）；
旋转（这个旋转）；
ctx.drawImage（this.img，-15，-15,60,30）；
ctx.restore（）；
}
}
var player=新玩家（）；
var t=0；
var速度=0；
var=true；
var k={ArrowUp:0，ArrowDown:0，ArrowLeft:0，ArrowRight:0}；
函数循环（）{
速度-=（速度-（k.箭头向上-k.箭头向下））*0.01；
t+=10*速度；
ctx.fillStyle=“#8D5BC2”；
ctx.fillRect（0,0，c.宽度，c.高度）；
ctx.fillStyle=“rgba（0,0,0,0.1）”；
ctx.beginPath（）；
ctx.移动到（0，c.高度）；
for（设i=0；ik[d.key]=1；
onkeyup=d=>k[d.key]=0；
函数重新启动（）{
player=新玩家（）；
t=0；
速度=0；
玩=真；
k={ArrowUp:0，ArrowDown:0，ArrowLeft:0，ArrowRight:0}；
}
loop（）；
var指令=document.createElement（“div”）；
instructions.innerHTML+=“[向上][向下]=加速
[向左][向右]=旋转”；
文件.正文.附件（说明）；

this.draw=function（）{
//填写一个矩形，将时间放入其中
ctx.fillStyle=“#000000”；
ctx.fillRect（10,10,55,25）；
ctx.fillStyle=“#8D5BC2”；
ctx.font=“12px”；
//设置秒数的格式-0:00
timestr=数学地板（secs/60）+“：”；
timestr+=（（secs%60在您的帮助下，您将看到一个非常简单的函数，它使用
ctx.fillText（）
将经过的秒数绘制到画布上

您希望在执行计时器时使用
Date（）
对象，因为它比setTimeout或setInterval更准确

重新启动时，只需将
startTime
再次设置为当前时间


var c=document.createElement（“画布”）；
var ctx=c.getContext（“2d”）；
var startTime=新日期（）；
c、 宽度=720；
c、 高度=480；
文件.正文.附件（c）；
var perm=[]；
while（perm.length<255）{
而（perm.includes（val=Math.floor（Math.random（）*255））；
永久推力（val）；
}
var-lerp=（a，b，t）=>a+（b-a）*（1-Math.cos（t*Math.PI））/2；
var noise=x=>{
x=x*0.01%254；
返回lerp（perm[Math.floor（x）]，perm[Math.ceil（x）]，x-Math.floor（x））；
}
函数drawer-laversedtime（）{
var-appead=parseInt（（新日期（）-startTime）/1000）；
ctx.save（）；
ctx.beginPath（）；
ctx.fillStyle=“黑色”；
ctx.font=“14px Verdana”
//以半透明度绘制运行时间
ctx.globalAlpha=0.50；
ctx.fillText（运行时间+“秒”，30,30）；
ctx.restore（）；
}
var Player=function（）{
此.x=c.宽度/2；
这个。y=0；
这个.ySpeed=0；
这是0.rot=0；
这个.rSpeed=0；
this.img=新图像（）；
this.img.src=”https://upload.wikimedia.org/wikipedia/en/3/3b/SpongeBob_SquarePants_character.svg";
this.draw=函数（）{
var p1=c.高度-噪声（t+此.x）*0.25；
var p2=c.高度-噪声（t+5+this.x）*0.25；
无功接地=0；
如果（p1-12>this.y）{
这是0.y速度+=0.1；
}否则{
this.ySpeed-=this.y-（p1-12）；
y=p1-12；
接地=1；
}
变量角度=数学atan2（（p2-12）-this.y，（this.x+5）-this.x）；
this.y+=this.y速度；
如果（！playing | | grounded&&Math.abs（this.rot）>Math.PI*0.5）{
玩=假；
该速度=5；
k、 ArrowUp=1；
这个.x-=速度*5；
}
if（接地和播放（&P）{
this.rot-=（this.rot-角度）*0.65；
this.rSpeed=this.rSpeed-（角度-this.rot）；
}
此.rSpeed+=（k.箭头左-k.箭头右）*0.05；
this.rot-=this.rSpeed*0.1；
如果（this.rot>Math.PI）t
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = 720; 
c.height = 480;
document.body.appendChild(c);

var perm = [];
while (perm.length < 255){
    while(perm.includes(val = Math.floor(Math.random()*255)));
    perm.push(val);
}

var lerp = (a,b,t) => a + (b-a) * (1-Math.cos(t*Math.PI))/2;
var noise = x=>{
    x = x * 0.01 % 254;
    return lerp(perm[Math.floor(x)], perm[Math.ceil(x)], x - Math.floor(x));
}

var Player =  function(){
    this.x = c.width/2;
    this.y = 0;
    this.ySpeed = 0;
    this.rot = 0;
    this.rSpeed = 0;
    this.img = new Image();
    this.img.src = "./images/moto.png";
    this.draw = function(){
        var p1 =  c.height - noise(t + this.x) * 0.25;
        var p2 =  c.height - noise(t+5 + this.x) * 0.25;

        var grounded = 0;
        if(p1-12 > this.y){
            this.ySpeed += 0.1;
        }else{
            this.ySpeed -= this.y - (p1-12);
            this.y = p1 - 12;
            grounded = 1;
        }

        var angle = Math.atan2((p2-12) - this.y, (this.x+5) - this.x);
        this.y += this.ySpeed;

        if(!playing || grounded && Math.abs(this.rot) > Math.PI * 0.5){
            playing = false;
            this.rSpeed = 5;
            k.ArrowUp = 1;
            this.x -= speed * 5;
        }


        if(grounded && playing){
            this.rot -= (this.rot - angle) * 0.65;
            this.rSpeed = this.rSpeed - (angle - this.rot);
        }
        this.rSpeed += (k.ArrowLeft - k.ArrowRight) * 0.05;
        this.rot -= this.rSpeed * 0.1;
        if(this.rot > Math.PI) this.rot = -Math.PI;
        if(this.rot < -Math.PI) this.rot = Math.PI;
        ctx.save();
        ctx.translate(this.x, this.y - 3);
        ctx.rotate(this.rot);
        ctx.drawImage(this.img, -15, -15, 60, 30);
        ctx.restore();
    }
}

var player = new Player();
var t = 0;
var speed = 0;
var playing = true;
var k = {ArrowUp:0, ArrowDown:0, ArrowLeft:0, ArrowRight:0};
function loop(){
    speed -= (speed - (k.ArrowUp - k.ArrowDown)) * 0.01;
    t += 10 * speed;
    ctx.fillStyle = "#8D5BC2";
    ctx.fillRect(0,0,c.width, c.height);

    ctx.fillStyle = "rgba(0,0,0,0.1)";
    ctx.beginPath();
    ctx.moveTo(0, c.height);
    for (let i = 0; i < c.width; i++)
        ctx.lineTo(i, c.height*0.8 - noise(t + i*5) * 0.25);
    ctx.lineTo(c.width, c.height);
    ctx.fill();

    ctx.fillStyle = "#444";
    ctx.beginPath();
    ctx.moveTo(0, c.height);
    for (let i = 0; i < c.width; i++)
        ctx.lineTo(i, c.height - noise(t + i) * 0.25);
    ctx.lineTo(c.width, c.height);
    ctx.fill();

    player.draw();
    if(player.x < 0)
        restart();
    requestAnimationFrame(loop);
}

onkeydown = d=> k[d.key] = 1;
onkeyup = d=> k[d.key] = 0;

function restart(){

    player = new Player();
    t = 0;
    speed = 0;
    playing = true;
    k = {ArrowUp:0, ArrowDown:0, ArrowLeft:0, ArrowRight:0};

}
loop();

var instructions = document.createElement("div");
instructions.innerHTML += "[up] [down] = accelerate <br> [Left] [Rigth] = rotate";
document.body.appendChild(instructions);

var secs = 0;
setInterval(function(){secs++},1000);


this.draw = function(){

  // Fill in a rectangle to put the time inside of
  ctx.fillStyle="#000000";
  ctx.fillRect(10,10,55,25);

  ctx.fillStyle="#8D5BC2";
  ctx.font = "12px";

  // Format the number of seconds - 0:00
  timestr = Math.floor(secs/60) + ":";
  timestr += ((secs%60<10)&&"0") + secs%60;

  // Write the time string over the rectangle
  ctx.fillText(timestr,25,25);