今天博主由于无聊所以用HTML写了一个简易的飞机大战代码，来给大家分享，希望大家能够喜欢。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5飞机大战</title>
<style>
canvas {
display: block;
margin: 0 auto;
background-color: #000;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>以上是它包括了文档类型声明、语言设置、字符集设置、视口设置和标题设置。此外，它还包括了一些CSS样式，用于设置Canvas的样式。
<body>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;这是HTML文档的主体部分。它包括了一个Canvas元素和一个JavaScript脚本。JavaScript脚本获取了Canvas元素和其上下文对象，并动态设置了Canvas的宽度和高度为整个标签页大小。
class GameObject {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
isCollidingWith(other) {
return this.x < other.x + other.width &&
this.x + this.width > other.x &&
this.y < other.y + other.height &&
this.y + this.height > other.y;
}
}
class Player extends GameObject {
constructor(x, y) {
super(x, y, 30, 30);
this.color = 'green';
}
}
class Enemy extends GameObject {
constructor(x, y) {
super(x, y, 30, 30);
this.color = 'red';
}
}
class Bullet extends GameObject {
constructor(x, y) {
super(x, y, 5, 10);
this.color = 'white';
}
}这是HTML文档的主体部分。它包括了一个Canvas元素和一个JavaScript脚本。JavaScript脚本获取了Canvas元素和其上下文对象，并动态设置了Canvas的宽度和高度为整个标签页大小。
class GameObject {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
isCollidingWith(other) {
return this.x < other.x + other.width &&
this.x + this.width > other.x &&
this.y < other.y + other.height &&
this.y + this.height > other.y;
}
}
class Player extends GameObject {
constructor(x, y) {
super(x, y, 30, 30);
this.color = 'green';
}
}
class Enemy extends GameObject {
constructor(x, y) {
super(x, y, 30, 30);
this.color = 'red';
}
}
class Bullet extends GameObject {
constructor(x, y) {
super(x, y, 5, 10);
this.color = 'white';
}
}这是JavaScript脚本中的类定义部分。它定义了四个类：GameObject、Player、Enemy和Bullet。GameObject是一个基本类，它包含了所有游戏对象的共同属性和方法。Player、Enemy和Bullet是GameObject的子类，它们分别代表玩家、敌人和子弹。
const player = new Player(canvas.width / 2 - 15, canvas.height - 50);
const enemies = [];
const bullets = [];
function spawnEnemy() {
const x = Math.random() * (canvas.width - 30);
const enemy = new Enemy(x, -30);
enemies.push(enemy);
setTimeout(spawnEnemy, 1000);
}
function shoot() {
const bullet = new Bullet(player.x + 12.5, player.y);
bullets.push(bullet);
setTimeout(shoot, 500);
}这是JavaScript脚本中的变量和函数定义部分。它定义了三个变量：player、enemies和bullets，分别代表玩家、敌人和子弹。它还定义了两个函数：spawnEnemy和shoot，分别用于生成敌人和发射子弹。
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
player.draw();
enemies.forEach((enemy, index) => {
enemy.y += 2;
enemy.draw();
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
}
if (player.isCollidingWith(enemy)) {
if (!gameOver) {
gameOver = true;
if (confirm('Game Over，是否重新开始？')) {
location.reload();
} else {
window.close();
}
}
}
});
bullets.forEach((bullet, index) => {
bullet.y -= 5;
bullet.draw();
if (bullet.y < -10) {
bullets.splice(index, 1);
}
enemies.forEach((enemy, enemyIndex) => {
if (bullet.isCollidingWith(enemy)) {
bullets.splice(index, 1);
enemies.splice(enemyIndex, 1);
}
});
});
requestAnimationFrame(update);
}这是JavaScript脚本中的游戏循环部分。它定义了一个update函数，用于更新游戏状态和绘制游戏画面。在update函数中，它首先清除了Canvas上的所有内容，然后绘制了玩家和敌人。接着，它更新了敌人和子弹的位置，并检查是否有敌人被消灭或者是否有玩家与敌人相撞。如果玩家与敌人相撞，则会弹出一个确认框，询问玩家是否重新开始游戏。如果玩家点击“确定”，则会重新加载页面并重新开始游戏。如果玩家点击“取消”，则会关闭网页。最后，它使用requestAnimationFrame函数来循环调用update函数，以实现游戏的动态效果。
canvas.addEventListener('mousemove', (event) => {
player.x = event.clientX - canvas.offsetLeft - player.width / 2;
});
let gameOver = false;
spawnEnemy();
shoot();
update();
</script>
</body>
</html>