game 迷宫游戏 0手搓代码 纯AI生成 游戏设计

单页面 HTML5 正八边形迷宫游戏设计文档

纯 HTML + CSS + JavaScript（Canvas 2D），无任何外部依赖，单文件部署

Posted by chaoxiaodi on April 18, 2026

玄枢·八维迷阵 — 设计文档

一、游戏概述

类型：单页面 HTML5 正八边形迷宫游戏

主题风格：东方玄学 × 未来科技 × 星空美学

核心玩法：玩家操控灵狐角色从迷宫中心出发，穿越层层嵌套的正八边形迷阵，找到出口逃出迷宫。

技术栈：纯 HTML + CSS + JavaScript（Canvas 2D），无任何外部依赖，单文件部署。

二、迷宫结构

2.1 基础几何

迷宫由多个同心正八边形嵌套构成，上下两边为水平横线（非角朝上）。

1
2
3
4
5
6

顶点排列（从右上角顺时针）：
    ___
   /   \       ← 顶边水平
  /     \
  \     /
   \___/       ← 底边水平

2.2 迷宫单元（Cell）

迷宫空间被划分为：

  • 中心区域：最内层八边形内部，作为单一 cell（起点）
  • 环间走廊：相邻两层八边形之间的空间，按8个边分为8个 cell
  • 总 cell 数 = 1（中心）+ 间隙数 × 8

2.3 墙壁类型

类型 说明 作用
八边形墙（octagonal wall） 八边形某一边上的线段 分隔内外相邻环的同侧 cell
径向墙（radial wall） 连接内外层同一顶点的线段 分隔同一环内相邻侧的 cell

2.4 迷宫生成算法

采用 随机化 Kruskal 算法：

  1. 初始化所有墙壁为”存在”
  2. 将所有可移除的墙壁（内部边）收集为边列表
  3. 随机打乱边列表
  4. 使用 Union-Find 数据结构，依次处理每条边：
    • 若边两侧的 cell 不在同一连通分量 → 移除该墙壁，合并两个分量
    • 否则保留墙壁
  5. 结果：生成一棵覆盖所有 cell + 外部节点的随机生成树（完美迷宫）

2.5 连通性验证

生成后执行 BFS 验证：

  • 从中心 cell 出发，确认所有 cell 和至少一个出口可达
  • 若中心被封闭 → 强制打开一面内层墙
  • 若路径断裂 → 逐层检查并修复封闭环和径向隔断

三、关卡体系

3.1 二级关卡结构

1

大关（Major Level）→ 小关（Minor Level）
大关 基础八边形层数 小关数量 关卡编号范围
第1大关 4层 4 1-1 ~ 1-4
第2大关 5层 6 2-1 ~ 2-6
第3大关 6层 10 3-1 ~ 3-10
第4大关 7层 20 4-1 ~ 4-20
第5大关 8层 50 5-1 ~ 5-50
第6大关 9层 100 6-1 ~ 6-100

总计：190 个关卡

3.2 三参数难度系统

每个关卡的难度由三个参数共同决定：

参数一：环间细分（Subdivision）

核心增难机制。在两个基础八边形层之间插入额外的中间环：

1
2
3

细分=1（默认）：  层A ——————— 层B        → 1个间隙，8个cell
细分=2：          层A — 中间环 — 层B      → 2个间隙，16个cell
细分=3：          层A — 中1 — 中2 — 层B   → 3个间隙，24个cell

效果：视觉上仍是 N 层八边形，但内部 cell 数量翻倍，迷宫复杂度剧增。

上限约束：总环数 ≤ 16（受画布尺寸限制，最小走廊宽度 ≈ 15px）

参数二：额外开口率（Extra Open Rate）

Kruskal 生成树产生完美迷宫（唯一解）后，额外移除一定比例的墙壁：

开口率 效果
25% 大量捷径，多条通路，容易
12% 适量捷径
5% 少量捷径，需要更多探索
0% 纯生成树迷宫，仅唯一解，最难

参数三：出口数量（Exit Count）

外层八边形上的出口数量：

出口数 效果
3 多个逃出方向，容易
2 中等
1 仅一个出口，必须精确找到

3.3 难度曲线

每个大关内，通过进度值 progress = (minor - 1) / (totalMinor - 1) 从 0 到 1 平滑控制：

1
2
3
4
5

progress: 0.0 ────────── 0.35 ────────── 0.6 ────────── 1.0
          │                │               │              │
细分:     1 ──────────── 1 ───── 渐增 ──── maxSubdiv
开口率:   25% ──────── 递减 ─────────────── 0%
出口数:   3 ──────── 2 ──────── 1 ─────── 1

3.4 关卡参数计算公式

1
2
3
4
5
6
7
8
9
10
11
12
13

