html小游戏-飞机大战

在这里插入图片描述

敌机图片：在这里插入图片描述

子弹图片：在这里插入图片描述

我方飞机：在这里插入图片描述

目录结构
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>飞机大战</title><style>* {margin: 0;padding: 0;}#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="1.png" 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 = '2.png';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 = '3.png';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>