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

从零开始实现一个HTML5飞机大战游戏

news 来源：原创 2025/5/7 12:22:01

从零开始实现一个HTML5飞机大战游戏

前言

大家好！今天我要和大家分享一个有趣的HTML5游戏开发项目 —— 飞机大战。这个项目不仅能帮助我们理解游戏开发的基本原理，还能提升我们的JavaScript编程能力。让我们一起来看看如何实现这个经典的小游戏吧！

在这里插入图片描述

项目概述

这是一个基于HTML5和JavaScript实现的飞机射击游戏。玩家控制一架飞机在屏幕底部移动，通过发射子弹击落从上方飞来的敌机来获取分数。游戏具有以下特点：

支持键盘和触摸屏操作
实现了碰撞检测系统
包含分数统计和最高分记录
有爆炸动画效果

技术栈

HTML5
CSS3
原生JavaScript

核心实现

1. 游戏初始化

游戏采用面向对象的方式进行开发，使用ES6的class语法定义了一个Game类来管理整个游戏的状态和逻辑：

class Game {
    constructor() {
        // 初始化游戏状态和DOM元素
        this.player = document.getElementById('player');
        this.gameContainer = document.querySelector('.game-container');
        this.score = 0;
        this.highScore = localStorage.getItem('highScore') || 0;
        this.enemies = [];
        this.bullets = [];
        this.isGameRunning = false;
    }
}

2. 玩家控制实现

游戏支持键盘和触摸屏两种控制方式，这样可以让游戏在PC和移动设备上都能流畅运行：

bindEvents() {
    // 键盘控制
    document.addEventListener('keydown', (e) => {
        if (!this.isGameRunning) return;
        const speed = 10;
        switch(e.key) {
            case 'ArrowLeft':
                this.movePlayer(-speed);
                break;
            case 'ArrowRight':
                this.movePlayer(speed);
                break;
        }
    });

    // 触摸控制
    let touchStartX = 0;
    this.gameContainer.addEventListener('touchmove', (e) => {
        if (!this.isGameRunning) return;
        const touchX = e.touches[0].clientX;
        const diff = touchX - touchStartX;
        this.movePlayer(diff / 5);
        touchStartX = touchX;
    });
}

3. 游戏循环

游戏循环是游戏的核心，负责更新游戏状态、处理碰撞检测和渲染画面：

gameLoop() {
    if (!this.isGameRunning) return;

    // 更新子弹位置
    for (let i = this.bullets.length - 1; i >= 0; i--) {
        const bullet = this.bullets[i];
        bullet.y -= 5;
        // 移除超出屏幕的子弹
        if (bullet.y < 0) {
            bullet.element.remove();
            this.bullets.splice(i, 1);
        }
    }

    // 检测碰撞
    this.checkCollisions();

    requestAnimationFrame(() => this.gameLoop());
}

4. 碰撞检测

游戏中的碰撞检测采用简单的矩形碰撞算法，通过比较两个物体的位置和大小来判断是否发生碰撞：

checkCollision(rect1, rect2) {
    return rect1.x < rect2.x + 40 &&
           rect1.x + 6 > rect2.x &&
           rect1.y < rect2.y + 40 &&
           rect1.y + 15 > rect2.y;
}

5. 分数系统

游戏实现了一个简单的分数系统，包括实时得分显示和最高分记录功能：

updateScore() {
    document.getElementById('score').textContent = this.score;
    if (this.score > this.highScore) {
        this.highScore = this.score;
        localStorage.setItem('highScore', this.highScore);
    }
}

性能优化技巧

对象池复用
- 在游戏中，子弹和敌机等对象频繁创建和销毁会影响性能
- 使用数组管理这些对象，而不是频繁操作DOM
requestAnimationFrame
- 使用requestAnimationFrame代替setInterval来实现游戏循环
- 可以让动画更流畅，并且在标签页不可见时自动暂停，节省资源
事件委托
- 将事件监听器添加到父容器而不是每个元素
- 减少事件监听器的数量，提高性能