宇宙战机：太空侵略者的终极挑战！

前端

2023-08-26 15:23:35

重温经典：用 JavaScript 和 Canvas 征战太空侵略者

构建无限的太空战场

在 HTML5 中，canvas 宛如一个无垠的画布，为太空侵略者的重现提供了完美的舞台。它让我们能够绘制逼真的宇宙背景、飞船、外星人、能量和子弹，构建一个浩瀚的太空战场，带您沉浸在太空射击的快感中。

赋予游戏生命和灵动

JavaScript 作为网页开发的利器，赋予了太空侵略者游戏生命和灵动。它控制着飞船的移动、子弹的发射、外星人的行动和能量的收集，让整个游戏世界充满互动和变化。此外，它还能实现物理效果和音效，提升游戏体验的真实性和沉浸感。

策略与技巧的交织

太空侵略者看似简单，但胜利需要策略和技巧。根据关卡和敌人类型，合理分配能量，选择合适的子弹，灵活控制飞船的移动和射击时机，才能脱颖而出。隐藏的秘密道具和奖励为游戏增添了趣味性和挑战性。

征服星际的快感

驾驶飞船，在太空中与外星人激战，收集能量，发射子弹，击退一波又一波的敌人，最终取得胜利。太空侵略者的终极魅力就在这里！您将体验太空射击的巅峰，享受征服星际的快感。

代码示例

以下是使用 JavaScript 和 Canvas 创建太空侵略者游戏的示例代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 创建飞船
const ship = {
  x: canvas.width / 2,
  y: canvas.height - 50,
  width: 50,
  height: 50,
  speed: 5,
};

// 创建外星人
const aliens = [];
for (let i = 0; i < 10; i++) {
  aliens.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height / 2,
    width: 50,
    height: 50,
    speed: 2,
  });
}

// 游戏循环
function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制飞船
  ctx.fillStyle = 'white';
  ctx.fillRect(ship.x, ship.y, ship.width, ship.height);

  // 移动飞船
  if (keys[37]) { ship.x -= ship.speed; }
  if (keys[39]) { ship.x += ship.speed; }

  // 绘制外星人
  for (let i = 0; i < aliens.length; i++) {
    const alien = aliens[i];
    ctx.fillStyle = 'green';
    ctx.fillRect(alien.x, alien.y, alien.width, alien.height);

    // 移动外星人
    alien.x += alien.speed;
    if (alien.x > canvas.width || alien.x < 0) {
      alien.speed = -alien.speed;
    }
  }

  // 碰撞检测
  for (let i = 0; i < aliens.length; i++) {
    const alien = aliens[i];
    if (ship.x < alien.x + alien.width &&
        ship.x + ship.width > alien.x &&
        ship.y < alien.y + alien.height &&
        ship.y + ship.height > alien.y) {
      alert('Game over!');
    }
  }

  // 重新绘制游戏
  window.requestAnimationFrame(gameLoop);
}

// 开始游戏
gameLoop();