JavaScript 飞机大战游戏教程：从入门到实战

下面是一个简单的使用 JavaScript 编写的飞机大战游戏：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>飞机大战</title>
    <style>
        #game {
            width: 400px;
            height: 400px;
            position: relative;
            border: 1px solid #000;
        }
        #player {
            width: 50px;
            height: 50px;
            background-color: #f00;
            position: absolute;
            bottom: 0;
        }
        .enemy {
            width: 30px;
            height: 30px;
            background-color: #00f;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id='game'>
        <div id='player'></div>
    </div>

    <script src='game.js'></script>
</body>
</html>

JavaScript 代码（game.js）：

var game = document.getElementById('game');
var player = document.getElementById('player');

var playerX = 175;
var playerY = 350;

var enemies = [];

function createEnemy() {
    var enemy = document.createElement('div');
    enemy.setAttribute('class', 'enemy');
    enemy.style.left = Math.random() * 370 + 'px';
    enemy.style.top = '0px';
    game.appendChild(enemy);
    enemies.push(enemy);
}

function updateEnemies() {
    for (var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        var enemyTop = parseInt(enemy.style.top);
        if (enemyTop >= 350) {
            game.removeChild(enemy);
            enemies.splice(i, 1);
        } else {
            enemy.style.top = enemyTop + 10 + 'px';
        }
    }
}

function detectCollision() {
    for (var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        var enemyLeft = parseInt(enemy.style.left);
        var enemyTop = parseInt(enemy.style.top);
        var enemyRight = enemyLeft + 30;
        var enemyBottom = enemyTop + 30;
        var playerLeft = playerX;
        var playerTop = playerY;
        var playerRight = playerX + 50;
        var playerBottom = playerY + 50;

        if (enemyLeft < playerRight && enemyRight > playerLeft && enemyTop < playerBottom && enemyBottom > playerTop) {
            gameOver();
        }
    }
}

function movePlayer(event) {
    var key = event.keyCode;
    if (key === 37 && playerX > 0) {
        playerX -= 10;
    } else if (key === 39 && playerX < 350) {
        playerX += 10;
    }
    player.style.left = playerX + 'px';
}

function gameOver() {
    alert('Game Over');
    window.location.reload();
}

document.addEventListener('keydown', movePlayer);

setInterval(createEnemy, 1000);
setInterval(updateEnemies, 100);
setInterval(detectCollision, 100);

这是一个简化版的飞机大战游戏，玩家通过键盘左右箭头控制飞机移动，避免和敌机相撞。每1秒会生成一个新的敌机，并且每0.1秒会更新敌机的位置和检测碰撞情况。当玩家和敌机相撞时，游戏结束，并重新加载页面。

通过这个例子，你可以了解到 JavaScript 游戏开发的基本原理，包括 DOM 操作、事件处理、定时器等。你可以根据这个基础进行扩展，添加更多功能，比如：

添加发射子弹功能
添加得分系统
添加游戏背景音乐和音效
设计更复杂的敌机和游戏场景
使用 Canvas 或 WebGL 渲染图形，提高游戏性能和视觉效果

希望这个教程能够帮助你入门 JavaScript 游戏开发，并激发你对游戏开发的兴趣！