用DeepSeek帮忙生成的飞机大战小游戏网页版，基于HTML5。
提示词prompt
帮我做一个网页版的飞机大战游戏 html5的
游戏功能说明
玩家控制：
使用键盘方向键或WASD移动飞机
空格键发射子弹
移动设备支持触摸控制
游戏机制：
敌机会从屏幕顶部随机位置出现
击中敌机获得10分
随着分数增加，敌机出现频率会提高
碰到敌机游戏结束
界面：
开始界面
游戏界面（显示当前分数）
结束界面（显示最终分数）
如有需要，可进一步改进游戏。
将上述代码保存为HTML文件，用浏览器打开即可开始游戏。
飞机大战小游戏源码如下：
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞机大战</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
overflow: hidden;
font-family: Arial, sans-serif;
}
#gameContainer {
position: relative;
width: 400px;
height: 600px;
background-color: #000;
overflow: hidden;
}
#gameCanvas {
background-color: #000;
}
#startScreen, #gameOverScreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
background-color: rgba(0, 0, 0, 0.7);
}
#gameOverScreen {
display: none;
}
h1 {
color: #ffcc00;
margin-bottom: 30px;
text-shadow: 0 0 10px #ff6600;
}
button {
padding: 10px 20px;
font-size: 18px;
background-color: #ff6600;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background-color: #ff9900;
transform: scale(1.05);
}
#scoreDisplay {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 20px;
z-index: 100;
}
</style>
</head>
<body>
<div id="gameContainer">
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="scoreDisplay">分数: 0</div>
<div id="startScreen">
<h1>飞机大战</h1>
<button id="startButton">开始游戏</button>
</div>
<div id="gameOverScreen">
<h1>游戏结束</h1>
<p id="finalScore">最终分数: 0</p>
<button id="restartButton">重新开始</button>
</div>
</div>
<script>
// 游戏变量
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startScreen = document.getElementById('startScreen');
const gameOverScreen = document.getElementById('gameOverScreen');
const startButton = document.getElementById('startButton');
const restartButton = document.getElementById('restartButton');
const scoreDisplay = document.getElementById('scoreDisplay');
const finalScoreDisplay = document.getElementById('finalScore');
let gameRunning = false;
let score = 0;
// 玩家飞机
const player = {
x: canvas.width / 2 - 25,
y: canvas.height - 80,
width: 50,
height: 50,
speed: 5,
color: '#3498db',
isMovingLeft: false,
isMovingRight: false,
isMovingUp: false,
isMovingDown: false
};
// 子弹数组
let bullets = [];
const bulletSpeed = 7;
const bulletSize = 5;
// 敌机数组
let enemies = [];
const enemySpeed = 2;
let enemySpawnRate = 60; // 帧数
// 游戏循环变量
let animationId;
let frameCount = 0;
// 初始化游戏
function initGame() {
score = 0;
scoreDisplay.textContent = `分数: ${score}`;
bullets = [];
enemies = [];
frameCount = 0;
player.x = canvas.width / 2 - 25;
player.y = canvas.height - 80;
gameRunning = true;
startScreen.style.display = 'none';
gameOverScreen.style.display = 'none';
gameLoop();
}
// 游戏主循环
function gameLoop() {
if (!gameRunning) return;
update();
render();
animationId = requestAnimationFrame(gameLoop);
}
// 更新游戏状态
function update() {
// 移动玩家
if (player.isMovingLeft && player.x > 0) {
player.x -= player.speed;
}
if (player.isMovingRight && player.x < canvas.width - player.width) {
player.x += player.speed;
}
if (player.isMovingUp && player.y > 0) {
player.y -= player.speed;
}
if (player.isMovingDown && player.y < canvas.height - player.height) {
player.y += player.speed;
}
// 移动子弹
for (let i = bullets.length - 1; i >= 0; i--) {
bullets[i].y -= bulletSpeed;
// 移除超出屏幕的子弹
if (bullets[i].y < 0) {
bullets.splice(i, 1);
}
}
// 生成敌机
frameCount++;
if (frameCount % enemySpawnRate === 0) {
spawnEnemy();
// 随着分数增加，敌机生成速度加快
if (enemySpawnRate > 20) {
enemySpawnRate = Math.max(20, 60 - Math.floor(score / 10));
}
}
// 移动敌机
for (let i = enemies.length - 1; i >= 0; i--) {
enemies[i].y += enemies[i].speed;
// 移除超出屏幕的敌机
if (enemies[i].y > canvas.height) {
enemies.splice(i, 1);
}
}
// 检测碰撞：子弹和敌机
for (let i = bullets.length - 1; i >= 0; i--) {
for (let j = enemies.length - 1; j >= 0; j--) {
if (checkCollision(bullets[i], enemies[j])) {
// 移除子弹和敌机
bullets.splice(i, 1);
enemies.splice(j, 1);
// 增加分数
score += 10;
scoreDisplay.textContent = `分数: ${score}`;
break;
}
}
}
// 检测碰撞：玩家和敌机
for (let i = enemies.length - 1; i >= 0; i--) {
if (checkCollision(player, enemies[i])) {
gameOver();
break;
}
}
}
// 渲染游戏
function render() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制背景
ctx.fillStyle = '#000033';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制星星背景
drawStars();
// 绘制玩家
drawPlayer();
// 绘制子弹
drawBullets();
// 绘制敌机
drawEnemies();
}
// 绘制玩家飞机
function drawPlayer() {
ctx.fillStyle = player.color;
// 机身
ctx.beginPath();
ctx.moveTo(player.x + player.width / 2, player.y);
ctx.lineTo(player.x + player.width, player.y + player.height);
ctx.lineTo(player.x, player.y + player.height);
ctx.closePath();
ctx.fill();
// 机翼装饰
ctx.fillStyle = '#2980b9';
ctx.beginPath();
ctx.moveTo(player.x + player.width / 2, player.y + 10);
ctx.lineTo(player.x + player.width - 10, player.y + player.height - 10);
ctx.lineTo(player.x + 10, player.y + player.height - 10);
ctx.closePath();
ctx.fill();
}
// 绘制子弹
function drawBullets() {
ctx.fillStyle = '#ffcc00';
bullets.forEach(bullet => {
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
ctx.fill();
});
}
// 绘制敌机
function drawEnemies() {
enemies.forEach(enemy => {
ctx.fillStyle = enemy.color;
// 机身
ctx.beginPath();
ctx.moveTo(enemy.x, enemy.y);
ctx.lineTo(enemy.x + enemy.width, enemy.y);
ctx.lineTo(enemy.x + enemy.width / 2, enemy.y + enemy.height);
ctx.closePath();
ctx.fill();
// 机翼装饰
ctx.fillStyle = '#c0392b';
ctx.beginPath();
ctx.moveTo(enemy.x + 5, enemy.y + 5);
ctx.lineTo(enemy.x + enemy.width - 5, enemy.y + 5);
ctx.lineTo(enemy.x + enemy.width / 2, enemy.y + enemy.height - 5);
ctx.closePath();
ctx.fill();
});
}
// 绘制星星背景
function drawStars() {
ctx.fillStyle = 'white';
for (let i = 0; i < 100; i++) {
const x = Math.random() * canvas.width;
const y = (frameCount + i * 100) % canvas.height;
const size = Math.random() * 2;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
}
// 生成敌机
function spawnEnemy() {
const size = 30 + Math.random() * 20;
const enemy = {
x: Math.random() * (canvas.width - size),
y: -size,
width: size,
height: size,
speed: enemySpeed + Math.random() * 2,
color: '#e74c3c'
};
enemies.push(enemy);
}
// 发射子弹
function fireBullet() {
if (!gameRunning) return;
const bullet = {
x: player.x + player.width / 2,
y: player.y,
size: bulletSize
};
bullets.push(bullet);
}
// 碰撞检测
function checkCollision(obj1, obj2) {
return obj1.x < obj2.x + obj2.width &&
obj1.x + (obj1.width || obj1.size) > obj2.x &&
obj1.y < obj2.y + obj2.height &&
obj1.y + (obj1.height || obj1.size) > obj2.y;
}
// 游戏结束
function gameOver() {
gameRunning = false;
cancelAnimationFrame(animationId);
finalScoreDisplay.textContent = `最终分数: ${score}`;
gameOverScreen.style.display = 'flex';
}
// 事件监听
startButton.addEventListener('click', initGame);
restartButton.addEventListener('click', initGame);
// 键盘控制
document.addEventListener('keydown', (e) => {
if (!gameRunning) return;
switch (e.key) {
case 'ArrowLeft':
case 'a':
player.isMovingLeft = true;
break;
case 'ArrowRight':
case 'd':
player.isMovingRight = true;
break;
case 'ArrowUp':
case 'w':
player.isMovingUp = true;
break;
case 'ArrowDown':
case 's':
player.isMovingDown = true;
break;
case ' ':
fireBullet();
break;
}
});
document.addEventListener('keyup', (e) => {
switch (e.key) {
case 'ArrowLeft':
case 'a':
player.isMovingLeft = false;
break;
case 'ArrowRight':
case 'd':
player.isMovingRight = false;
break;
case 'ArrowUp':
case 'w':
player.isMovingUp = false;
break;
case 'ArrowDown':
case 's':
player.isMovingDown = false;
break;
}
});
// 触摸控制（移动设备）
let touchX = 0;
canvas.addEventListener('touchstart', (e) => {
if (!gameRunning) return;
e.preventDefault();
touchX = e.touches[0].clientX;
// 触摸屏幕上半部分发射子弹
if (e.touches[0].clientY < canvas.height / 2) {
fireBullet();
}
});
canvas.addEventListener('touchmove', (e) => {
if (!gameRunning) return;
e.preventDefault();
const newTouchX = e.touches[0].clientX;
const deltaX = newTouchX - touchX;
player.x += deltaX;
// 限制玩家不超出屏幕
if (player.x < 0) player.x = 0;
if (player.x > canvas.width - player.width) {
player.x = canvas.width - player.width;
}
touchX = newTouchX;
});
// 点击屏幕发射子弹（移动设备）
canvas.addEventListener('click', (e) => {
if (!gameRunning) return;
// 点击屏幕上半部分发射子弹
if (e.clientY < canvas.height / 2) {
fireBullet();
}
});
</script>
</body>
</html>