飛機大戰小游戲

1.視覺設計：

????????采用柔和的藍紫色漸變背景，營造夢幻感

????????飛機、敵機和子彈使用柔和的糖果色調

????????添加了粒子爆炸效果，增強視覺反饋

????????星星收集物增加游戲趣味性

2.游戲機制：

????????玩家使用左右方向鍵控制飛機移動

????????空格鍵發射子彈

????????P鍵暫停游戲

????????擊落敵機獲得10分

????????收集星星增加生命值

????????碰撞敵機減少生命值

3.游戲元素：

????????玩家飛機：三角形設計，帶有尾焰效果

????????敵機：隨機大小和顏色的三角形

????????子彈：圓形子彈帶有尾跡

????????星星：五角星形狀，發光效果

????????粒子：爆炸和收集時的粒子效果

4.UI界面：

????????開始界面：游戲標題、操作說明和開始按鈕

????????游戲界面：頂部顯示分數和生命值

????????結束界面：顯示最終得分和重新開始按鈕

5.操作說明：

????????使用鍵盤左右方向鍵（← →）控制飛機移動

????????按空格鍵發射子彈

????????收集星星可以增加生命值

????????避免與敵機碰撞

????????按P鍵可以暫停/繼續游戲

6.截圖展示：

7.代碼重現：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>夢幻飛機大戰</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #6e8efb, #a777e3);min-height: 100vh;display: flex;justify-content: center;align-items: center;overflow: hidden;color: #fff;}.game-container {position: relative;width: 800px;height: 600px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);border-radius: 15px;overflow: hidden;}#gameCanvas {background: linear-gradient(160deg, #1a2980, #26d0ce);width: 100%;height: 100%;display: block;}.game-ui {position: absolute;top: 0;left: 0;width: 100%;padding: 20px;display: flex;justify-content: space-between;}.ui-panel {background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(10px);padding: 12px 25px;border-radius: 50px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);font-size: 1.2em;font-weight: 600;}.game-screen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background: rgba(26, 41, 128, 0.8);backdrop-filter: blur(5px);z-index: 10;transition: opacity 0.5s;}.start-screen {text-align: center;}.game-title {font-size: 4rem;margin-bottom: 20px;background: linear-gradient(45deg, #ff9a9e, #fad0c4);-webkit-background-clip: text;background-clip: text;color: transparent;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.game-instructions {max-width: 600px;margin: 25px auto;background: rgba(255, 255, 255, 0.1);padding: 20px;border-radius: 15px;line-height: 1.6;}.btn {background: linear-gradient(45deg, #ff9a9e, #fad0c4);border: none;color: #fff;padding: 15px 40px;font-size: 1.2rem;border-radius: 50px;margin-top: 20px;cursor: pointer;transition: all 0.3s;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}.btn:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);}.game-over {display: none;}.final-score {font-size: 3rem;margin: 20px 0;color: #ff9a9e;}.particle {position: absolute;border-radius: 50%;background: rgba(255, 255, 255, 0.5);pointer-events: none;}.controls-info {display: flex;gap: 30px;margin: 20px 0;}.control-item {text-align: center;background: rgba(255, 255, 255, 0.1);padding: 15px;border-radius: 15px;width: 120px;}.key {display: inline-block;background: rgba(255, 255, 255, 0.2);padding: 8px 15px;border-radius: 8px;margin: 5px 0;font-weight: bold;}</style>
</head>
<body><div class="game-container"><canvas id="gameCanvas" width="800" height="600"></canvas><div class="game-ui"><div class="ui-panel">得分: <span id="score">0</span></div><div class="ui-panel">生命: <span id="lives">3</span></div></div><div class="game-screen start-screen" id="startScreen"><h1 class="game-title">夢幻飛機大戰</h1><div class="game-instructions"><p>駕駛你的飛機，躲避敵機并消滅它們！</p><p>收集星星可以增加你的生命值，每擊落一架敵機得10分！</p><div class="controls-info"><div class="control-item"><div class="key">←</div><div class="key">→</div><div>左右移動</div></div><div class="control-item"><div class="key">空格</div><div>發射子彈</div></div><div class="control-item"><div class="key">P</div><div>暫停游戲</div></div></div></div><button class="btn" id="startBtn">開始游戲</button></div><div class="game-screen game-over" id="gameOverScreen"><h1 class="game-title">游戲結束</h1><div class="final-score">得分: <span id="finalScore">0</span></div><button class="btn" id="restartBtn">再玩一次</button></div></div><script>// 獲取Canvas和上下文const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');// 游戲狀態const gameState = {score: 0,lives: 3,gameOver: false,paused: false};// 玩家飛機const player = {x: canvas.width / 2 - 25,y: canvas.height - 80,width: 50,height: 40,speed: 6,color: '#FFD166'};// 子彈數組let bullets = [];// 敵機數組let enemies = [];// 星星數組let stars = [];// 粒子數組let particles = [];// 按鍵狀態const keys = {};// 初始化游戲function init() {gameState.score = 0;gameState.lives = 3;gameState.gameOver = false;bullets = [];enemies = [];stars = [];particles = [];updateUI();}// 更新UI顯示function updateUI() {document.getElementById('score').textContent = gameState.score;document.getElementById('lives').textContent = gameState.lives;}// 繪制玩家飛機function drawPlayer() {ctx.save();// 飛機主體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 = '#EF476F';ctx.fillRect(player.x + player.width/2 - 5, player.y + player.height/2, 10, 15);// 飛機機翼ctx.fillStyle = '#06D6A0';ctx.fillRect(player.x - 10, player.y + player.height - 15, 20, 10);ctx.fillRect(player.x + player.width - 10, player.y + player.height - 15, 20, 10);// 飛機火焰ctx.fillStyle = '#FF9A9E';ctx.beginPath();ctx.moveTo(player.x + player.width/2 - 10, player.y + player.height);ctx.lineTo(player.x + player.width/2 + 10, player.y + player.height);ctx.lineTo(player.x + player.width/2, player.y + player.height + 15);ctx.closePath();ctx.fill();ctx.restore();}// 繪制子彈function drawBullets() {for (let i = 0; i < bullets.length; i++) {const bullet = bullets[i];ctx.fillStyle = '#FFD166';ctx.beginPath();ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);ctx.fill();// 添加子彈尾跡ctx.fillStyle = 'rgba(255, 209, 102, 0.3)';ctx.beginPath();ctx.arc(bullet.x, bullet.y + 8, bullet.radius + 2, 0, Math.PI * 2);ctx.fill();}}// 繪制敵機function drawEnemies() {for (let i = 0; i < enemies.length; i++) {const enemy = enemies[i];// 敵機主體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 = '#073B4C';ctx.fillRect(enemy.x + enemy.width/2 - 8, enemy.y + 5, 16, 10);}}// 繪制星星function drawStars() {for (let i = 0; i < stars.length; i++) {const star = stars[i];ctx.fillStyle = '#FFD166';ctx.beginPath();// 繪制五角星const spikes = 5;const outerRadius = star.radius;const innerRadius = star.radius / 2;let rotation = Math.PI / 2 * 3;let x = star.x;let y = star.y;let step = Math.PI / spikes;ctx.beginPath();ctx.moveTo(star.x, star.y - outerRadius);for (let i = 0; i < spikes; i++) {x = star.x + Math.cos(rotation) * outerRadius;y = star.y + Math.sin(rotation) * outerRadius;ctx.lineTo(x, y);rotation += step;x = star.x + Math.cos(rotation) * innerRadius;y = star.y + Math.sin(rotation) * innerRadius;ctx.lineTo(x, y);rotation += step;}ctx.lineTo(star.x, star.y - outerRadius);ctx.closePath();ctx.fill();// 添加星星發光效果ctx.fillStyle = 'rgba(255, 209, 102, 0.3)';ctx.beginPath();ctx.arc(star.x, star.y, star.radius + 3, 0, Math.PI * 2);ctx.fill();}}// 繪制粒子function drawParticles() {for (let i = 0; i < particles.length; i++) {const p = particles[i];ctx.globalAlpha = p.alpha;ctx.fillStyle = p.color;ctx.beginPath();ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);ctx.fill();ctx.globalAlpha = 1;}}// 創建粒子效果function createParticles(x, y, color, count) {for (let i = 0; i < count; i++) {particles.push({x: x,y: y,size: Math.random() * 3 + 1,speedX: Math.random() * 6 - 3,speedY: Math.random() * 6 - 3,color: color,alpha: Math.random() * 0.5 + 0.5,life: Math.random() * 30 + 20});}}// 更新粒子function updateParticles() {for (let i = 0; i < particles.length; i++) {const p = particles[i];p.x += p.speedX;p.y += p.speedY;p.life--;p.alpha = p.life / 50;if (p.life <= 0) {particles.splice(i, 1);i--;}}}// 生成敵機function spawnEnemy() {const width = Math.random() * 40 + 30;const enemy = {x: Math.random() * (canvas.width - width),y: -40,width: width,height: 30,speed: Math.random() * 2 + 1,color: `hsl(${Math.random() * 60 + 180}, 70%, 60%)`};enemies.push(enemy);}// 生成星星function spawnStar() {if (Math.random() < 0.01) {const star = {x: Math.random() * canvas.width,y: -20,radius: Math.random() * 8 + 5,speed: Math.random() * 2 + 1};stars.push(star);}}// 發射子彈function shoot() {bullets.push({x: player.x + player.width / 2,y: player.y,radius: 4,speed: 8});// 添加射擊粒子效果createParticles(player.x + player.width/2, player.y, '#FF9A9E', 10);}// 更新子彈位置function updateBullets() {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 updateEnemies() {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--;gameState.lives--;updateUI();if (gameState.lives <= 0) {endGame();}}}}// 更新星星位置function updateStars() {for (let i = 0; i < stars.length; i++) {stars[i].y += stars[i].speed;// 移除超出屏幕的星星if (stars[i].y > canvas.height) {stars.splice(i, 1);i--;}}}// 碰撞檢測function checkCollisions() {// 子彈與敵機碰撞for (let i = 0; i < bullets.length; i++) {for (let j = 0; j < enemies.length; j++) {const bullet = bullets[i];const enemy = enemies[j];if (bullet.x > enemy.x &&bullet.x < enemy.x + enemy.width &&bullet.y > enemy.y &&bullet.y < enemy.y + enemy.height) {// 添加爆炸粒子效果createParticles(enemy.x + enemy.width/2, enemy.y + enemy.height/2,enemy.color,30);bullets.splice(i, 1);enemies.splice(j, 1);i--;j--;gameState.score += 10;updateUI();break;}}}// 玩家與敵機碰撞for (let i = 0; i < enemies.length; i++) {const 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) {// 添加爆炸粒子效果createParticles(enemy.x + enemy.width/2, enemy.y + enemy.height/2,enemy.color,50);enemies.splice(i, 1);i--;gameState.lives--;updateUI();if (gameState.lives <= 0) {endGame();}}}// 玩家與星星碰撞for (let i = 0; i < stars.length; i++) {const star = stars[i];const dx = player.x + player.width/2 - star.x;const dy = player.y + player.height/2 - star.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < player.width/2 + star.radius) {// 添加收集粒子效果createParticles(star.x, star.y,'#FFD166',20);stars.splice(i, 1);i--;gameState.lives++;updateUI();}}}// 結束游戲function endGame() {gameState.gameOver = true;document.getElementById('finalScore').textContent = gameState.score;document.getElementById('gameOverScreen').style.display = 'flex';}// 繪制背景function drawBackground() {// 繪制漸變背景const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);gradient.addColorStop(0, '#1a2980');gradient.addColorStop(1, '#26d0ce');ctx.fillStyle = gradient;ctx.fillRect(0, 0, canvas.width, canvas.height);// 繪制星空效果ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';for (let i = 0; i < 50; i++) {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height;const radius = Math.random() * 1.5;ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI * 2);ctx.fill();}}// 游戲循環function gameLoop() {if (gameState.gameOver || gameState.paused) return;// 清除畫布drawBackground();// 更新游戲對象updateBullets();updateEnemies();updateStars();updateParticles();// 生成新敵機和星星if (Math.random() < 0.02) spawnEnemy();spawnStar();// 檢測碰撞checkCollisions();// 繪制游戲對象drawStars();drawEnemies();drawBullets();drawPlayer();drawParticles();// 玩家移動if (keys['ArrowLeft'] && player.x > 0) {player.x -= player.speed;}if (keys['ArrowRight'] && player.x < canvas.width - player.width) {player.x += player.speed;}requestAnimationFrame(gameLoop);}// 事件監聽document.getElementById('startBtn').addEventListener('click', () => {document.getElementById('startScreen').style.display = 'none';init();gameLoop();});document.getElementById('restartBtn').addEventListener('click', () => {document.getElementById('gameOverScreen').style.display = 'none';init();gameLoop();});window.addEventListener('keydown', (e) => {keys[e.key] = true;// 空格鍵射擊if (e.key === ' ' && !gameState.gameOver && !gameState.paused) {shoot();}// P鍵暫停if (e.key === 'p' || e.key === 'P') {gameState.paused = !gameState.paused;if (!gameState.paused && !gameState.gameOver) {gameLoop();}}});window.addEventListener('keyup', (e) => {keys[e.key] = false;});// 初始化UIupdateUI();</script>
</body>
</html>