飞机大战小游戏
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>