function getLevelConfig(major, minor) {
  baseLayers = 3 + major                    // 4,5,6,7,8,9
  progress = (minor - 1) / (totalMinor - 1) // 0.0 ~ 1.0

  maxSubdiv = floor(16 / (baseLayers - 1))
  subdivision = 1 + floor(max(0, (progress - 0.35) / 0.65) * (maxSubdiv - 1))

  extraOpenRate = max(0, 0.25 * (1 - progress * 1.1))

  exitCount = progress < 0.25 ? 3 : progress < 0.6 ? 2 : 1

  totalRings = 1 + (baseLayers - 1) * subdivision  // 实际迷宫层数
}

四、操控系统

4.1 键盘控制

方向键 ↑↓←→ 控制移动，支持斜向（两键同时按下自动归一化速度）。

4.2 鼠标/触屏拖拽

在画布上按住拖拽，灵狐朝鼠标/手指方向移动，松开即停。

4.3 移动物理

参数 值 说明
移动速度 150 px/s 基于 delta-time，帧率无关
dt 上限 50ms 防止卡顿后瞬移
子步长 1.5px 每帧拆分多次小步移动，防穿墙
碰撞体积 6px 半径 圆形碰撞体

4.4 碰撞处理

  1. 子步移动：每帧位移拆分为 1.5px 步长
  2. 轴分离滑动：若对角方向被阻挡，尝试单轴滑动
  3. 推出修正：每帧末尾执行 pushOutOfWalls()，若玩家陷入墙壁则自动推出（最多迭代5次）

五、角色设计 — 灵狐

碰撞半径 6px 的迷你角色，Canvas 逐帧绘制：

部位 描述
身体 金色径向渐变圆（亮中心→深边缘）
耳朵 两个三角形，内耳深色
眼睛 白底 + 青色瞳孔（科技感）+ 白色高光点
鼻子 粉色倒三角
尾迹 移动时留下青色光点拖尾（最多12帧历史）
光环 呼吸式脉冲外环（青色，sin波控制透明度）
光晕 外层径向渐变辉光

六、计时系统

  • 进入关卡时开始计时（performance.now()）
  • 实时显示 MM:SS 格式
  • 通关时停止，弹窗显示精确用时（X分X.X秒）
  • 每关独立计时，记录最佳成绩

七、数据持久化（localStorage）

7.1 游戏进度

1
2
3
4
5

Key: "octagon-maze-records"
Value: {
  records: { "1-1": 12.34, "1-2": 45.67, ... },  // 每关最佳用时（秒）
  currentLevel: [major, minor]                      // 当前关卡
}

7.2 排行榜

1
2
3
4
5
6
7
8
9
10

Key: "octagon-maze-leaderboard"
Value: [
  {
    name: "玩家名",
    totalTime: 3842.5,                    // 总用时（秒）
    records: { "1-1": 12.34, ... },       // 每关用时快照
    date: "2026-04-18"                    // 提交日期
  },
  ...
]
  • 按总用时升序排列
  • 最多保留 50 条记录
  • 仅在全部 190 关通关后可提交
  • 重置进度不影响排行榜数据

7.3 存储容量评估

  • 单条排行记录 ≈ 2-3 KB（190个关卡时间 + 元信息）
  • 50条上限 ≈ 150 KB
  • localStorage 容量 5-10 MB，远超所需
  • 局限：仅限本机本浏览器，跨设备需后端支持

八、UI 布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

┌──────────────────────────────────────────────┐
│              玄枢·八维迷阵                     │
│           第 3-7 关    02:15                   │
│    方向键 ↑↓←→ 或鼠标拖拽控制移动              │
├─────────────────────────┬────────────────────┤
│                         │  通关记录            │
│                         │  ▸ 第1大关(4层) 4/4  │
│                         │  ▸ 第2大关(5层) 6/6  │
│       迷宫画布           │  ▾ 第3大关(6层) 6/10 │
│    (最大 800×800px)      │    3-1    00:12     │
│                         │    3-2    00:18     │
│                         │   [3-7]   --:--     │ ← 当前关高亮
│                         │    ...              │
│                         │  ▸ 第4大关(7层) 0/20 │
│                         │  ──────────────     │
│                         │  总用时    12:34     │
│                         │  [排行榜]            │
│                         │  [重置进度]           │
└─────────────────────────┴────────────────────┘
  • 右侧面板高度与画布同步（CSS变量 --canvas-h）
  • 标题/总用时/按钮固定，中间关卡列表独立滚动
  • 大关可折叠展开，显示完成进度（如 6/10）
  • 当前关卡自动滚动到视野内

九、视觉特效

9.1 背景层（独立 Canvas，z-index: -1）

特效 数量 描述
星空闪烁 120颗 不同亮度、频率的明暗交替，模拟深空
粒子网络 60个 青色/金色浮动粒子，靠近时自动连线（距离<150px），科技感
通关烟花 5组/次 通关时触发，40-70个碎片/组，带重力和拖尾，色相随机
排行榜飘字 最多15条 分级特效飘动（见下表）

9.2 排行榜飘字分级特效

