在开发基于javascript canvas的2d游戏时，管理屏幕上的多个动态实体（例如敌人、子弹或道具）是一个核心挑战。初学者常常会遇到一个常见问题：当尝试绘制和更新多个同类型实体时，它们却表现出完全相同的行为，或者它们的运动状态相互干扰，导致游戏逻辑混乱。本文将深入探讨这个问题的原因，并提供一个基于javascript类的优雅解决方案。
初始问题分析：共享状态的陷阱
在早期的游戏开发尝试中，开发者可能会为敌人创建一个函数，并使用全局变量来控制其位置和速度。例如：
var x = 0;
var y = 0;
var x_add = 2; // 全局X轴速度
var y_add = 2; // 全局Y轴速度
function draw_enemy(start_x, start_y, fill, w, h){
// 边界检测和速度反转
if(x + w + start_x >= 1000){ // 假设canvas宽度为1000
x_add = -2;
}
if(y + h + start_y >= 500){ // 假设canvas高度为500
y_add = -2;
}
if(y + start_y <= 0){
y_add = 2;
}
if(x + start_x <= 0){
x_add = 2;
}
x += x_add; // 更新全局X坐标
y += y_add; // 更新全局Y坐标
ctx.fillStyle = fill;
ctx.fillRect(x + start_x, y + start_y, w, h);
};当只有一个敌人调用 draw_enemy 函数时，一切看起来正常。然而，一旦尝试绘制第二个敌人，问题就暴露无遗：所有的敌人都会根据全局变量 x、y、x_add 和 y_add 进行移动。这意味着，当第一个敌人触碰到边界并改变了 x_add 的值时，紧接着绘制的第二个敌人也会使用这个被修改过的 x_add 值，导致所有敌人步调一致，失去独立性。问题的核心在于，每个敌人实例都需要拥有自己独立的坐标和速度状态，而不是共享全局变量。
解决方案：利用JavaScript类封装实体
解决上述问题的最佳方法是使用JavaScript的类（Class）。类允许我们定义一个蓝图，通过这个蓝图可以创建多个具有独立属性和行为的对象实例。每个实例都拥有自己的状态（如位置、速度、颜色等），从而实现独立的运动和交互。
1. 定义 Enemy 类
首先，我们定义一个 Enemy 类，它将包含每个敌人所需的属性和方法。
立即学习“Java免费学习笔记（深入）”；
// 获取Canvas上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 用于存储所有敌人实例的数组
let enemies = [];
class Enemy {
/**
* 构造函数，用于初始化每个敌人的属性
* @param {string} color - 敌人的颜色
* @param {number} initialX - 敌人初始X坐标 (可选)
* @param {number} initialY - 敌人初始Y坐标 (可选)
*/
constructor(color, initialX = null, initialY = null) {
// 随机或指定初始位置
this.x = initialX !== null ? initialX : 50 + Math.random() * (canvas.width - 100);
this.y = initialY !== null ? initialY : 50 + Math.random() * (canvas.height - 100);
this.w = 40; // 宽度
this.h = 50; // 高度
this.color = color; // 颜色
this.vx = 2; // X轴速度
this.vy = 2; // Y轴速度
}
/**
* 绘制敌人到Canvas上
*/
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
/**
* 更新敌人的位置和处理边界碰撞
*/
update() {
// 边界检测和速度反转
if (this.x + this.w >= canvas.width) {
this.vx = -Math.abs(this.vx); // 确保速度为负
}
if (this.y + this.h >= canvas.height) {
this.vy = -Math.abs(this.vy); // 确保速度为负
}
if (this.y <= 0) {
this.vy = Math.abs(this.vy); // 确保速度为正
}
if (this.x <= 0) {
this.vx = Math.abs(this.vx); // 确保速度为正
}
// 更新位置
this.x += this.vx;
this.y += this.vy;
// 绘制更新后的敌人
this.draw();
}
}在 Enemy 类中：
- constructor 方法在创建新 Enemy 实例时被调用，用于初始化每个敌人的独立属性，如 x、y、w、h、color、vx 和 vy。这里我们使用了 canvas.width 和 canvas.height 来确保位置生成在画布范围内，这是一个良好的实践。
- draw() 方法负责根据当前实例的 x、y、w、h 和 color 属性在Canvas上绘制敌人。
- update() 方法负责更新敌人的位置，并处理与Canvas边界的碰撞逻辑。关键在于，这些操作都作用于 this 关键字所代表的当前敌人实例的属性，而不是全局变量。
2. 创建和管理敌人实例
接下来，我们需要创建 Enemy 类的实例，并将它们存储在一个数组中，以便在游戏循环中统一管理。
// 创建多个敌人实例
function createEnemies(count = 5) {
for (let i = 0; i < count; i++) {
enemies.push(new Enemy('red')); // 创建5个红色敌人
}
}
createEnemies();
// 也可以单独添加特定颜色或位置的敌人
enemies.push(new Enemy('green', 100, 200)); // 一个绿色敌人，初始位置(100, 200)
enemies.push(new Enemy('blue', 500, 150)); // 一个蓝色敌人，初始位置(500, 150)3. 游戏主循环中的更新与绘制
在游戏的主循环中，我们需要清空Canvas，然后遍历 enemies 数组，对每个敌人实例调用其 update() 方法。
/**
* 游戏的每一帧绘制函数
*/
function drawGameFrame() {
// 清空整个Canvas，为下一帧做准备
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 遍历所有敌人，更新并绘制它们
enemies.forEach(enemy => enemy.update());
// 等同于:
// for (let i = 0; i < enemies.length; i++) {
// enemies[i].update();
// }
}
/**
* 动画循环函数
*/
function animate() {
drawGameFrame();
// 建议使用 requestAnimationFrame() 替代 setTimeout() 以获得更平滑的动画
// requestAnimationFrame(animate);
setTimeout(animate, 10); // 每10毫秒更新一次
}
// 启动动画
animate();完整的JavaScript代码示例 (script.js)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
let enemies = [];
class Enemy {
constructor(color, initialX = null, initialY = null) {
this.x = initialX !== null ? initialX : 50 + Math.random() * (canvas.width - 100);
this.y = initialY !== null ? initialY : 50 + Math.random() * (canvas.height - 100);
this.w = 40;
this.h = 50;
this.color = color;
this.vx = 2;
this.vy = 2;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
update() {
if (this.x + this.w >= canvas.width) {
this.vx = -Math.abs(this.vx);
}
if (this.y + this.h >= canvas.height) {
this.vy = -Math.abs(this.vy);
}
if (this.y <= 0) {
this.vy = Math.abs(this.vy);
}
if (this.x <= 0) {
this.vx = Math.abs(this.vx);
}
this.x += this.vx;
this.y += this.vy;
this.draw();
}
}
function createEnemies(count = 5) {
for (let i = 0; i < count; i++) {
enemies.push(new Enemy('red'));
}
}
createEnemies();
enemies.push(new Enemy('green', 100, 200));
enemies.push(new Enemy('blue', 500, 150));
function drawGameFrame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
enemies.forEach(enemy => enemy.update());
}
function animate() {
drawGameFrame();
// 建议使用 requestAnimationFrame() 替代 setTimeout()
// requestAnimationFrame(animate);
setTimeout(animate, 10);
}
animate();对应的HTML结构 (index.html)
JavaScript Canvas 敌人管理
注意事项与最佳实践
- 使用 canvas.width 和 canvas.height： 在代码中始终使用 canvas.width 和 canvas.height 来获取Canvas的实际尺寸，而不是硬编码数值。这使得代码更具弹性，当Canvas尺寸改变时无需修改逻辑。
- requestAnimationFrame()： 对于游戏动画，强烈推荐使用 window.requestAnimationFrame() 替代 setTimeout() 或 setInterval()。requestAnimationFrame() 会在浏览器下一次重绘之前调用指定的回调函数，它与浏览器的刷新率同步，能够提供更平滑、更高效的动画效果，并能自动暂停在非活动标签页中，节省CPU资源。
-
构造函数参数化： Enemy 类的 constructor 方法可以接受更多参数，以便在创建敌人时灵活配置其初始状态，例如：
- health（生命值）
- speed（速度）
- type（敌人类型，影响行为模式）
- damage（攻击力） 这使得游戏更容易实现不同种类和属性的敌人。
- 模块化设计： 随着游戏复杂度的增加，可以将不同的游戏实体（玩家、子弹、道具等）都封装成独立的类，并分别管理它们的数组。这种模块化设计有助于保持代码的清晰和可维护性。
- 碰撞检测： 一旦有了独立的实体对象，下一步就是实现它们之间的交互，例如敌人与玩家的碰撞、敌人与子弹的碰撞等。这些逻辑通常也在各自的 update 方法中处理，或者通过一个独立的碰撞检测系统来管理。
总结
通过采用JavaScript类来封装游戏实体，我们成功地解决了多个实体共享全局状态导致行为一致的问题。每个 Enemy 实例都拥有独立的 x, y, vx, vy 等属性，并通过各自的 update() 方法独立地更新状态和处理逻辑。结合数组来管理这些实例，并在游戏主循环中遍历更新，不仅使得代码结构清晰、逻辑独立，还大大提升了游戏的可扩展性和可维护性，为构建更复杂、更动态的Canvas游戏奠定了坚实的基础。
