JavaScript Canvas游戏：高效管理多个敌人实体教程

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);
};

// 获取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();
  }
}

// 创建多个敌人实例
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)

/**
 * 游戏的每一帧绘制函数
 */
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();

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();

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Canvas 敌人管理</title>
        <style>
            body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; }
            canvas { border: 1px solid black; background-color: white; }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1000" height="500"></canvas>
        <script src="script.js"></script>
    </body>
</html>