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

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

使用 class 创建敌人对象

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

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 <p>在上面的代码中，我们定义了一个名为 Enemy 的 class。constructor 方法用于初始化敌人的属性，例如位置 (x, y)、大小 (w, h)、颜色 (c) 和速度 (vx, vy)。draw 方法用于在 Canvas 画布上绘制敌人。update 方法用于更新敌人的位置，并检测是否碰到边界，如果碰到边界，则改变敌人的移动方向。</p><p><strong>使用数组管理敌人对象</strong></p><p>为了管理多个敌人，我们可以使用数组来存储所有的敌人对象。</p><pre class="brush:php;toolbar:false;">function createEnemies() {
  for (let i=0; i <p>在上面的代码中，我们定义了一个名为 createEnemies 的函数，用于创建多个敌人对象，并将它们添加到 enemies 数组中。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10666" title="Java Api Extractor"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="Java Api Extractor" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10666" title="Java Api Extractor" class="overflowclass">Java Api Extractor</a>
													<p class="overflowclass">从 Java 项目中提取 Controller 层接口定义为 JSON 数据。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill10666" title="Java Api Extractor" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><p><strong>更新和绘制所有敌人</strong></p><p>在动画循环中，我们需要更新所有敌人的位置，并在 Canvas 画布上绘制它们。</p><pre class="brush:php;toolbar:false;">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 游戏中遇到的类似问题。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南