当前位置：首页 > article >正文

html小游戏-飞机大战

article 2024/10/24 23:37:53

在这里插入图片描述

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

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

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

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

<!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>