js写飞机大战小游戏

第一步，写一个html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞机大战</title>
<style>
  body { margin: 0; }
  canvas { display: block; background-color: #000; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script src="game.js"></script>
</body>
</html>

第二步，就是JS文件了。js文件名字   game.js 代码如下

 

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

let player = {
  x: canvas.width / 2,
  y: canvas.height - 30,
  width: 50,
  height: 30,
  speed: 5,
  dx: 0
};

let enemies = [];
let bullets = [];
let keys = {};
let gameRunning = true;

function init() {
  document.addEventListener('keydown', keyDownHandler, false);
  document.addEventListener('keyup', keyUpHandler, false);
  setInterval(mainLoop, 1000 / 60); // 每秒60帧
  setInterval(spawnEnemy, 1000); // 每秒生成一个敌人
}

function mainLoop() {
  if (!gameRunning) return;
  clearCanvas();
  movePlayer();
  moveBullets();
  moveEnemies();
  drawPlayer();
  drawBullets();
  drawEnemies();
  checkCollisions();
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawPlayer() {
  ctx.fillStyle = "red";
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

function movePlayer() {
  if (keys.right) {
    player.dx = player.speed;
  } else if (keys.left) {
    player.dx = -player.speed;
  } else {
    player.dx = 0;
  }

  player.x += player.dx;

  if (player.x < 0) {
    player.x = 0;
  } else if (player.x + player.width > canvas.width) {
    player.x = canvas.width - player.width;
  }
}

function spawnEnemy() {
  let enemy = {
    x: Math.random() * (canvas.width - 50),
    y: 0,
    width: 50,
    height: 30,
    speed: 2
  };
  enemies.push(enemy);
}

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

    if (enemies[i].y > canvas.height) {
      enemies.splice(i, 1);
      i--;
    }
  }
}

function drawEnemies() {
  for (let enemy of enemies) {
    ctx.fillStyle = "blue";
    ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
  }
}

function fireBullet() {
  let bullet = {
    x: player.x + player.width / 2 - 2,
    y: player.y,
    width: 4,
    height: 10,
    speed: 7
  };
  bullets.push(bullet);
}

function moveBullets() {
  for (let i = 0; i < bullets.length; i++) {
    bullets[i].y -= bullets[i].speed;

    if (bullets[i].y < 0) {
      bullets.splice(i, 1);
      i--;
    }
  }
}

function drawBullets() {
  for (let bullet of bullets) {
    ctx.fillStyle = "yellow";
    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
  }
}

function checkCollisions() {
  for (let i = 0; i < enemies.length; i++) {
    let enemy = enemies[i];
    if (player.x < enemy.x + enemy.width &&
        player.x + player.width > enemy.x &&
        player.y < enemy.y + enemy.height &&
        player.y + player.height > enemy.y) {
      gameRunning = false;
      alert("游戏结束！");
      return;
    }

    for (let j = 0; j < bullets.length; j++) {
      let bullet = bullets[j];
      if (bullet.x < enemy.x + enemy.width &&
          bullet.x + bullet.width > enemy.x &&
          bullet.y < enemy.y + enemy.height &&
          bullet.y + bullet.height > enemy.y) {
        enemies.splice(i, 1);
        bullets.splice(j, 1);
        i--;
        j--;
        break;
      }
    }
  }
}

function keyDownHandler(e) {
  if (e.key === 'Right' || e.key === 'ArrowRight') {
    keys.right = true;
  } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
    keys.left = true;
  } else if (e.key === ' ' || e.key === 'Space') {
    fireBullet();
  }
}

function keyUpHandler(e) {
  if (e.key === 'Right' || e.key === 'ArrowRight') {
    keys.right = false;
  } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
    keys.left = false;
  }
}

init();

 

将game.js 和 html文件放到同级目录，运行html文件，就可以玩了

 

 

posted @ 2024-11-26 17:17  技术探索者  阅读(224)  评论(0)    收藏  举报