基于 HTML5+CSS3+JavaScript 的高木同学圣诞树 GalGame 开发

这种设计让调试变得容易，任何状态变化都能触发对应的界面更新。

2. 场景与对话系统

场景数据采用 JSON 格式，每个节点包含角色、文本、表情及可选分支。

const scenarios = {
    0: {
        character: "高木同学",
        text: "西片君，圣诞快乐！你想知道我为你准备了什么特别的礼物吗？",
        expression: "normal",
        choices: [
            { text: "当然想知道！", next: 1 },
            { text: "高木同学，你又想捉弄我了吧？", next: 2 },
            { text: "我也有礼物要送给你...", next: 3 }
        ]
    },
    1: {
        character: "高木同学",
        text: "呵呵，西片君还是这么直接呢～那你就先闭上眼睛，数到 10 哦～",
        expression: "teasing",
        choices: [
            { text: "真的闭上眼睛数数", next: 4 },
            { text: "偷偷看看高木同学在做什么", next: 5 }
        ]
    }
};

3. 动态按钮与事件处理

在生成选项按钮时，事件绑定是关键。虽然可以使用 addEventListener，但在动态 DOM 插入的场景下，内联 onclick 往往更可靠，或者配合事件委托。

function updateChoices(choices) {
    const container = document.getElementById('choicesContainer');
    container.innerHTML = '';
    choices.forEach((choice, index) => {
        const button = document.createElement('button');
        button.className = 'choice-btn';
        button.textContent = `${index + 1}. ${choice.text}`;
        // 内联 onclick 确保动态元素也能响应
        button.setAttribute('onclick', `makeChoice(${index + 1})`);
        container.appendChild(button);
    });
}

function makeChoice(choiceIndex) {
    console.log('玩家选择了选项:', choiceIndex);
    const scene = scenarios[gameData.currentScene];
    const choice = scene.choices[choiceIndex - 1];
    
    if (choice) {
        gameData.playerChoices.push({
            scene: gameData.currentScene,
            choice: choiceIndex,
            text: choice.text,
            timestamp: Date.now()
        });

        if (choice.next && scenarios[choice.next]) {
            setTimeout(() => showScene(choice.next), 300); // 添加过渡延迟
        } else {
            showEnding();
        }
    }
}

4. 角色表情显示

为了兼容不同环境，我们实现了图片优先、Emoji 兜底的策略。

function updateCharacterDisplay(expression) {
    const displayElement = document.getElementById('characterDisplay');
    const imagePath = gameData.images[expression];

    if (gameData.useImages && imagePath) {
        const img = document.createElement('img');
        img.className = 'character-image';
        img.src = `images/${imagePath}`;
        img.alt = '高木同学';
        
        img.onload = () => {
            displayElement.innerHTML = '';
            displayElement.appendChild(img);
        };
        img.onerror = () => {
            // 图片加载失败自动降级为 Emoji
            displayElement.innerHTML = `<div>${gameData.emojis[expression]}</div>`;
        };
    } else {
        displayElement.innerHTML = `<div>${gameData.emojis[expression]}</div>`;
    }
}

界面设计与响应式布局

紧凑布局

采用左右分屏设计，确保信息在一屏内完整展示。

.game-main {
    flex: 1;
    display: flex;
    padding: 20px;
    gap: 20px;
    max-height: calc(100vh - 120px);
}

.character-section {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dialogue-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 15px;
}

移动端适配

针对小屏幕设备，切换为上下布局并调整字体大小。

@media (max-width: 768px) {
    .game-main {
        flex-direction: column;
        padding: 10px;
    }
    .character-section {
        flex: 0 0 200px;
        width: 100%;
    }
    .character-emoji {
        font-size: 80px;
    }
}

视觉动效

增加按钮悬停光波效果和角色浮动动画，提升沉浸感。

.choice-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.choice-btn:hover:before {
    left: 100%;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

开发难点与解决方案

1. 动态元素事件绑定

动态生成的按钮有时无法正确响应点击。除了内联 onclick，还可以使用事件委托作为备选方案。

// 事件委托方案
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('choice-btn')) {
        const choice = parseInt(e.target.dataset.choice);
        if (choice) makeChoice(choice);
    }
});

2. 本地文件加载限制

直接在浏览器打开 HTML 文件（File://协议）可能因同源策略导致图片无法加载。建议使用本地 HTTP 服务器运行项目。

Windows 启动脚本示例：

@echo off
chcp 65001 >nul
python -m http.server 8000
start http://localhost:8000
pause

3. 存档功能实现

利用 localStorage 保存游戏进度，支持导出导入。

function saveGame() {
    const saveData = {
        currentScene: gameData.currentScene,
        playerChoices: gameData.playerChoices,
        timestamp: new Date().toISOString()
    };
    localStorage.setItem('takagiChristmasSave', JSON.stringify(saveData));
}

function loadGame() {
    const data = localStorage.getItem('takagiChristmasSave');
    if (data) {
        const parsed = JSON.parse(data);
        gameData.currentScene = parsed.currentScene;
        showScene(gameData.currentScene);
    }
}

性能优化与用户体验

代码优化

• 防抖处理：防止重复点击导致逻辑错误。
• 图片预加载：初始化时异步加载所有资源，减少运行时卡顿。

function preloadImages() {
    const promises = Object.values(gameData.images).map(path => {
        return new Promise((resolve) => {
            const img = new Image();
            img.onload = resolve;
            img.onerror = resolve; // 失败也不阻塞
            img.src = `images/${path}`;
        });
    });
    Promise.all(promises).then(() => console.log('资源加载完成'));
}

键盘快捷键

支持数字键选择及 Ctrl+S/L 进行存档/读档。

document.addEventListener('keydown', function(e) {
    if (e.key >= '1' && e.key <= '3') makeChoice(parseInt(e.key));
    if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveGame(); }
    if (e.ctrlKey && e.key === 'l') { e.preventDefault(); loadGame(); }
});

部署与运行指南

本地开发

推荐使用 Python 或 Node.js 启动本地服务器，避免 File://协议限制。

# Python
python -m http.server 8000
# Node.js
npx http-server -p 8000

生产环境

可部署至 GitHub Pages 或使用 Nginx 托管。Nginx 配置中建议开启 Gzip 压缩并设置静态资源缓存策略。

server {
    listen 80;
    root /path/to/game;
    gzip on;
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 1y;
    }
}

总结与展望

通过这个项目，我们实践了从状态管理到 UI 渲染的完整流程。纯前端技术栈足以支撑中等规模的交互式叙事游戏。

未来可以进一步探索 WebAssembly 优化计算密集型逻辑，或集成 PWA 实现离线安装体验。对于开发者而言，掌握原生 JS 与 CSS 的底层能力，比单纯依赖框架更能写出高性能的代码。

希望这个案例能为你的 Web 游戏开发提供有价值的参考。