从 0 手撸 canvas 小游戏：圆圆战争 - 帧率计算、垃圾回收篇
上篇我们为圆圆战争增加了鼠标控制射击方向，还增加了子弹与敌人的碰撞检测。本篇我们会为游戏做一些简单的垃圾回收操作，而在游戏中为了随时知道我们游戏的性能，常用的手段就是帧率计算器，也是我们本篇的目标之一。
先看下本章最后的成果：
https://code.juejin.cn/pen/7158076182519349285
帧率计算器
首先制作前我们要先搞清什么是帧率：
帧率（英语：frame rate）是用于测量显示帧数的度量。测量单位为“每秒显示帧数”（frame per second，FPS）或“赫兹”，一般来说 FPS 用于描述视频、电子绘图或游戏每秒播放多少帧。
所以我们只需要测量每秒 loop 执行的次数即可，此处我们直接将其作为一个绘制元素即可，看下代码：
class FrameRater {
count: number;
time: number;
frameRate?: number;
timer?: ReturnType<typeof setTimeout>;
duration: number;
constructor() {
this.count = 0;
this.time = Date.now();
this.duration = 3000;
this.loop();
}
loop() {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.compute();
this.loop();
}, this.duration);
}
compute() {
const now = Date.now();
this.frameRate = (this.count / (now - this.time)) * 1000;
this.time = now;
this.count = 0;
}
action() {
this.count++;
}
draw() {
if (!this.frameRate) return;
ctx.font = '14px serif';
ctx.fillStyle = 'black';
ctx.shadowBlur = 0;
ctx.fillText(this.frameRate.toFixed(2) + '', 20, 20);
}
}
我们在帧率计算器中要使用定时器来定时计算帧率，不过定时器的时间并不能保证，所以在计算时为了准确我们最好记录下前后的事件，使用时间差来计算。每次 action 中我们为帧数加一以此来计算该事件段内的总帧数，要注意定时器的事件，如果使用 1s 可能会导致帧率数字一直刷新反而不方便观看，所以我们将定时器事件设置为 3s。
用 canvas 绘制文字则比较简单，设置好文字样式后，我们使用 fillText 将帧率进行绘制即可，后面的 20,20 为文字的坐标。当然我们也可以直接添加一个 span，然后在 draw 时设置 span 的 innerText 也可以达到同样的效果，并且可以避免每帧绘制，性能更好。
然后我们在 game 的 loop 中只需要调用 frameRater 的 action 即可，frameRater 会自行收集帧率信息并更新，然后在进行绘制时调用 frameRater 的 draw 即可：
const game = {
start() {
// ...
this.frameRater = new FrameRater();
this.loop();
},
loop() {
// ...
this.frameRater.action();
},
draw() {
// ...
this.frameRater.draw();
}
};
此处要注意，不同于定时器，requestAnimationFrame 的帧率由浏览器来决定，基本大部分情况下都是 60 帧，所以此处会发现帧率只可能小于等于 60。
垃圾回收
在游戏中我们会创建很多的子弹和敌人对象，然而子弹会离开屏幕并消失，敌人也会因为子弹的攻击而消失，但是我们的对象却未清理，所以此处我们需要手动进行垃圾回收。为了方便管理，我们也顺便将每一帧每个对象要做的事情放到 action 中统一管理，这样就不用每个对象的操作都在 game 对象中管理。
首先我们需要在每一帧中检测子弹是否离开绘制区域，如果离开则将子弹的 state 置为 0，这个比较简单，只需要检测子弹的坐标是否离开坐标系即可，为了避免边界和敌人相撞，我们给坐标留一些 buffer。
class Bullet {
check() {
if (
this.x > WIDTH + OUTER_RANGE ||
this.x < 0 - OUTER_RANGE ||
this.y > HEIGHT + OUTER_RANGE ||
this.y < 0 - OUTER_RANGE
) {
this.state = 0;
}
}
}
然后我们将子弹的所有操作全部集中到 action 中：
class Bullet {
action(enemies: Enemy[]) {
this.move();
this.intersectionDetection(enemies);
this.check();
}
}
而垃圾回收则需要 game 对象进行统一管理，为了避免频繁的垃圾回收导致性能问题，我们可以为垃圾回收设定一个 CD：
const GC_CD = 60;
const game = {
gc() {
this.bullets = this.bullets.filter(bullet => bullet.state);
this.enemies = this.enemies.filter(enemy => enemy.state);
},
cd() {
if (this.bulletCD-- < 1) {
this.bullets.push(new Bullet(this.mouse.angle));
this.bulletCD = BULLET_CD;
}
if (this.enemyCD-- < 1) {
this.enemies.push(new Enemy());
this.enemyCD = ENEMY_CD;
}
if (this.gcCD-- < 1) {
this.gc();
this.gcCD = GC_CD;
}
}
};
这样我们每 60 帧就会进行一次垃圾回收操作，避免内存无限增长。
而在 game 中我们将操作类代码进行集中化，这样可以让每个方法的职责更为明确：
const game = {
loop() {
requestAnimationFrame(() => this.loop());
this.draw();
this.action();
this.cd();
},
action() {
this.enemies.forEach(enemy => enemy.action());
this.bullets.forEach(bullet => bullet.action());
this.frameRater.action();
},
cd() {
if (this.bulletCD-- < 1) {
this.bullets.push(new Bullet(this.mouse.angle));
this.bulletCD = BULLET_CD;
}
if (this.enemyCD-- < 1) {
this.enemies.push(new Enemy());
this.enemyCD = ENEMY_CD;
}
if (this.gcCD-- < 1) {
this.gc();
this.gcCD = GC_CD;
}
}
};
敌人随机生成
由于现在敌人就从一条线出现，使得游戏毫无难度，所以我们需要在敌人初始化时从随机位置生成，为了让敌人不要出现的太突兀，我们需要将生成位置控制在屏幕外侧，并且不能太远，为此我们可以直接复用之前子弹离屏计算中的 OUTER_RANGE：
const random = (min: number, max: number) => {
return Math.random() * (max - min) + min;
};
const randomBol = () => {
return Math.random() < 0.5;
};
const randomXCord = (out?: boolean) => {
if (out) {
return randomBol() ? random(-OUTER_RANGE, 0) : random(WIDTH, WIDTH + OUTER_RANGE);
}
return random(0, WIDTH);
};
const randomYCord = (out?: boolean) => {
if (out) {
return randomBol() ? random(-OUTER_RANGE, 0) : random(HEIGHT, HEIGHT + OUTER_RANGE);
}
return random(0, HEIGHT);
};
class Enemy {
constructor() {
if (randomBol()) {
this.x = randomXCord(true);
this.y = randomYCord();
} else {
this.x = randomXCord();
this.y = randomYCord(true);
}
this.angle = computeAngle(this.x - C_X, this.y - C_Y);
}
private move() {
this.x -= Math.cos((this.angle * Math.PI) / 180) * this.speed;
this.y -= Math.sin((this.angle * Math.PI) / 180) * this.speed;
}
}
移动时计算同子弹的轨迹计算，只需要将方向进行反转即可。
结语
至此我们完成了敌人随机生成、帧率计算、垃圾回收，已经完成了一个圆圆大战的几个基本要素，可以进行简单的游玩了。完整代码可至顶部 DEMO 查看。下篇计划会进行关卡、分数计算、输赢判断、暂停方面的开发。