DeepSeek飛機大戰小游戲HTML5(附源碼)

用DeepSeek幫忙生成的飛機大戰小游戲網頁版，基于HTML5。
提示詞prompt
幫我做一個網頁版的飛機大戰游戲 html5的
在這里插入圖片描述

游戲功能說明

玩家控制：
使用鍵盤方向鍵或WASD移動飛機
空格鍵發射子彈
移動設備支持觸摸控制
游戲機制：
敵機會從屏幕頂部隨機位置出現
擊中敵機獲得10分
隨著分數增加，敵機出現頻率會提高
碰到敵機游戲結束
界面：
開始界面
游戲界面（顯示當前分數）
結束界面（顯示最終分數）
如有需要，可進一步改進游戲。
將上述代碼保存為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>