<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>飞机射击游戏</title>
<style>
/* 页面整体样式 */
body {margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f0f0f0;}
#box {width:400px;height:600px;background:linear-gradient(100deg,#aaaaff,#ffaa7f);margin:0 auto;position:relative;overflow:hidden;box-shadow:0 0 20px rgba(0,0,0,0.3);}
/* 玩家样式 */
#player {position:absolute;width:40px;height:40px;background:linear-gradient(100deg,#aa55ff,#55aaff);bottom:1px;left:180px;border-radius:50%;text-align:center;line-height:40px;color:white;box-shadow:0 0 15px rgba(85,170,255,0.9);transition:all 0.1s;}
#player.moving {transform:scale(1.1);box-shadow:0 0 20px rgba(85,170,255,1);}
#player.shooting {background:linear-gradient(100deg,#ff55aa,#aa55ff);}
/* 敌人样式 */
.diren {position:absolute;width:40px;height:40px;background:#AA55FF;box-shadow:0 0 10px rgba(170,85,255,0.7);animation:float 1s ease-in-out infinite alternate;}
@keyframes float {from{transform:translateY(-5px);} to{transform:translateY(5px);}}
/* 子弹样式 */
.zidan {position:absolute;width:5px;height:10px;background:#00ff7f;border-radius:10px;box-shadow:0 0 5px rgba(0,255,127,0.7);}
/* 按钮样式 */
button {padding:12px 30px;border:none;border-radius:999px;cursor:pointer;font-size:18px;font-weight:600;letter-spacing:0.5px;box-shadow:0 4px 14px rgba(0,0,0,0.2);transition:all 0.2s;}
#start-btn {background:linear-gradient(135deg,#f59e0b,#d97706);color:white;}
#restart-btn {background:linear-gradient(135deg,#2563eb,#4f46e5);color:white;}
button:hover {transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3);}
/* 其他界面元素 */
#score,#lives {position:absolute;color:white;text-shadow:1px 1px 2px rgba(0,0,0,0.5);}
#score {top:10px;left:10px;}
#lives {top:10px;right:10px;}
#health-bar {position:absolute;top:45px;right:10px;width:100px;height:10px;background:rgba(0,0,0,0.3);border-radius:5px;}
#health-value {height:100%;background:linear-gradient(90deg,#ff5555,#ffaa55);transition:width 0.3s;}
</style>
</head>
<body>
<div id="box">
<div id="score">得分:0</div>
<div id="lives">生命:3</div>
<div id="health-bar"><div id="health-value"></div></div>
<div id="player">玩家</div>
<!-- 游戏界面 -->
<div id="game-start" style="display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:0;background:rgba(0,0,0,0.7);color:white;padding:20px;">
<h1 style="font-size:36px;margin-bottom:20px;">飞机射击游戏</h1>
<p style="font-size:16px;margin-bottom:30px;">使用方向键移动，空格射击</p>
<button id="start-btn">开始游戏</button>
</div>
<div id="game-over" style="display:none;position:absolute;inset:0;background:rgba(0,0,0,0.7);display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;">
<div style="font-size:24px;margin-bottom:20px;">游戏结束！</div>
<div>最终得分：<span id="final-score">0</span></div>
<button id="restart-btn">重新开始</button>
</div>
</div>
<script>
// 基础变量
let player = document.getElementById('player');
let scoreDiv = document.getElementById('score');
let livesDiv = document.getElementById('lives');
let healthValue = document.getElementById('health-value');
let startBtn = document.getElementById('start-btn');
let restartBtn = document.getElementById('restart-btn');
let gameStartDiv = document.getElementById('game-start');
let gameOverDiv = document.getElementById('game-over');
let box = document.getElementById('box');
// 游戏状态
let gameRunning = false;
let enemies = [];
let bullets = [];
let playerX = 180;
let score = 0, lives = 3, maxLives = 3;
const MOVE_SPEED = 20, BULLET_SPEED = 10, ENEMY_SPEED = 1.5, SPAWN_RATE = 0.015;
// 初始化
function init() {
gameStartDiv.style.display = 'flex';
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', restartGame);
}
// 开始游戏
function startGame() {
gameRunning = true;
gameStartDiv.style.display = 'none';
resetGame();
requestAnimationFrame(gameLoop);
}
// 游戏循环
function gameLoop() {
if (!gameRunning) return;
updatePlayer();
updateEnemies();
updateBullets();
checkCollisions();
requestAnimationFrame(gameLoop);
}
// 更新玩家状态
function updatePlayer() {
player.style.left = `${playerX}px`;
}
// 处理键盘事件
function handleKeyDown(e) {
if (!gameRunning) return;
if (e.key === 'ArrowLeft' || e.key === 'a') playerX = Math.max(0, playerX - MOVE_SPEED);
if (e.key === 'ArrowRight' || e.key === 'd') playerX = Math.min(360, playerX + MOVE_SPEED);
if (e.key === ' ') shoot();
}
// 射击逻辑
function shoot() {
const bullet = document.createElement('div');
bullet.className = 'zidan';
bullet.style.left = `${playerX + 20}px`;
bullet.style.bottom = '50px';
box.appendChild(bullet);
bullets.push(bullet);
}
// 更新敌人
function updateEnemies() {
if (Math.random() < SPAWN_RATE) createEnemy();
enemies.forEach((enemy, index) => {
enemy.style.top = `${parseInt(enemy.style.top) + ENEMY_SPEED}px`;
if (parseInt(enemy.style.top) > 600) removeEnemy(index);
});
}
// 创建敌人
function createEnemy() {
const enemy = document.createElement('div');
enemy.className = 'diren';
enemy.style.left = `${Math.random() * 360}px`;
enemy.style.top = '-40px';
box.appendChild(enemy);
enemies.push(enemy);
}
// 更新子弹
function updateBullets() {
bullets.forEach((bullet, index) => {
bullet.style.bottom = `${parseInt(bullet.style.bottom) + BULLET_SPEED}px`;
if (parseInt(bullet.style.bottom) > 600) removeBullet(index);
});
}
// 碰撞检测
function checkCollisions() {
enemies.forEach((enemy, eIndex) => {
bullets.forEach((bullet, bIndex) => {
if (isColliding(enemy, bullet)) {
removeEnemy(eIndex);
removeBullet(bIndex);
score += 10;
scoreDiv.textContent = `得分:${score}`;
}
});
if (isColliding(enemy, player)) {
removeEnemy(eIndex);
loseLife();
}
});
}
// 碰撞检测函数
function isColliding(a, b) {
const rectA = a.getBoundingClientRect();
const rectB = b.getBoundingClientRect();
return !(rectA.bottom < rectB.top || rectA.top > rectB.bottom || rectA.right < rectB.left || rectA.left > rectB.right);
}
// 移除敌人
function removeEnemy(index) {
enemies[index].remove();
enemies.splice(index, 1);
}
// 移除子弹
function removeBullet(index) {
bullets[index].remove();
bullets.splice(index, 1);
}
// 失去生命
function loseLife() {
lives--;
livesDiv.textContent = `生命:${lives}`;
healthValue.style.width = `${(lives / maxLives) * 100}%`;
if (lives <= 0) endGame();
}
// 结束游戏
function endGame() {
gameRunning = false;
gameOverDiv.style.display = 'flex';
document.getElementById('final-score').textContent = score;
enemies.forEach(enemy => enemy.remove());
bullets.forEach(bullet => bullet.remove());
}
// 重置游戏
function resetGame() {
score = 0;
lives = maxLives;
scoreDiv.textContent = '得分:0';
livesDiv.textContent = '生命:3';
healthValue.style.width = '100%';
playerX = 180;
enemies.length = 0;
bullets.length = 0;
}
init(); // 初始化游戏
</script>
</body>
</html>
index.html
index.html