开心游戏屋

面向儿童与家庭的纯前端小游戏合集：一个入口页按「反应 / 记忆 / 益智 / 棋类 / 学习 / 单词」分类展示，零构建、零依赖，用浏览器打开即可玩。

• 仓库： https://github.com/encoreshao/games
• 在线演示： https://game.icmoc.com
• 反馈问题： GitHub Issues
• 关于作者： Encore Shao · icmoc.com

特性

• 38 款小游戏：反应闯关、记忆专注、益智动脑、棋盘对战、边玩边学、单词闯关
• 零构建：无框架、无打包，静态文件直接部署
• 触控友好：适配手机与平板；棋盘类在笔记本最大化时也会放大到舒适尺寸
• 本机存档：最高分、偏好设置存在 localStorage（可一键清除）
• 统一壳层：共享字体、顶栏、设置 / 帮助面板、首次提示
• 易扩展：新游戏三个文件 + 一条目录配置即可上架

快速开始

环境要求

• 现代浏览器（Chrome / Firefox / Safari / Edge 近两年版本）
• 可选：Node.js（仅用于本地静态服务器）或 Python 3

本地运行

git clone https://github.com/encoreshao/games.git
cd games

# 任选一种静态服务器
npx --yes serve .
# 或
python3 -m http.server 8080

浏览器打开提示地址（如 http://localhost:3000 或 http://localhost:8080）。

也可直接双击打开 index.html。部分浏览器对本地路径更严格，推荐用静态服务器。

怎么选游戏

1. 首页顶部切换分类：全部 / 反应闯关 / 记忆专注 / 益智动脑 / 棋盘对战 / 边玩边学 / 单词闯关
2. 卡片上有一句话玩法与能力标签（如记忆、策略）
3. 「全部」按分类分区；也可点「只看这类」缩小范围

游戏一览

反应闯关

游戏	路径	简介
打地鼠	games/mole/	限时敲打
零食雨	games/catch/	接零食躲障碍
打砖块	games/breakout/	弹球消砖
屋顶冲刺	games/runner/	跑酷跳跃
贪吃蛇	games/snake/	经典蛇行
火柴人挂钩	games/stickhook/	挂钩荡秋千
湖畔抛竿	games/fishing/	抛竿收线
气球派对	games/balloon/	戳目标色气球

记忆专注

游戏	路径	简介
记忆翻牌	games/memory/	翻牌配对
颜色节奏	games/simon/	跟灯顺序
迷宫探险	games/maze/	走出迷宫
找不同	games/spot/	找出异样图案
数字点点	games/numtap/	按序点数字
谁不一样	games/oddone/	分类找异类
跟色点点	games/colortap/	按提示点颜色

益智动脑

游戏	路径	简介
2048	games/merge2048/	滑动合并数字
数字华容道	games/sliding/	滑动拼图
四宫数独	games/sudoku/	入门数独
关灯挑战	games/lights/	点格关灯
汉诺塔	games/hanoi/	挪盘叠塔
扫雷入门	games/mines/	翻格避雷
倒水排序	games/watersort/	同色倒进一瓶

棋盘对战

游戏	路径	简介
四子棋	games/connect4/	连成四子
五子连珠	games/gomoku/	连成五子
围棋对弈	games/weiqi/	9 / 13 / 19 路
井字棋	games/tictactoe/	连成三子
黑白棋	games/reversi/	翻转比多
点格棋	games/boxes/	连边占格

边玩边学

游戏	路径	简介
拼音认读	games/pinyin/	看字选拼音
汉字组词	games/hanzi/	组词填空
乘法口诀	games/timestable/	小九九
单位换算	games/units/	米克时换算
古诗填空	games/poetry/	名句填空
口算冲刺	games/mathrush/	限时口算

单词闯关

按学段分入口，共用 games/vocab/，用 ?stage= 锁学段与玩法。课标规模词库约：小学 800 / 初中累计 2500 / 高中累计 4500 / 四级 5500 / 六级 6500 / 考研约 8000。

游戏	路径	简介
小学单词	games/vocab/?stage=primary	听音、翻卡、泡泡认词
初中单词	games/vocab/?stage=junior	配对、拼写冲刺
高中单词	games/vocab/?stage=senior	限时、近义干扰
大学单词	games/vocab/?stage=college	四级、六级与考研

益智与棋类游戏提供 设置、帮助 与首次进入提示（shared/panels）。

目录结构

