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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
body {
margin: 0;
background: #000;
overflow: hidden;
user-select: none;
}
#game {
position: relative;
width: 400px;
height: 600px;
margin: 20px auto;
background: url('https://i.ibb.co/Y3x1R1k/bg-star.jpg') repeat-y;
background-size: cover;
border: 2px solid #fff;
overflow: hidden;
}
/* 我们的飞机 */
#player {
position: absolute;
bottom: 20px;
left: 180px;
width: 40px;
height: 60px;
background: url('https://i.ibb.co/4VMnPBX/player-plane.png') no-repeat center;
background-size: contain;
}
/* 子弹样式 */
.bullet {
position: absolute;
width: 6px;
height: 14px;
background: yellow;
border-radius: 3px;
}
/* 敌机样式 */
.enemy {
position: absolute;
width: 40px;
height: 40px;
background: url('https://i.ibb.co/gT86hw1/enemy-plane.png') no-repeat center;
background-size: contain;
}
/* 分数显示 */
#scoreBoard {
position: absolute;
top: 5px;
left: 10px;
color: white;
font-weight: bold;
font-size: 20px;
z-index: 1000;
font-family: "微软雅黑", Arial, sans-serif;
}
</style>
</head>
<body>
<div id="game">
<div id="scoreBoard">得分: 0</div>
<div id="player"></div>
</div>
<script>
const game = document.getElementById('game');
const player = document.getElementById('player');
const scoreBoard = document.getElementById('scoreBoard');
const gameWidth = game.clientWidth;
const gameHeight = game.clientHeight;
let playerX = 180; // 飞机的水平位置
let speed = 5; // 飞机移动速度
let bullets = [];
let enemies = [];
let score = 0;
// 监听键盘事件
const keys = {};
window.addEventListener('keydown', e => {
keys[e.code] = true;
});
window.addEventListener('keyup', e => {
keys[e.code] = false;
});
// 发射子弹
function shoot() {
const bullet = document.createElement('div');
bullet.classList.add('bullet');
bullet.style.left = (playerX + 17) + 'px'; // 子弹在飞机正中稍偏上
bullet.style.top = (gameHeight - 80) + 'px';
game.appendChild(bullet);
bullets.push(bullet);
}
// 每隔一段时间自动射击
setInterval(() => {
shoot();
}, 300);
// 创建敌人
function createEnemy() {
const enemy = document.createElement('div');
enemy.classList.add('enemy');
enemy.style.left = Math.random() * (gameWidth - 40) + 'px';
enemy.style.top = '-40px';
game.appendChild(enemy);
enemies.push(enemy);
}
// 每一秒产生一个敌人
setInterval(() => {
createEnemy();
}, 1000);
// 游戏主循环，更新游戏状态
function gameLoop() {
// 控制飞机左右移动
if (keys['ArrowLeft']) {
playerX = Math.max(0, playerX - speed);
}
if (keys['ArrowRight']) {
playerX = Math.min(gameWidth - 40, playerX + speed);
}
player.style.left = playerX + 'px';
// 更新子弹位置
for (let i = bullets.length -1; i >= 0; i--) {
const bullet = bullets[i];
let top = parseInt(bullet.style.top);
top -= 10; // 子弹移动速度
if (top < -14) {
bullet.remove();
bullets.splice(i, 1);
} else {
bullet.style.top = top + 'px';
}
}
// 更新敌机位置
for (let i = enemies.length -1; i >= 0; i--) {
const enemy = enemies[i];
let top = parseInt(enemy.style.top);
top += 2; // 敌机移动速度
if (top > gameHeight) {
// 敌机飞出屏幕，删除它
enemy.remove();
enemies.splice(i, 1);
continue;
} else {
enemy.style.top = top + 'px';
}
// 检测敌机和飞机碰撞
if (isCollide(player, enemy)) {
alert('游戏结束！你的得分是: ' + score);
window.location.reload();
}
// 检测敌机和子弹碰撞
for (let j = bullets.length -1; j >= 0; j--) {
const bullet = bullets[j];
if (isCollide(bullet, enemy)) {
// 击中过敌机，删除敌机和子弹，加分
enemy.remove();
enemies.splice(i, 1);
bullet.remove();
bullets.splice(j, 1);
score += 10;
scoreBoard.textContent = '得分: ' + score;
break;
}
}
}
requestAnimationFrame(gameLoop);
}
// 碰撞检测函数，两个元素是否相撞
function isCollide(a, b) {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
return !(
aRect.top > bRect.bottom ||
aRect.bottom < bRect.top ||
aRect.right < bRect.left ||
aRect.left > bRect.right
);
}
gameLoop();
</script>
</body>
</html>

复制代码