星际守护者

游戏开发指南

玩法介绍

你将驾驶一艘蓝色的"守护者"战机，保卫地球免受红色外星入侵者的攻击。
使用 左右方向键 ← → 控制战机在屏幕底部左右移动。
使用 空格键 发射激光，摧毁来袭的敌人。
消灭敌人可以获得分数，分数越高，游戏难度会自动提升，敌人的速度和数量都会增加。
收集青色的能量晶体可以获得大量额外分数。
如果你的战机与任何敌人发生碰撞，游戏将结束。
游戏过程中可以随时点击"暂停"按钮中断游戏，点击"继续"按钮恢复。

开发技术点

HTML5 Canvas

使用Canvas API进行游戏图形的绘制和动画。
处理Canvas的尺寸自适应，以适应不同的屏幕大小。
清空画布、绘制背景、玩家、敌人、子弹等游戏元素。

JavaScript (ES6+)

运用面向对象编程（OOP）思想，创建`Player`, `Enemy`, `Bullet`, `Crystal`等类。
实现游戏主循环（Game Loop），使用`requestAnimationFrame`保证流畅的动画效果。
管理游戏状态（菜单、游戏中、暂停、结束）。
处理键盘输入事件，实现玩家控制。

游戏物理与逻辑

实现基本的碰撞检测算法（Axis-Aligned Bounding Box, AABB）。
设计敌人和物品的生成逻辑，包括随机位置和时间间隔。
开发分数系统和动态难度调整机制。
管理游戏实体的生命周期（创建、更新、销毁）。

UI/UX 设计与交互

设计美观的游戏启动、暂停和结束菜单。
实现游戏状态提示和实时信息显示（分数、难度）。
为按钮和交互元素添加过渡动画，提升用户体验。
确保在不同设备上的可用性和响应性。

开发步骤

项目初始化与环境搭建

创建HTML文件，引入Tailwind CSS和Font Awesome。设置Canvas元素和基本的游戏容器布局。

游戏核心框架设计

定义游戏主对象`game`来存储全局状态（如分数、难度、实体列表）。实现`gameLoop`函数作为游戏的主循环。

游戏实体类创建

使用ES6类语法，分别创建`Player`, `Enemy`, `Bullet`, `Crystal`等类。每个类负责自身的绘制（`render`）和更新（`update`）逻辑。

用户输入与游戏控制

监听`keydown`和`keyup`事件，来控制玩家战机的移动和射击。实现游戏的开始、暂停、继续和重启功能。

碰撞检测与游戏逻辑

实现`checkCollision`函数。在游戏主循环中，检测玩家子弹与敌人、玩家与敌人/晶体之间的碰撞，并执行相应的逻辑（加分、游戏结束）。

动态难度与实体生成

设计敌人和晶体的生成器函数（`spawnEnemy`, `spawnCrystal`），并根据当前分数动态调整生成频率和敌人速度，以实现难度递增。

UI界面与状态管理

开发游戏的开始菜单、结束菜单和HUD。通过控制DOM元素的显示和隐藏来管理不同的游戏状态，并实时更新分数和难度显示。

代码结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星际守护者</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind配置和自定义样式 -->
    <script> /* Tailwind配置 */ </script>
    <style type="text/tailwindcss"> /* 自定义工具类 */ </style>
</head>
<body>
    <div class="container mx-auto px-4 py-8 max-w-5xl">
        <header class="text-center mb-8">
            <!-- 标题和说明 -->
        </header>

        <div class="bg-white rounded-xl p-4 md:p-6 shadow-xl mb-6">
            <div class="flex flex-col items-center">
                <div id="gameStatus">游戏状态提示</div>

                <div class="game-container mb-6">
                    <canvas id="gameCanvas"></canvas>

                    <!-- 开始菜单 -->
                    <div id="startMenu" class="absolute inset-0 ..."> ... </div>

                    <!-- 游戏结束菜单 -->
                    <div id="gameOverMenu" class="absolute inset-0 ... hidden"> ... </div>

                    <!-- 游戏信息 HUD -->
                    <div id="gameHUD" class="absolute top-4 ... hidden"> ... </div>
                </div>

                <div class="flex gap-4">
                    <button id="pauseButton" class="...">暂停</button>
                    <button id="resumeButton" class="...">继续</button>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-xl">
            <!-- 游戏开发指南内容 -->
        </div>
    </div>

    <script>
        // 游戏核心逻辑
    </script>
</body>
</html>

// 1. 获取DOM元素和初始化Canvas
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// ... (其他DOM元素)

// 2. 游戏状态和配置对象
const game = {
    isRunning: false, isPaused: false,
    score: 0, difficulty: 1,
    player: null, enemies: [], bullets: [], crystals: [], fireworks: [],
    // ... (其他游戏配置)
};

// 3. 游戏实体类定义
class Player { /* ... */ }
class Enemy { /* ... */ }
class Bullet { /* ... */ }
class Crystal { /* ... */ }
class Firework { /* ... */ }

// 4. 游戏核心函数
function initGame() { /* ... */ }
function startGame() { /* ... */ }
function togglePause() { /* ... */ }
function gameLoop() { /* ... */ }
function updateGame() { /* ... */ }
function renderGame() { /* ... */ }
function drawStars() { /* ... */ }
function checkCollisions() { /* ... */ }
function isColliding(a, b) { /* ... */ }
function spawnEnemy() { /* ... */ }
function spawnCrystal() { /* ... */ }
function gameOver() { /* ... */ }
function hexToRgb(hex) { /* ... */ }

// 5. 事件监听和UI控制
function handleKeyDown(e) { /* ... */ }
function handleKeyUp(e) { /* ... */ }
function toggleCode(id) { /* ... */ }

// 6. 初始化
window.addEventListener('load', () => { /* ... */ });
window.addEventListener('resize', resizeCanvas);

@layer utilities {
    .btn-effect {
        transition: all 0.3s ease;
    }
    .btn-effect:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .game-container {
        position: relative;
        width: 100%;
        height: 500px;
        background-color: #0F172A; /* 深邃的太空背景 */
        border-radius: 0.75rem; /* 12px */
        overflow: hidden;
    }
}

/* 可以在这里添加更多自定义组件样式 */