javascript飞机大战

JavaScript飞机大战是一款基于网页代码的游戏，玩家通过控制飞机来打击敌方飞机和障碍物，以获取分数。下面我将逐步讲解这个游戏的实现过程。

我们需要创建一个画布，用于显示游戏场景。可以使用HTML的`<canvas>`元素来创建画布，并使用JavaScript获取该元素的上下文，以便在画布上绘制图形。

// 创建画布
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

接下来，我们需要创建玩家飞机。可以使用一个矩形来表示飞机，并设置其初始位置和大小。

// 创建玩家飞机
var player = {
  x: canvas.width / 2 - 25,
  y: canvas.height - 75,
  width: 50,
  height: 50
};

然后，我们需要监听玩家的键盘操作，以控制飞机的移动。可以使用`keydown`和`keyup`事件来监听键盘按下和释放的动作，然后根据按键来更新飞机的位置。

// 监听键盘操作
document.addEventListener("keydown", function(event) {
  if (event.key === "ArrowLeft") {
    player.x -= 10; // 左移
  } else if (event.key === "ArrowRight") {
    player.x += 10; // 右移
  }
});
document.addEventListener("keyup", function(event) {
  if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
    player.x += 0; // 停止移动
  }
});

接下来，我们需要创建敌方飞机和障碍物，并让它们在画布中移动。可以使用一个数组来存储敌方飞机和障碍物的信息，然后使用循环来更新它们的位置。

// 创建敌方飞机和障碍物
var enemies = [];
function createEnemy() {
  var enemy = {
    x: Math.random() * (canvas.width - 50),
    y: 0,
    width: 50,
    height: 50,
    speed: Math.random() * 5 + 1 // 随机速度
  };
  enemies.push(enemy);
}
function createObstacle() {
  var obstacle = {
    x: Math.random() * (canvas.width - 50),
    y: 0,
    width: 50,
    height: 50,
    speed: Math.random() * 3 + 1 // 随机速度
  };
  obstacles.push(obstacle);
}
// 更新敌方飞机和障碍物的位置
function updateEnemies() {
  for (var i = 0; i < enemies.length; i++) {
    enemies[i].y += enemies[i].speed;
  }
}
function updateObstacles() {
  for (var i = 0; i < obstacles.length; i++) {
    obstacles[i].y += obstacles[i].speed;
  }
}

我们需要检测飞机与敌方飞机或障碍物的碰撞，以及击中敌方飞机的情况。可以使用碰撞检测算法来判断两个矩形是否相交，然后根据判断结果来更新游戏状态。

// 检测碰撞
function checkCollision(rect1, rect2) {
  if (rect1.x < rect2.x + rect2.width &&
      rect1.x + rect1.width > rect2.x &&
      rect1.y < rect2.y + rect2.height &&
      rect1.y + rect1.height > rect2.y) {
    return true; // 碰撞
  }
  return false; // 未碰撞
}
// 更新游戏状态
function updateGame() {
  // 碰撞检测
  for (var i = 0; i < enemies.length; i++) {
    if (checkCollision(player, enemies[i])) {
      // 玩家与敌方飞机碰撞，游戏结束
      gameOver();
    }
  }
  for (var i = 0; i < obstacles.length; i++) {
    if (checkCollision(player, obstacles[i])) {
      // 玩家与障碍物碰撞，游戏结束
      gameOver();
    }
  }
  // 更新位置
  updateEnemies();
  updateObstacles();
  // 绘制画面
  draw();
}
// 游戏结束
function gameOver() {
  // 停止游戏
  clearInterval(gameInterval);
  // 显示游戏结束的提示信息
  ctx.font = "30px Arial";
  ctx.fillText("Game Over", canvas.width / 2 - 75, canvas.height / 2);
}
// 绘制画面
function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制玩家飞机
  ctx.fillStyle = "blue";
  ctx.fillRect(player.x, player.y, player.width, player.height);
  // 绘制敌方飞机
  ctx.fillStyle = "red";
  for (var i = 0; i < enemies.length; i++) {
    ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
  }
  // 绘制障碍物
  ctx.fillStyle = "green";
  for (var i = 0; i < obstacles.length; i++) {
    ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
  }
}
// 开始游戏
function startGame() {
  // 创建敌方飞机和障碍物
  createEnemy();
  createObstacle();
  // 更新游戏状态
  gameInterval = setInterval(updateGame, 20);
}
// 监听页面加载完成事件，开始游戏
window.addEventListener("load", function() {
  startGame();
});

通过以上代码，我们实现了一个简单的JavaScript飞机大战游戏。玩家可以通过键盘控制飞机的移动，同时避免与敌方飞机和障碍物的碰撞。游戏中使用了画布和矩形来表示飞机、敌方飞机和障碍物，并通过碰撞检测算法来判断碰撞情况。整个游戏的更新和绘制过程通过循环来实现，从而实现了游戏的连续运行。