You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何让Canvas生存类游戏的分数以秒为单位而非毫秒统计?

解决生存游戏分数以秒为单位统计的问题

嘿,我看了你的代码,问题出在当前分数是按帧计数,而不是按实际时间计算——你的runningTheCode每40毫秒执行一次,每次都让TheScore++,所以这个数值其实是运行的帧数,不是秒数。咱们直接用游戏启动时间和当前时间的差值来计算秒数就搞定了,不用额外的setInterval,具体步骤如下:

1. 修改分数计算逻辑

runningTheCode里的TheScore++删掉,替换成基于时间差的计算:

runningTheCode = function() {
    thecanvas.clearRect(0, 0, WIDTH, HEIGHT);
    /* 计数加1(去掉重复的帧计数代码)*/
    CountofTheFrames++;
    // 替换原来的TheScore++,用时间差计算秒数
    var elapsedMilliseconds = Date.now() - TimeWhenTheGameStarted;
    TheScore = Math.floor(elapsedMilliseconds / 1000); // 转换成整数秒数

    /* 随时间生成更多随机敌人*/
    if (CountofTheFrames % 300 === 0) /*每8秒生成新敌人*/
        RandomlyGeneratingEnemies();
    
    // 后续碰撞检测、绘制实体等代码保持不变...
};

2. 修复重复的帧计数

你原来的代码里CountofTheFrames++CountofTheFrames = CountofTheFrames + 1是重复的,删掉其中一个即可,避免帧计数错误。

为什么这样改?

  • Date.now() - TimeWhenTheGameStarted会得到游戏从启动到当前的毫秒数,除以1000就转换成了秒数。
  • Math.floor()用来取整数,让分数显示完整的存活秒数(比如运行5.9秒时显示5,到6秒时自动跳为6);如果想要带小数的精确秒数,直接去掉Math.floor()就行。
  • 这种计算方式和帧率完全无关,不管你的setInterval是40ms还是其他值,分数都会精准对应实际存活时间。

重启游戏后,你就能看到分数以秒为单位正常增长啦,比如存活10秒,分数就会显示10,完全符合你的需求。

内容的提问来源于stack exchange,提问作者Boochbeard

火山引擎 最新活动