games/
├── index.html                 # 首页入口
├── README.md
├── LICENSE                    # MIT
├── scripts/
│   └── deploy.sh              # 可选：rsync 部署到服务器
├── shared/
│   ├── catalog.js             # 游戏目录（分类、文案、链接）
│   ├── hub.js / hub.css       # 首页逻辑与样式
│   ├── chrome.css             # 游戏页公共布局与棋盘尺寸变量
│   ├── panels.js / panels.css # 设置 / 帮助 / 首次提示
│   ├── storage.js             # 统一 localStorage
│   ├── fonts.css + fonts/     # 本地字体
│   ├── vendor/                # 可选第三方库（本地托管，零构建）
│   │   └── three/             # three.js（火柴人挂钩）
│   └── logo* / favicon*       # 品牌资源
└── games/
    └── <id>/
        ├── index.html
        ├── style.css
        └── game.js            # 部分游戏另有 sounds.js 等

技术说明

项目	说明
栈	原生 HTML / CSS / JavaScript
构建	无；静态托管即可（Nginx、GitHub Pages、任意 CDN）
状态	localStorage，键名 wg:<gameId>:<key>（见 shared/storage.js）
棋盘尺寸	--game-board-size（shared/chrome.css），笔记本最大化时与 2048 对齐放大
3D	「火柴人挂钩」使用本地托管的 Three.js（shared/vendor/three/，r160 UMD）
音效	Web Audio 合成（如 2048、单词闯关），无需外部音频文件
缓存	静态资源用 ?v= 查询参数做版本刷新

新增游戏

1. 在 games/<id>/ 创建 index.html、style.css、game.js

2. 引入共享样式与脚本，例如：

   <link rel="stylesheet" href="../../shared/fonts.css?v=1" />
   <link rel="stylesheet" href="../../shared/chrome.css?v=4" />
   <link rel="stylesheet" href="../../shared/panels.css?v=3" />
   <script src="../../shared/storage.js?v=1"></script>
   <script src="../../shared/panels.js?v=2"></script>

3. 在 shared/catalog.js 追加一条配置（name、desc、how、skills、category、href、theme、preview）

4. 如需新的卡片预览，在 shared/hub.css 增加对应 .preview 主题

5. 益智 / 棋类建议接入 panels（设置、帮助、首次提示）

6. 方形棋盘使用 width: var(--game-board-size)，与现有游戏保持一致

7. 修改共享资源后，提高首页或游戏页对应文件的 ?v= 版本号

部署

本仓库是静态站点，上传整个项目根目录即可。仓库内提供可选脚本：

# 依赖本机 ~/.deploy/config.json（服务器 host / user 等）
scripts/deploy.sh
# 或指定服务器别名
scripts/deploy.sh --server icmoc

脚本通过 rsync 同步到远程 web_root/games/current/，并排除 .git、scripts 等。若你使用 GitHub Pages / Cloudflare Pages / Netlify，将发布目录设为仓库根目录即可，无需该脚本。

反馈与关于

遇到 Bug、想要新游戏，或词库有误，请到 Issues 反馈：

• 报告问题 / 提建议： 新建 Issue
  （也可浏览 Issues 列表）
• 关于作者： Encore Shao (@encoreshao) · 个人站 icmoc.com

提 Issue 时尽量写清：游戏名称、设备 / 浏览器、复现步骤，以及期望结果。

贡献

欢迎 Issue 与 Pull Request。建议流程：

1. Fork encoreshao/games 并创建分支：git checkout -b feature/my-game
2. 本地用静态服务器自测手机宽度与桌面最大化
3. 保持改动聚焦；新增游戏请更新 catalog.js
4. 提交说明写清「为什么」；PR 里附上自测清单（浏览器 / 设备）

约定

• 中文文案面向儿童，简短清楚
• 游戏相互独立，避免跨游戏强耦合
• 不要提交密钥、本机部署配置或 .env
• 大图与字体尽量放在 shared/，便于复用

路线图（可选）

• 单词闯关按学段分入口与玩法
• 课标规模词库（小学800 / 初中2500 / 高中4500 / 四级5500 / 六级6500 / 考研≈8000）
• 更多学习类关卡与词库
• 统一音效开关与无障碍增强
• PWA / 离线缓存（可选）

License

本项目采用 MIT License。

你可以自由使用、修改与分发；衍生作品请保留版权与许可声明。游戏玩法多为经典规则的教学向实现，品牌名「开心游戏屋」与仓库内 Logo 资源随项目一并提供。

致谢

感谢经典休闲与益智玩法带来的灵感，以及开源字体（如 Fredoka、站酷快乐体）对儿童界面可读性的帮助。