排名 字号 颜色 辉光 特殊效果
#1 冠军 26px 粗体 金色脉冲（金↔橙） 强金色辉光 旋转光点光环 + 双层渲染
#2-3 22px 粗体 青色脉冲（亮青↔浅蓝） 中等青色辉光 奖牌前缀
#4-8 17px 粗体 浅蓝色脉冲 柔和蓝色辉光 —
#9-15 14px 粗体 暗灰蓝 无 —

所有飘字共有：波浪漂浮 + 呼吸明暗脉冲 + 屏幕环绕。

9.3 灵狐角色特效

  • 移动拖尾（青色光点，12帧历史）
  • 外层径向辉光
  • 呼吸脉冲光环（sin波透明度）

十、排行榜系统

10.1 提交流程

1

全部190关通关 → 通关弹窗 "查看排行榜" → 输入名字 → 提交 → 排行榜展示

10.2 排行榜界面

  • 表格展示：排名、玩家名、总用时、日期
  • 前三名显示金银铜奖牌
  • 点击任意玩家 → 展开详情页，按大关分组显示每个小关用时
  • 返回按钮回到总榜

10.3 首次加载预置数据

排行榜为空时自动注入8条假数据（青云道人、星辰剑客、CyberFox等），供玩家参考目标。

十一、通关流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

                    ┌─────────────┐
                    │  开始关卡    │
                    │  计时器启动  │
                    └──────┬──────┘
                           │
                    ┌──────▼──────┐
                    │  游戏进行中  │◄──── 重玩本关
                    │  操控灵狐   │
                    └──────┬──────┘
                           │ 走出最外层
                    ┌──────▼──────┐
                    │  通关弹窗    │
                    │  显示用时    │
                    │  最佳记录对比 │
                    └──┬─────┬────┘
                       │     │
              ┌────────▼┐  ┌─▼────────┐
              │ 重玩本关 │  │  下一关   │
              └─────────┘  └────┬─────┘
                                │ 最后一关?
                         ┌──────▼──────┐
                         │  输入名字    │
                         │  提交排行榜  │
                         └──────┬──────┘
                                │
                         ┌──────▼──────┐
                         │  排行榜展示  │
                         └─────────────┘

十二、文件结构

1
2

octagon-maze.html          ← 完整单文件游戏（HTML + CSS + JS）
玄枢·八维迷阵-设计文档.md   ← 本文档

无外部依赖，无构建步骤，浏览器直接打开即可运行。

十三、移动端适配

13.1 响应式布局

通过 @media (max-width: 768px) 断点实现桌面端与移动端的布局切换：

元素 桌面端 移动端
整体布局 Canvas + 右侧面板横排 Canvas + 面板纵向堆叠
Canvas 尺寸 min(视口宽-250, 视口高-120, 800) px min(视口宽-16, 视口高-160, 600) px
通关记录面板 固定 190px 宽，与画布等高 100% 宽（不超过画布宽），最高 40vh，可滚动
标题 26px 20px
页面滚动 禁止（overflow: hidden） 允许纵向滚动

13.2 触控操作

Canvas 已设置 touch-action: none 阻止浏览器默认手势，并监听 touchstart / touchmove / touchend 事件实现拖拽操控——手指按住画布拖拽，灵狐朝手指方向移动，松开即停。

viewport 标签禁止双指缩放（maximum-scale=1.0, user-scalable=no），防止拖拽时误触发页面缩放。

13.3 窗口 resize / 横竖屏切换

监听 resize 事件（150ms 防抖），重新计算：

  1. Canvas 尺寸（SIZE、CX、CY）
  2. 各层八边形半径（RADII）
  3. 墙壁线段缓存（wallSegments）
  4. 玩家位置（按相对中心比例映射到新坐标）

注意：resize 不会重新生成迷宫，仅重新计算几何坐标并重绘。

13.4 操作提示自适应

根据 window.innerWidth 自动切换提示文字：

  • 桌面端：方向键 ↑↓←→ 或鼠标拖拽控制移动 · 从中心走出迷宫
  • 移动端：手指拖拽控制灵狐移动 · 从中心走出迷宫

十四、扩展方向（未实现）

方向 描述
无限模式 通关后解锁，关卡序号无限递增，总环数锁定16，比拼用时
倒计时模式 限时内完成，时间逐关递减
玩家半径递减 高难关卡缩小灵狐体积，走廊相对变宽但操控更精细
在线排行榜 接入后端 API 实现跨设备全球排名
皮肤系统 解锁不同角色形象（灵狐、火凤、冰龙等）
迷雾模式 仅显示灵狐周围一定范围，其余区域迷雾覆盖

体验地址

Q：594934249

—我是超小弟·一名不务专业的秃头运维—

博客：blog.chaoxiaodi.tech

github：github:chaoxiaodi

微信公众号：老骥不伏枥只是近黄昏

CATALOG
    FEATURED TAGS
    shell python 智能家居 homeassistant 折腾记录 智障家居 auth home-assistant 杂记 Credentials esphome
    FRIENDS