<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<title>飞机大战</title>
|
<style>
|
* {
|
margin: 0;
|
padding: 10px;
|
}
|
#gameContainer {
|
width: 400px;
|
height: 600px;
|
background: #000033;
|
position: relative;
|
overflow: hidden;
|
margin: 20px auto;
|
}
|
#plane {
|
width: 50px;
|
height: 50px;
|
position: absolute;
|
bottom: 50px;
|
left: 175px;
|
}
|
.bullet {
|
width: 10px;
|
height: 20px;
|
position: absolute;
|
z-index: 10;
|
}
|
.enemy {
|
width: 40px;
|
height: 40px;
|
position: absolute;
|
}
|
#score {
|
position: absolute;
|
top: 10px;
|
left: 10px;
|
color: white;
|
font-size: 20px;
|
z-index: 100;
|
font-family: Arial, "Microsoft YaHei", sans-serif;
|
}
|
#instructions {
|
text-align: center;
|
margin: 10px;
|
font-family: Arial, "Microsoft YaHei", sans-serif;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="instructions">
|
方向键移动，按住空格键连续发射三发子弹
|
</div>
|
<div id="gameContainer">
|
<div id="score">得分: <span id="scoreValue">0</span></div>
|
<img id="plane" src="https://img2.baidu.com/it/u=1823371455,1101740774&fm=253&fmt=auto&app=138&f=PNG?w=620&h=500" alt="飞机">
|
</div>
|
|
<script>
|
const plane = document.getElementById('plane');
|
const gameContainer = document.getElementById('gameContainer');
|
const scoreElement = document.getElementById('scoreValue');
|
let planeLeft = 175;
|
let planeTop = 500;
|
let score = 0;
|
const horizontalSpeed = 2.5;
|
const verticalSpeed = 3.5;
|
const bullets = [];
|
const enemies = [];
|
const keys = {};
|
let isSpacePressed = false;
|
let lastShotTime = 0;
|
const shootCooldown = 150;
|
|
document.addEventListener('keydown', (e) => {
|
keys[e.key] = true;
|
if(e.key === ' ') {
|
isSpacePressed = true;
|
e.preventDefault();
|
}
|
});
|
|
document.addEventListener('keyup', (e) => {
|
keys[e.key] = false;
|
if(e.key === ' ') {
|
isSpacePressed = false;
|
}
|
});
|
|
// 创建子弹组
|
function createBullets() {
|
// 子弹间距
|
const spacing = 15;
|
|
// 创建三发子弹
|
for(let i = -1; i <= 1; i++) {
|
const bullet = document.createElement('img');
|
bullet.src = 'https://img2.baidu.com/it/u=3553824147,3819274177&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889';
|
bullet.className = 'bullet';
|
|
// 计算子弹位置，中间子弹在飞机正上方，两侧子弹略微偏移
|
const bulletLeft = planeLeft + plane.offsetWidth/2 - 5 + (i * spacing);
|
bullet.style.left = bulletLeft + 'px';
|
bullet.style.top = (planeTop - 20) + 'px';
|
|
gameContainer.appendChild(bullet);
|
|
// 为两侧子弹添加横向运动
|
const horizontalSpeed = i * 0.5; // 子弹横向扩散速度
|
|
bullets.push({
|
element: bullet,
|
top: planeTop - 20,
|
left: bulletLeft,
|
horizontalSpeed: horizontalSpeed // 新增横向速度属性
|
});
|
}
|
}
|
|
function createEnemy() {
|
const enemy = document.createElement('img');
|
enemy.src = 'https://img1.baidu.com/it/u=2997483622,3440362546&fm=253&fmt=auto&app=138&f=PNG?w=400&h=492';
|
enemy.className = 'enemy';
|
enemy.style.left = Math.random() * (gameContainer.offsetWidth - 40) + 'px';
|
enemy.style.top = '-40px';
|
gameContainer.appendChild(enemy);
|
enemies.push({
|
element: enemy,
|
top: -40
|
});
|
}
|
|
function isColliding(rect1, rect2) {
|
return !(rect1.right < rect2.left ||
|
rect1.left > rect2.right ||
|
rect1.bottom < rect2.top ||
|
rect1.top > rect2.bottom);
|
}
|
|
function gameLoop() {
|
const currentTime = Date.now();
|
|
if (isSpacePressed && currentTime - lastShotTime >= shootCooldown) {
|
createBullets();
|
lastShotTime = currentTime;
|
}
|
|
if(keys['ArrowLeft'] && planeLeft > 0) {
|
planeLeft -= horizontalSpeed;
|
}
|
if(keys['ArrowRight'] && planeLeft < gameContainer.offsetWidth - plane.offsetWidth) {
|
planeLeft += horizontalSpeed;
|
}
|
if(keys['ArrowUp'] && planeTop > 0) {
|
planeTop -= verticalSpeed;
|
}
|
if(keys['ArrowDown'] && planeTop < gameContainer.offsetHeight - plane.offsetHeight) {
|
planeTop += verticalSpeed;
|
}
|
|
plane.style.left = planeLeft + 'px';
|
plane.style.top = planeTop + 'px';
|
|
// 更新子弹位置
|
for(let i = bullets.length - 1; i >= 0; i--) {
|
const bullet = bullets[i];
|
bullet.top -= 8; // 垂直移动速度
|
bullet.left += bullet.horizontalSpeed; // 添加横向移动
|
|
// 更新子弹位置
|
bullet.element.style.top = bullet.top + 'px';
|
bullet.element.style.left = bullet.left + 'px';
|
|
// 移除超出边界的子弹
|
if(bullet.top <= -20 || bullet.left < -10 || bullet.left > gameContainer.offsetWidth) {
|
bullet.element.remove();
|
bullets.splice(i, 1);
|
continue;
|
}
|
|
// 子弹碰撞检测
|
for(let j = enemies.length - 1; j >= 0; j--) {
|
const enemy = enemies[j];
|
if(isColliding(bullet.element.getBoundingClientRect(),
|
enemy.element.getBoundingClientRect())) {
|
bullet.element.remove();
|
bullets.splice(i, 1);
|
enemy.element.remove();
|
enemies.splice(j, 1);
|
score += 100;
|
scoreElement.textContent = score;
|
break;
|
}
|
}
|
}
|
|
// 敌机移动
|
for(let i = enemies.length - 1; i >= 0; i--) {
|
const enemy = enemies[i];
|
enemy.top += 2;
|
enemy.element.style.top = enemy.top + 'px';
|
|
if(enemy.top >= gameContainer.offsetHeight) {
|
enemy.element.remove();
|
enemies.splice(i, 1);
|
continue;
|
}
|
|
if(isColliding(enemy.element.getBoundingClientRect(),
|
plane.getBoundingClientRect())) {
|
alert('游戏结束！\n最终得分：' + score);
|
location.reload();
|
return;
|
}
|
}
|
|
requestAnimationFrame(gameLoop);
|
}
|
|
setInterval(createEnemy, 1500);
|
gameLoop();
|
</script>
|
</body>
|
</html>
|
