如何让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




