js书写小游戏飞机大战

好的，我来为你简单介绍一下如何使用 JavaScript 来编写一个飞机大战小游戏。

首先，我们需要准备一些素材，比如飞机、子弹、敌机等。可以在网上找一些免费的素材，也可以自己绘制。

然后，我们需要定义一些变量来保存游戏中的状态，比如玩家飞机的位置、敌机的位置和速度、子弹的位置等等。

接着，我们需要编写一些函数来处理游戏逻辑。比如，当玩家按下左键或右键时，移动玩家飞机的位置；当玩家按下空格键时，发射子弹；每隔一段时间生成敌机，并让它们向下移动；判断子弹是否击中了敌机等等。

最后，我们需要将游戏画面绘制到画布上。可以使用 HTML5 中的 Canvas 元素来实现。我们可以使用 requestAnimationFrame 函数来不断更新画布上的内容，从而实现游戏的动画效果。

下面是一个简单的示例代码，供你参考：

// 定义变量
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

let player = {
  x: 0,
  y: 0
};

let bullets = [];
let enemies = [];

// 处理游戏逻辑
function movePlayer(direction) {
  if (direction === "left") {
    player.x -= 10;
  } else if (direction === "right") {
    player.x += 10;
  }
}

function shoot() {
  bullets.push({ x: player.x, y: player.y });
}

function createEnemy() {
  enemies.push({ x: Math.random() * canvas.width, y: 0, speed: Math.random() * 5 });
}

function moveEnemies() {
  for (let i = 0; i < enemies.length; i++) {
    enemies[i].y += enemies[i].speed;
  }
}

function checkCollisions() {
  for (let i = 0; i < bullets.length; i++) {
    for (let j = 0; j < enemies.length; j++) {
      if (bullets[i].x > enemies[j].x && bullets[i].x < enemies[j].x + 50 && bullets[i].y > enemies[j].y && bullets[i].y < enemies[j].y + 50) {
        bullets.splice(i, 1);
        enemies.splice(j, 1);
      }
    }
  }
}

// 绘制画面
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制玩家飞机
  ctx.fillRect(player.x, player.y, 50, 50);

  // 绘制子弹
  for (let i = 0; i < bullets.length; i++) {
    ctx.fillRect(bullets[i].x, bullets[i].y, 5, 10);
  }

  // 绘制敌机
  for (let i = 0; i < enemies.length; i++) {
    ctx.fillRect(enemies[i].x, enemies[i].y, 50, 50);
  }
}

// 更新游戏状态
function update() {
  moveEnemies();
  checkCollisions();
}

// 处理用户输入
document.addEventListener("keydown", function(event) {
  if (event.code === "ArrowLeft") {
    movePlayer("left");
  } else if (event.code === "ArrowRight") {
    movePlayer("right");
  } else if (event.code === "Space") {
    shoot();
  }
});

// 开始游戏循环
function gameLoop() {
  createEnemy();
  update();
  draw();

  requestAnimationFrame(gameLoop);
}

gameLoop();

这只是一个简单的示例代码，实际上还有很多细节需要处理。比如，当敌机飞出画布后需要将其从数组中删除；当玩家飞机和敌机发生碰撞时需要结束游戏；需要添加分数等游戏元素等等。但是通过这个代码，你应该可以了解到如何使用 JavaScript 来编写一个小游戏了。