飞机 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
* {
margin: 0; padding: 0; box-sizing: border-box;
}
body {
background: #000;
overflow: hidden;
}
#game {
position: relative;
width: 400px;
height: 600px;
margin: 20px auto;
background: linear-gradient(to top, #010130, #020260);
border: 2px solid #fff;
overflow: hidden;
}
/* 玩家飞机 */
#player {
position: absolute;
bottom: 20px;
left: 180px; /* 在中间 */
width: 40px;
height: 60px;
background: url('https://i.postimg.cc/Y0QbkGGc/player-plane.png') no-repeat center / contain;
/* 如果图片没法加载，会显示一个蓝色三角形 */
background-color: dodgerblue;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
/* 敌机 */
.enemy {
position: absolute;
width: 40px;
height: 40px;
background: url('https://i.postimg.cc/rFZq1XmF/enemy-plane.png') no-repeat center / contain;
background-color: crimson;
clip-path: polygon(50% 0%, 90% 80%, 10% 80%);
}
/* 子弹 */
.bullet {
position: absolute;
width: 6px;
height: 14px;
background: yellow;
border-radius: 3px;
}
/* 文字提示 */
#score {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 18px;
font-family: 'Microsoft Yahei', sans-serif;
}
</style>
</head>
<body>
<div id="game">
<div id="player"></div>
<div id="score">得分：0</div>
</div>
<script>
// 游戏区域
const game = document.getElementById('game');
const player = document.getElementById('player');
const scoreDisplay = document.getElementById('score');
const gameWidth = 400;
const gameHeight = 600;
let playerX = 180; // 初始位置
const playerSpeed = 10;
let bullets = []; // 存放子弹
let enemies = []; // 存放敌机
let score = 0;
// 键盘控制
const keys = {
left: false,
right: false,
space: false,
};
window.addEventListener('keydown', (e) => {
if (e.code === 'ArrowLeft') keys.left = true;
if (e.code === 'ArrowRight') keys.right = true;
if (e.code === 'Space') keys.space = true;
});
window.addEventListener('keyup', (e) => {
if (e.code === 'ArrowLeft') keys.left = false;
if (e.code === 'ArrowRight') keys.right = false;
if (e.code === 'Space') keys.space = false;
});
// 发射子弹函数
function shootBullet() {
const bullet = document.createElement('div');
bullet.className = 'bullet';
bullet.style.left = playerX + 17 + 'px'; // 子弹从飞机中间位置射出
bullet.style.bottom = '80px';
game.appendChild(bullet);
bullets.push(bullet);
}
let canShoot = true;
// 创建敌机函数
function createEnemy() {
const enemy = document.createElement('div');
enemy.className = 'enemy';
enemy.style.left = Math.random() * (gameWidth - 40) + 'px';
enemy.style.top = '-40px'; // 从顶部外面开始
game.appendChild(enemy);
enemies.push(enemy);
}
// 游戏循环
function gameLoop() {
// 移动玩家
if (keys.left) {
playerX -= playerSpeed;
if (playerX < 0) playerX = 0;
}
if (keys.right) {
playerX += playerSpeed;
if (playerX > gameWidth - 40) playerX = gameWidth - 40;
}
player.style.left = playerX + 'px';
// 发射子弹（限制频率）
if (keys.space && canShoot) {
shootBullet();
canShoot = false;
setTimeout(() => { canShoot = true }, 300); // 300毫秒发射一次
}
// 移动子弹
for (let i = bullets.length - 1; i >= 0; i--) {
const b = bullets[i];
let bottom = parseInt(b.style.bottom);
bottom += 15;
if (bottom > gameHeight) {
// 离开屏幕了就移除
game.removeChild(b);
bullets.splice(i, 1);
continue;
}
b.style.bottom = bottom + 'px';
}
// 移动敌机
for (let i = enemies.length - 1; i >= 0; i--) {
const e = enemies[i];
let top = parseInt(e.style.top);
top += 3; // 敌机速度
if (top > gameHeight) {
// 敌机飞出底部，游戏结束
alert('游戏结束! 得分：' + score);
window.location.reload();
return;
}
e.style.top = top + 'px';
}
// 检测子弹和敌机碰撞
for (let i = enemies.length - 1; i >= 0; i--) {
const e = enemies[i];
const eRect = e.getBoundingClientRect();
for (let j = bullets.length - 1; j >= 0; j--) {
const b = bullets[j];
const bRect = b.getBoundingClientRect();
// 简单矩形碰撞检测
if (
bRect.left < eRect.right &&
bRect.right > eRect.left &&
bRect.top < eRect.bottom &&
bRect.bottom > eRect.top
) {
// 击中
// 删除敌机和子弹
game.removeChild(e);
enemies.splice(i, 1);
game.removeChild(b);
bullets.splice(j, 1);
score++;
scoreDisplay.textContent = '得分：' + score;
break;
}
}
}
requestAnimationFrame(gameLoop);
}
// 每两秒生成一个敌机
setInterval(createEnemy, 2000);
// 启动游戏循环
gameLoop();
</script>
</body>
</html>

复制代码