🎮 小游戏中心

August 21, 2026 · View on GitHub

一个轻量、工程化的开源小游戏合集：五子棋 / 2048 / 扫雷 / 贪吃蛇 / 井字棋 / 记忆翻牌 / 俄罗斯方块 / 数独。

左侧目录树切换游戏，右侧即开即玩；纯前端、无后端依赖、支持手机与桌面。

Vite License

✨ 特性

  • 🕹️ 8 款小游戏：五子棋（人机 / 双人）、2048、扫雷、贪吃蛇、井字棋（minimax 完美 AI）、记忆翻牌、俄罗斯方块、数独（生成器/求解器/唯一解）
  • 🧠 双 AI：五子棋（攻防评分 + 双威胁「叉」+ 2 层前瞻）、井字棋（minimax 完美博弈，先手必胜/后手不败）
  • 🗂️ 游戏中心框架：hash 路由（#/gomoku）、游戏生命周期管理、localStorage 记忆上次游戏
  • 📱 响应式：桌面侧边栏布局，窄屏自动收成顶部横向导航，触屏目标 ≥ 44px、刘海屏安全区
  • 🧪 工程化：Vite 构建、Vitest 单元测试（8 个游戏引擎全覆盖）、纯逻辑与 UI 分离、GitHub Actions 自动部署

🚀 快速开始

需要 Node.js ≥ 18。

npm install
npm run dev        # 开发模式，默认 http://localhost:5173

构建与预览

npm run build      # 产物输出到 dist/
npm run preview    # 本地预览构建产物

测试

npm test           # 运行全部单元测试（Vitest）

🌐 部署到 GitHub Pages

本项目产物为纯静态文件，且已配置 base: './'（相对路径）与 hash 路由， 部署到 GitHub Pages 的项目页子路径（https://<用户名>.github.io/<仓库名>/）下无需任何额外配置。

方式一：GitHub Actions 自动部署（推荐）

仓库已内置 .github/workflows/deploy.yml：

  1. 把代码推送到 GitHub 仓库（默认分支 main）
  2. 进入仓库 Settings → Pages，在 "Build and deployment" 中把 Source 选为 GitHub Actions
  3. 推送即自动触发构建 + 测试 + 部署；也可在 Actions 页面手动触发（workflow_dispatch）
  4. 首次部署成功后访问 https://<用户名>.github.io/<仓库名>/

方式二：手动推送 dist 到 gh-pages 分支

npm run build
git add dist -f
git commit -m "deploy: build site"
git subtree push --prefix dist origin gh-pages

然后在 Settings → Pages 中把 Source 选为 Deploy from a branch → gh-pages。

💡 由于使用 hash 路由（#/gomoku），刷新页面与分享深链均不会 404，无需额外配置重定向规则。

🗂 项目结构

game-center/
├── index.html                 # 入口 HTML
├── vite.config.js             # Vite / Vitest 配置
├── public/
│   └── favicon.svg
└── src/
    ├── main.js                # 应用入口
    ├── style.css              # 全局样式与布局
    ├── core/
    │   └── game-manager.js    # 游戏中心：目录树、hash 路由、生命周期
    ├── games/                 # 每个游戏一个目录
    │   ├── index.js           # 游戏注册表（新增游戏在此登记）
    │   ├── gomoku/            # 五子棋
    │   │   ├── engine.js      #   纯逻辑：棋盘、判胜、AI（可单测）
    │   │   ├── engine.test.js #   单元测试
    │   │   ├── render.js      #   Canvas 渲染
    │   │   ├── index.js       #   UI 挂载入口
    │   │   └── style.css
    │   ├── 2048/              # 2048（engine / index / style / test）
    │   ├── minesweeper/       # 扫雷
    │   ├── snake/             # 贪吃蛇
    │   ├── tic-tac-toe/       # 井字棋（minimax AI）
    │   ├── memory/            # 记忆翻牌
    │   ├── tetris/            # 俄罗斯方块
    │   ├── sudoku/            # 数独
    │   └── games/index.js

➕ 如何新增一个游戏

  1. 在 src/games/ 下新建目录，例如 src/games/tic-tac-toe/
  2. 实现游戏入口，导出统一接口：
// src/games/tic-tac-toe/index.js
import './style.css';

export default {
  id: 'tic-tac-toe',          // 唯一 id，用于路由 #/tic-tac-toe
  name: '井字棋',
  icon: '⭕',
  tagline: '三子连线即胜',
  mount(container) {
    container.innerHTML = '...';
    // 绑定事件、启动循环…
    // 必须返回卸载函数（清理定时器 / 事件监听 / 动画帧）
    return () => { /* cleanup */ };
  }
};
  1. 在 src/games/index.js 注册表中引入并加入数组，即可出现在左侧目录树。

约定：mount(container) 负责构建自己的 DOM 并返回清理函数；切换游戏时由 game-manager.js 调用清理函数并清空容器，因此游戏内部不要泄漏全局监听器。 引擎（纯逻辑）与 UI 分离，便于单元测试。

🧪 测试

四个游戏的引擎均为无 DOM 依赖的纯逻辑模块，由 Vitest 覆盖：

npm test

覆盖要点：五子棋判胜/堵截/2 层前瞻、2048 合并规则（含不级联合并）、扫雷布雷安全区与 flood 展开、贪吃蛇方向/碰撞/成长。

📄 License

MIT