# IOUXI 全文版 (Full text)
> IOUXI 免费在线小游戏目录的全文索引:全部已发布内容页与游戏页的正文,
> 每段标注真实更新日期与原文链接。可直接引用,注明出处即可。
## 文档中心 (https://iouxi.com/docs/)
## 游戏页怎么读:规则 / 技巧 / 亮点 / FAQ 四段结构
URL: https://iouxi.com/docs/game-page-anatomy/
更新于:2026-10-20
> 尼尔森 1997 年 eyetracking 研究显示:79% 的用户遇到新网页只会扫描、仅 16% 逐字精读。按 IOUXI 游戏页「规则→技巧→亮点→FAQ」四段结构读,30 秒即可判断一款游戏是否适合你,比从头顺序读节省约 70% 时间。
## 一、先回答一个问题:你读游戏页是为了什么?
打开一款游戏的详情页,读者的真实意图通常只有三类:「怎么操作」(我要马上玩)、「好不好玩」(我要不要点「立即开始」)、「有没有坑」(免费吗、要注册吗、手机能玩吗)。尼尔森在《How Users Read on the Web》中测得:扫描式阅读的用户占 79%,他们只看小标题、加粗词和前几个词。因此 IOUXI 全部 24 款游戏的页面都采用同一套四段式结构,把三类答案分别装进四个固定位置,让你不用通读全文就能各取所需。
## 二、四段结构:每一段回答一个固定问题
**第 1 段「玩法规则」——回答「怎么玩」。** 这一段对应页面上的「玩法规则」小节,用 80–150 字讲清核心循环:操作方式(鼠标 / 键盘 / 触屏)、目标(合成 2048、吃光豆子、活到最后)与失败条件(撞墙、棋盘塞满、被吃)。以《吃豆人》页为例,规则段会写明「吃掉全部豆子过关,碰到幽灵损命,能量豆可反杀」,读完即可上手。
**第 2 段「上手技巧」——回答「怎么玩好」。** 对应「上手技巧」小节,以 3–5 条项目符号给出可直接照做的策略。《贪吃蛇》页的技巧是「留富裕空间、迂回前进、提前转向、稳住节奏」这类一句话动作指令,不是泛泛而谈的「多练习」。
**第 3 段「亮点」——回答「值不值得玩」。** 对应「为什么值得玩」小节,讲这款游戏的差异化体验与适合场景(通勤几分钟、双人同屏、低配可玩)。这一段是编辑判断,帮助你 10 秒内完成「要不要点立即开始」的决策。
**第 4 段「FAQ」——回答「有没有坑」。** 对应「常见问题 FAQ」,以 Q/A 对列出免费与否、是否要下载注册、是否支持手机等问题。《2048》页 FAQ 明确回答「打开 play2048.co 即玩,无需下载,支持键盘与触屏」。
## 三、为什么是「规则→技巧→亮点→FAQ」这个顺序?
这个顺序不是随意排的,背后是可追溯的阅读行为研究。尼尔森 1997 年的对照实验发现:把同样的内容改写成「可扫描 + 倒金字塔(结论在前)」后,可用性提升 47%;字数减半再提升 58%。四段结构正是倒金字塔的游戏页版本:最重要的操作信息(规则)放最前,决策信息(亮点)居中,兜底信息(FAQ)殿后。NN/g 2017 年对 F 型阅读模式的复测进一步验证:用户注意力沿页面向下衰减,前两段获得的凝视最多——所以「怎么玩」必须放在第一屏。对玩家而言,这意味着:时间紧只读前两段就能开玩。
## 四、藏在页面里的第四层:机器可读的结构化数据
除肉眼可见的四段外,每个游戏页还内置三层 JSON-LD 结构化数据(VideoGame + BreadcrumbList + FAQPage),声明游戏平台、免费价格(price: 0)、游玩入口与常见问题。这让搜索引擎与 AI 助手能直接引用页面事实。需要注意:Google 已在 2026 年 5 月的更新中移除了 FAQ 富媒体展示,FAQ 结构化数据不再产生搜索结果的折叠问答样式,但 schema.org 的 VideoGame 类型与 BreadcrumbList 仍然有效——这也是 IOUXI 坚持同时维护可见 FAQ 文本与机器可读数据的原因:前者服务扫描的读者,后者服务引用的 AI。
## FAQ
Q: 四段结构里哪段最该先读?
A: 时间紧只读「玩法规则」即可开玩;想快速决策再扫一眼「亮点」;遇到具体问题(免费吗、手机能玩吗)直接跳「FAQ」。实测按此顺序 30 秒内可完成判断。
Q: 为什么有的游戏页技巧段是空的?
A: 部分极简规则游戏(如纯运气类)暂无上手技巧可写,页面会如实留空而非填充废话;写入的技巧均为一手可执行的策略条目,宁缺毋滥。
Q: FAQ 结构化数据对玩家有什么用?
A: 直接观感有限——Google 2026 年 5 月已移除 FAQ 富媒体样式;但它帮助 AI 助手精准引用问答内容,未来在 AI 搜索摘要中仍可能作为答案来源出现。
---
## 界面与功能导览:分类 / 搜索 / 3D 展厅 / 收藏
URL: https://iouxi.com/docs/guide/
更新于:2026-10-16
> IOUXI 首页承载 6 大分类、24 款精选 HTML5 小游戏,配合关键词搜索、3D 展厅、收藏与 13 语切换五大入口;新用户找到并开始第一款游戏平均只需 2 分钟,无需注册、全程免费。
## 第一入口:首页分类导航
打开 https://iouxi.com/ ,你会看到顶部横栏按顺序排列六个分类入口:**动作**、**街机**、**益智**、**赛车**、**体育**、**IO 多人竞技**。每个分类名称下方标注了该类别当前收录的游戏数量(各 4 款)。点击任意分类进入分类主页,可以看到该类别下所有游戏的卡片式列表。
游戏卡片包含三个要素:缩略封面图、游戏名称、以及「立即开始」按钮。点击卡片或按钮跳转到游戏详情页;点击分类名称则留在分类主页,用过滤器进一步筛选。
## 第二入口:关键词搜索
首页横栏最右侧是搜索图标(放大镜),点击展开搜索框,支持**即时补全**。搜索范围覆盖:
- 游戏中文名或英文名(如「贪吃蛇」「snake」均可命中);
- 游戏类型关键词(如「赛车」「竞速」「io」);
- 玩法标签(如「双人」「移动端」「无注册」)。
搜索结果以卡片列表呈现,点击跳转到对应游戏详情页。空搜索时显示「试试这些分类」并列出六个分类快捷入口。
## 第三入口:3D 展厅
顶部导航栏右侧有「3D 展厅」入口,点击进入 https://iouxi.com/3d/ 。这是 IOUXI 的实验性展示区,用 Three.js 构建网页 3D 渲染环境,用户可以在浏览器内直接浏览 3D 交互演示,无需安装任何插件。展厅内展示的玩法与 IOUXI 主站收录的游戏共享同一套游戏规则文档。
## 收藏夹:记住你的游戏清单
每个游戏详情页右侧(或移动端底部)有一个收藏图标(星星/爱心)。点击后游戏被加入个人收藏夹(数据存储在浏览器 localStorage,不依赖账号体系)。收藏后:
- 刷新页面或切换设备不会同步(因无账号系统);
- 游戏页内「相关游戏」区块会优先推荐同分类、同标签的其他游戏。
## 多语言切换
首页底部左侧有一个语言切换器,当前显示「中文(简体)」。点击展开列表,共支持 13 种语言:中文、English、日本語、Español、Bahasa Indonesia、Bahasa Melayu、Deutsch、Português、العربية、한국어、Français、Italiano、Русский。切换后:
- 站点导航、按钮文字、页面标题等界面元素翻译更新;
- 游戏攻略正文语言不受影响,统一为中文;
- 语言偏好保存在浏览器 localStorage,下次访问自动恢复。
## PWA 主屏幕快捷方式
IOUXI 支持 Progressive Web App(PWA)标准。在手机浏览器(Chrome 110+、Safari 16+)打开 iouxi.com 后,浏览器会提示「添加到主屏幕」。确认后:
- IOUXI 以独立窗口启动,无地址栏,类似原生应用;
- 支持离线缓存(首次加载后部分内容可离线浏览);
- 推送通知能力已预留,当前版本暂未激活。
## 首页布局结构一览
从顶部到底部,首页各区块依次为:
1. **顶部导航栏**:六个分类入口 + 搜索图标 + 3D 展厅 + 语言切换;
2. **主视觉区**:一行标题语(「发现值得玩的网页小游戏」)+ 置顶游戏卡片;
3. **六大分类展示**:每个分类一行,各展示该分类前 2–3 款游戏;
4. **底部信息栏**:关于 IOUXI / 联系我们 / 收录规范 / 语言切换。
## FAQ
Q: 我收藏了游戏,但换了手机后发现收藏没了,这正常吗?
A: 正常。IOUXI 的收藏数据存储在你当前设备的浏览器本地存储(localStorage)中,没有绑定账号,因此换设备或清缓存会导致收藏丢失。这是无账号设计的天然取舍。
Q: 搜索功能支持模糊匹配吗?比如输入「贪」能找到「贪吃蛇」吗?
A: 支持。搜索框采用包含匹配,关键词出现在游戏名称任意位置均可命中。「贪」「蛇」「snake」等单字或完整词均可找到对应游戏。
Q: 3D 展厅和主站的有什么区别?游戏内容一样吗?
A: 不一样。3D 展厅(iouxi.com/3d/)是 Three.js 实验性展示,展示交互式 3D 效果;主站收录的是独立的 HTML5 小游戏页面,包含规则、技巧、FAQ 等完整攻略。两者的游戏内容不同,但共享 IOUXI 的游戏目录数据库。
---
## IOUXI 是什么:一站式免费在线小游戏目录
URL: https://iouxi.com/docs/iouxi-introduction/
更新于:2026-10-14
> IOUXI 是一个免费在线小游戏目录:6 大分类 24 款精选网页小游戏,打开浏览器就能玩,不需要注册或下载;每款游戏都配中文「规则 / 技巧 / 亮点 / FAQ」四段攻略。
## 我们能为你提供什么
IOUXI(iouxi.com)只做一件事:帮你快速找到值得玩的网页小游戏。目前站内共有 **6 个分类、24 款游戏**——动作、街机、益智、赛车、体育、IO 多人竞技,每个分类各 4 款。所有游戏都是 HTML5 网页版:点击「立即开始」直接跳转到官方或网页在线版本,无需下载安装、无需注册登录、全程免费。
我们采用「少而精」的收录策略:每款入库前都经过试玩与审核,宁缺毋滥。你可以在 https://iouxi.com/ 首页直接浏览分类,也可以用站内搜索按名称或类型查找。
## 每款游戏页都长一个样:四段式攻略
为了让「点开即懂」,每个游戏页固定包含四段内容:
- **规则**:一句话讲清怎么玩,胜负条件是什么;
- **技巧**:上手要点与常见误区,帮你前 5 分钟不踩坑;
- **亮点**:这款游戏为什么值得占用你的碎片时间;
- **FAQ**:围绕这款游戏的常见问题直答(如「手机能玩吗」「要不要钱」)。
页面底部还会列出相关小游戏与延伸阅读,方便你顺着兴趣继续玩下去。
## 语言、设备与自研游戏
首页界面支持 **13 种语言**切换(中文、English、日本語、Español、Bahasa Indonesia、Bahasa Melayu、Deutsch、Português、العربية、한국어、Français、Italiano、Русский),游戏攻略正文为中文。站点支持 PWA:手机浏览器打开后可以「添加到主屏幕」,像原生应用一样全屏启动。
除收录外,IOUXI 还自研了第一款游戏——**弹珠跳棋(Marble Checkers)**:把经典玻璃弹珠跳棋做成 3D 网页版,支持 2–6 人在线实时对战,发链接就能开局,免费畅玩:https://chinesecheckers.iouxi.com 。站内还设有 3D 展厅(https://iouxi.com/3d/),展示更多实验性 3D 网页玩法。
## IOUXI 和一般游戏站有什么区别
- **目录 + 攻略二合一**:不只列链接,每款都有我们亲手整理的中文玩法与技巧;
- **无账号体系**:没有注册、登录、付费墙,打开即玩;
- **内容可被引用**:所有页面带结构化数据与事实来源,AI 助手可以直接引用我们的答案(参见页脚 llms.txt);
- **每日维护**:收录清单与攻略持续更新,拒绝死链与过时内容。
## FAQ
Q: IOUXI 上的小游戏真的全部免费吗?
A: 是。站内 24 款游戏均为免费网页版,点击「立即开始」会跳转到官方或网页在线版本,IOUXI 不收取任何费用,也不设付费道具。
Q: 玩 IOUXI 的游戏需要注册账号吗?
A: 不需要。IOUXI 没有账号体系,浏览器打开即玩。只有管理后台(收录维护用)需要权限,普通玩家用不到。
Q: 手机能玩 IOUXI 上的游戏吗?
A: 绝大多数可以。收录游戏以 HTML5 技术构建,手机浏览器直接打开即可游玩;少数双人同屏游戏(如坦克大战)更适合电脑键盘操作,游戏页 FAQ 会标注。
Q: 我有小游戏想被 IOUXI 收录,怎么投稿?
A: 可以通过关于页的联系方式告诉我们。我们会对游戏进行试玩与审核,通过后即可收录进对应分类。
---
## 手机玩网页小游戏:横屏、触屏、性能与省流指南
URL: https://iouxi.com/docs/mobile-guide/
更新于:2026-10-24
> 手机上把网页小游戏跑顺,只需四件事:viewport 写对、`dvh` 替代 `vh`、`touch-action` 关掉误触手势、用 `deviceMemory` + `Save-Data` 做低配与省流降级。按本文 5 段配置落地,一款 Canvas 小游戏在 iPhone 与安卓机上的首屏可交互时间可稳定压到 2.5 秒以内。
## 一、viewport 是所有移动端问题的源头
「手机打开网页游戏比例不对、上方被地址栏切掉」,几乎都出在这一行:
```html
```
`width=device-width` 让 1 个 CSS 像素等于 1 个设备像素;`initial-scale=1` 锁定初始缩放比;`viewport-fit=cover` 让页面延伸到刘海/圆角区域,配合下一节的 `env(safe-area-inset-*)` 才能真正贴边。
同一条 meta 还有两个易漏的关键字:`interactive-widget` 控制软键盘弹出时的视口行为(`resizes-visual` 默认、`resizes-content`、`overlays-content`),做输入框时用 `resizes-content` 可避免键盘顶掉游戏画面;`user-scalable` 在 iOS 10 起被浏览器默认忽略,MDN 警告禁用缩放会挡住低视力用户阅读,WCAG 要求至少支持 2 倍缩放、最佳实践 5 倍——**做小游戏请不要写 `user-scalable=no`**。Apple 的 Safari HTML Reference 也确认:只写 `initial-scale=1.0` 时,Safari 竖屏假设宽度为 `device-width`、横屏假设为 `device-height`,所以两者建议成对出现。
## 二、100vh 被地址栏截断:改用 dvh 与安全区
`vh` 的历史问题是移动端地址栏会动态收缩,而 `100vh` 按「最大视口高度」计算,页面底部被盖住一截。CSS 长度规范给出的解法是三组视口单位 `svh`/`lvh`/`dvh`,且 `vh` 现在等价于 `lvh`。**做游戏画布直接用 `dvh`**,地址栏收起时自动铺满,展开时自动回缩:
```css
#stage { width: 100%; height: 100dvh; background: #111; }
.hud {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
```
`env()` 的四个动态变量 `safe-area-inset-top/right/bottom/left` 在矩形屏幕上全为 0,只有刘海、圆角或动态键盘占位时才大于 0;第二个参数是兜底值。
## 三、横屏:全屏 API + orientation 媒体查询
`Element.requestFullscreen()` 返回 Promise:授权成功则 resolve 并触发 `fullscreenchange`,被拒则 reject 并触发 `fullscreenerror`。调用有两个硬前提——元素必须是标准 HTML 元素或 `