JavaScript Canvas 游戏：独立控制多个敌人的实现

本文旨在解决在 JavaScript Canvas 游戏中创建和独立控制多个敌人的问题。通过使用面向对象编程中的 class 概念，我们可以为每个敌人创建独立的实例，并控制它们的移动和行为，从而避免所有敌人同步移动的常见问题。本文将详细介绍如何使用 class 创建敌人对象，并使用数组管理和更新这些对象，最终实现多个敌人在 Canvas 画布上的独立运动。

在 JavaScript Canvas 游戏中，控制多个敌人独立运动是一个常见的挑战。当使用全局变量来控制敌人的位置和移动方向时，会导致所有敌人同步移动，无法实现独立控制。解决这个问题的一种有效方法是使用面向对象编程的思想，为每个敌人创建一个独立的实例。

使用 class 创建敌人对象

JavaScript 中的 class 允许我们创建具有自己属性和方法的对象。我们可以使用 class 来定义敌人的属性，例如位置、大小、颜色和速度，以及控制敌人移动的方法。

立即学习“Java免费学习笔记（深入）”；

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
let enemies = [];
class Enemy {
constructor(c) {
this.x = 50 + Math.random() * canvas.width;
this.y = 50 + Math.random() * canvas.height;
this.w = 40;
this.h = 50;
this.c = c;
this.vx = 2;
this.vy = 2;
}
draw() {
ctx.fillStyle = this.c;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
update() {
if (this.x + this.w >= canvas.width) {
this.vx = -2;
}
if (this.y + this.h >= canvas.height) {
this.vy = -2;
}
if (this.y <= 0) {
this.vy = 2;
}
if (this.x <= 0) {
this.vx = 2;
}
this.x += this.vx;
this.y += this.vy;
this.draw()
}
}

在上面的代码中，我们定义了一个名为 Enemy 的 class。constructor 方法用于初始化敌人的属性，例如位置 (x, y)、大小 (w, h)、颜色 (c) 和速度 (vx, vy)。draw 方法用于在 Canvas 画布上绘制敌人。update 方法用于更新敌人的位置，并检测是否碰到边界，如果碰到边界，则改变敌人的移动方向。

使用数组管理敌人对象

为了管理多个敌人，我们可以使用数组来存储所有的敌人对象。

function createEnemies() {
for (let i=0; i < 5; i++) {
enemies.push(new Enemy('red'))
}
}
createEnemies()
enemies.push(new Enemy('green'))
enemies.push(new Enemy('blue'))

在上面的代码中，我们定义了一个名为 createEnemies 的函数，用于创建多个敌人对象，并将它们添加到 enemies 数组中。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

73

查看详情

更新和绘制所有敌人

在动画循环中，我们需要更新所有敌人的位置，并在 Canvas 画布上绘制它们。

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
enemies.forEach(e => e.update())
}
function animate() {
draw();
setTimeout(animate, 10);
}
animate()

在上面的代码中，draw 函数首先清除 Canvas 画布，然后使用 forEach 方法遍历 enemies 数组，并调用每个敌人的 update 方法来更新其位置。然后，update 方法内部会调用 draw 方法来在 Canvas 画布上绘制敌人。animate 函数使用 setTimeout 方法来创建动画循环，不断更新和绘制敌人。

注意事项

• 建议使用 requestAnimationFrame() 而不是 setTimeout() 来创建动画循环，因为 requestAnimationFrame() 能够更好地优化性能。
• 可以使用 canvas.width 和 canvas.height 来获取 Canvas 画布的实际尺寸，而不是硬编码数值。
• 可以向 Enemy 类的构造函数传递参数，以便为每个敌人设置不同的属性值，例如颜色、位置和速度。

总结

通过使用 class 和数组，我们可以轻松地创建和管理多个敌人对象，并实现它们的独立运动。这种方法不仅可以提高代码的可读性和可维护性，还可以更好地控制游戏中的各个元素。希望本文能够帮助你解决在 JavaScript Canvas 游戏中遇到的类似问题。