Skip to content

Commit 7f12524

Browse files
hrniuxhrniux
committed
feat: complete cinder canal and echo bazaar
1 parent 438ddea commit 7f12524

17 files changed

Lines changed: 1001 additions & 87 deletions

‎README.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
> 一个以原生 Web 技术构建的小游戏与互动实验合集。
2727
> A curated collection of browser-native mini games, pixel-art experiments, and interactive demos.
2828
29-
DemoCodex 聚焦于“无需构建、打开即玩”的浏览器体验。当前仓库包含 68 个可直接运行的 HTML 页面，其中 `index.html` 聚合了 62 个主推作品；其余页面保留为实验原型、历史版本或扩展说明页，方便继续迭代和对照实现。
29+
DemoCodex 聚焦于“无需构建、打开即玩”的浏览器体验。当前仓库包含 70 个可直接运行的 HTML 页面，其中 `index.html` 聚合了 64 个主推作品；其余页面保留为实验原型、历史版本或扩展说明页，方便继续迭代和对照实现。
3030
现在首页的搜索、分类、排序和指定推荐位会同步到 URL，既能直接收藏，也能把当前视图原样分享出去。
3131

3232
如果这个仓库给你带来一个可复用的玩法灵感、一个值得拆解的页面结构，或者只是给你 5 分钟好玩的浏览器时光，欢迎直接点个 Star。
@@ -145,6 +145,8 @@ DemoCodex 聚焦于“无需构建、打开即玩”的浏览器体验。当前
145145
| [`harbor-haze.html`](./harbor-haze.html) | 传送策略 | 雾闸、回声门和巡航影压在窄码头里，路线判断很直接。 |
146146
| [`crystal-conduit.html`](./crystal-conduit.html) | 战术推箱 | 传导门只送人不送箱，必须先换边找角度再接通导管。 |
147147
| [`lunar-lock.html`](./lunar-lock.html) | 滑行策略 | 月轨滑行、开门与跃迁门串在一起，停点选择决定成败。 |
148+
| [`cinder-canal.html`](./cinder-canal.html) | 滑行策略 | 烬渠滑行、开闸和涵洞换边组合，落点判断很紧。 |
149+
| [`echo-bazaar.html`](./echo-bazaar.html) | 战术推箱 | 回声门只送人不送箱，先换边再把货箱推回夜市摊位。 |
148150
| [`cavern-blast.html`](./cavern-blast.html) | 像素爆破 | 爆炸时序、碎岩清障和虫群追击非常适合被围观。 |
149151
| [`solar-sentry.html`](./solar-sentry.html) | 像素策略 | 光核回收、清场脉冲和高速回航结合得很干净。 |
150152
| [`relay-rush.html`](./relay-rush.html) | 滑行策略 | 长直线滑行和稳频冻结把节奏拉得非常紧。 |
@@ -153,9 +155,9 @@ DemoCodex 聚焦于“无需构建、打开即玩”的浏览器体验。当前
153155

154156
## Fast Facts
155157

156-
- `68` 个可直接运行的 HTML 页面
157-
- `62` 个首页主推入口
158-
- `140` 个 `src/js` / `src/css` 文件
158+
- `70` 个可直接运行的 HTML 页面
159+
- `64` 个首页主推入口
160+
- `144` 个 `src/js` / `src/css` 文件
159161
- `npm run check:manifest` 会对 README 声明、首页入口数和仓库真实页面数做一致性校验
160162
- `npm run test:browser` 使用本机 `Google Chrome` 跑统一浏览器回归，不回退到 Playwright bundled browser
161163

@@ -203,7 +205,7 @@ npm run test:browser
203205
补充说明：
204206

205207
- `npm run check:manifest` 会核对仓库 HTML 总数、`index.html` 主推卡片数量，以及 README 中声明的页面数是否一致。
206-
- `npm test` 通过 `scripts/test-logic-suite.mjs` 自动发现并运行 `test:*:logic`，现已覆盖 45 个主推页面逻辑，其中包括策略游戏与轻量应用。
208+
- `npm test` 通过 `scripts/test-logic-suite.mjs` 自动发现并运行 `test:*:logic`，现已覆盖 47 个主推页面逻辑，其中包括策略游戏与轻量应用。
207209
- `npm run test:browser` 会自动拉起仓库根目录的本地静态服务，再顺序执行当前已接入统一套件的主推像素游戏浏览器回归，并输出每个用例的进度与耗时。
208210
- 浏览器回归只使用本机已安装的 `Google Chrome`；如路径不在默认位置，可通过环境变量 `DEMOCODEX_CHROME_EXECUTABLE` 指向现有本机 Chrome 可执行文件。
209211
- 总套件默认给单用例 `300000ms` 超时保护；如需继续调大，可临时设置 `DEMOCODEX_BROWSER_SUITE_TIMEOUT_MS`。
@@ -255,6 +257,8 @@ npm run test:browser
255257
| 像素策略 | `harbor-haze.html` | 雾港回收页，先踩雾闸抬门，再借回声门换边收回航标。 |
256258
| 像素策略 | `crystal-conduit.html` | 晶流导管推箱页，稳压开门后绕位推晶匣，接通 3 段导管。 |
257259
| 像素策略 | `lunar-lock.html` | 月轨滑行回廊，开门、跃迁和收钥必须压成连续路线。 |
260+
| 像素策略 | `cinder-canal.html` | 烬渠滑行回收页，开闸、涵洞换边和冷雾清场都要压在同一条路线里。 |
261+
| 像素策略 | `echo-bazaar.html` | 夜市推箱页，回声门只送人不送箱，必须换边后再把货箱推回摊位。 |
258262
| 像素策略 | `solar-sentry.html` | 太阳阵列巡检关卡，回收光核后用日冕脉冲扫开碎片再撤离。 |
259263
| 像素策略 | `crate-circuit.html` | 机房接线推箱页，把电路箱送上节点后卡着断流窗口穿过闸门。 |
260264
| 像素策略 | `reef-raider.html` | 海床打捞路线题，收回遗物、冻结潮流，再从右下角出口带着成果撤走。 |

‎cinder-canal.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!doctype html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta
7+
name="description"
8+
content="烬渠渡工：像素风滑行策略小游戏，沿烬渠滑行、开闸、换边并回收火芯。"
9+
/>
10+
<title>烬渠渡工 | DemoCodex</title>
11+
<link
12+
rel="icon"
13+
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%2310100b'/%3E%3Cpath d='M14 44c10-4 12-18 18-28 8 12 20 18 18 30-2 10-12 14-22 10-8-3-14-6-14-12Z' fill='%23f97316'/%3E%3Cpath d='M18 42c10 5 20 5 30 0' stroke='%2338bdf8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"
14+
/>
15+
<link rel="stylesheet" href="src/css/cinder-canal.css" />
16+
</head>
17+
<body>
18+
<main class="pixel-shell">
19+
<header class="pixel-hero">
20+
<a class="pixel-back" href="index.html">返回首页</a>
21+
<div>
22+
<p class="pixel-eyebrow">Cinder Canal</p>
23+
<h1 class="pixel-title">烬渠渡工</h1>
24+
<p class="pixel-lead">余烬水道会把你一路滑到停点。踩开水闸、借回声涵洞换边，抢回 5 枚火芯后从冷却闸口撤离。</p>
25+
</div>
26+
<div class="pixel-actions">
27+
<button class="pixel-cta" id="app-start" type="button">接管烬渠</button>
28+
<button class="pixel-cta pixel-cta--ghost" id="app-reset" type="button">重置水道</button>
29+
</div>
30+
</header>
31+
32+
<section class="pixel-layout">
33+
<section class="pixel-panel pixel-panel--primary">
34+
<div class="pixel-stats">
35+
<article class="pixel-stat"><span class="pixel-stat__label">关卡</span><strong class="pixel-stat__value" id="stat-stage">1</strong></article>
36+
<article class="pixel-stat"><span class="pixel-stat__label">得分</span><strong class="pixel-stat__value" id="stat-score">0</strong></article>
37+
<article class="pixel-stat"><span class="pixel-stat__label">护盾</span><strong class="pixel-stat__value" id="stat-life">3</strong></article>
38+
<article class="pixel-stat"><span class="pixel-stat__label">火芯</span><strong class="pixel-stat__value" id="stat-target">0 / 5</strong></article>
39+
<article class="pixel-stat"><span class="pixel-stat__label">冷雾</span><strong class="pixel-stat__value" id="stat-skill">就绪</strong></article>
40+
<article class="pixel-stat"><span class="pixel-stat__label">纪录</span><strong class="pixel-stat__value" id="stat-best">0</strong></article>
41+
</div>
42+
43+
<div class="pixel-board-shell">
44+
<canvas class="pixel-canvas" id="pixel-canvas" width="840" height="840" role="img" aria-label="烬渠渡工棋盘"></canvas>
45+
<div class="pixel-overlay is-visible" id="pixel-overlay" aria-live="polite">
46+
<p class="pixel-overlay__kicker">烬渠简报</p>
47+
<h2 class="pixel-overlay__title" id="overlay-title">按开始或 Enter 接管烬渠</h2>
48+
<p class="pixel-overlay__body" id="overlay-body">方向键沿烬渠滑行，空格稳舵，Q 喷射冷雾。先开闸，再穿过涵洞回收火芯。</p>
49+
</div>
50+
</div>
51+
52+
<section class="pixel-pad">
53+
<button class="pixel-pad__button" data-action="up" type="button">上</button>
54+
<button class="pixel-pad__button" data-action="left" type="button">左</button>
55+
<button class="pixel-pad__button" data-action="wait" type="button">停</button>
56+
<button class="pixel-pad__button" data-action="right" type="button">右</button>
57+
<button class="pixel-pad__button" data-action="down" type="button">下</button>
58+
<button class="pixel-pad__button pixel-pad__button--accent" data-action="skill" type="button">冷雾</button>
59+
</section>
60+
</section>
61+
62+
<aside class="pixel-panel pixel-panel--side">
63+
<section class="pixel-sidecard">
64+
<h2 class="pixel-sidecard__title">任务状态</h2>
65+
<p class="pixel-sidecard__body" id="status-text">回收 5 枚火芯，再从冷却闸口撤离。</p>
66+
<p class="pixel-sidecard__body pixel-sidecard__body--hint" id="objective-text">滑行会一路冲到停点，先判断落点再行动。</p>
67+
</section>
68+
<section class="pixel-sidecard">
69+
<h2 class="pixel-sidecard__title">玩法说明</h2>
70+
<ul class="pixel-rules">
71+
<li>踩水闸开关会打开封闭闸门。</li>
72+
<li>回声涵洞会把你送到另一段烬渠。</li>
73+
<li>冷雾能清掉近处余烬浪。</li>
74+
</ul>
75+
</section>
76+
<section class="pixel-sidecard">
77+
<h2 class="pixel-sidecard__title">控制方式</h2>
78+
<ul class="pixel-rules">
79+
<li>WASD / 方向键：滑行</li>
80+
<li>Space：稳舵等待</li>
81+
<li>Q：冷雾喷射</li>
82+
<li>Enter：开始</li>
83+
<li>R：重置</li>
84+
</ul>
85+
</section>
86+
<section class="pixel-sidecard">
87+
<h2 class="pixel-sidecard__title">行动面板</h2>
88+
<div class="pixel-mini-actions">
89+
<button class="pixel-button pixel-button--ghost" id="action-wait" type="button">稳舵</button>
90+
<button class="pixel-button pixel-button--accent" id="action-skill" type="button">冷雾</button>
91+
<button class="pixel-button pixel-button--ghost" id="action-restart" type="button">重开</button>
92+
</div>
93+
</section>
94+
<section class="pixel-sidecard">
95+
<h2 class="pixel-sidecard__title">遥测</h2>
96+
<dl class="pixel-metrics">
97+
<div class="pixel-metrics__row"><dt>当前回合</dt><dd id="metric-turn">0</dd></div>
98+
<div class="pixel-metrics__row"><dt>余烬浪</dt><dd id="metric-danger">0</dd></div>
99+
<div class="pixel-metrics__row"><dt>最佳关卡</dt><dd id="metric-best-stage">0</dd></div>
100+
</dl>
101+
</section>
102+
<section class="pixel-sidecard">
103+
<h2 class="pixel-sidecard__title">行动日志</h2>
104+
<ul class="pixel-feed" id="feed-list"></ul>
105+
</section>
106+
</aside>
107+
</section>
108+
</main>
109+
110+
<script src="src/js/grid-arcade-core.js"></script>
111+
<script src="src/js/pixel-page-runtime.js"></script>
112+
<script src="src/js/cinder-canal.js"></script>
113+
</body>
114+
</html>

‎echo-bazaar.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!doctype html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta
7+
name="description"
8+
content="回声集市：像素风战术推箱小游戏，开门、换边、推货箱并躲开巡音影。"
9+
/>
10+
<title>回声集市 | DemoCodex</title>
11+
<link
12+
rel="icon"
13+
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23100f1f'/%3E%3Cpath d='M14 40 32 14l18 26-18 12Z' fill='%23c084fc'/%3E%3Cpath d='M22 38h22' stroke='%23f59e0b' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M25 28c5-5 9-5 14 0' stroke='%235eead4' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"
14+
/>
15+
<link rel="stylesheet" href="src/css/echo-bazaar.css" />
16+
</head>
17+
<body>
18+
<main class="pixel-shell">
19+
<header class="pixel-hero">
20+
<a class="pixel-back" href="index.html">返回首页</a>
21+
<div>
22+
<p class="pixel-eyebrow">Echo Bazaar</p>
23+
<h1 class="pixel-title">回声集市</h1>
24+
<p class="pixel-lead">夜市摊位被巡音影打乱。你要踩开铜闸，借回声门换到箱子背面，把 3 个货箱推回摊位后撤离。</p>
25+
</div>
26+
<div class="pixel-actions">
27+
<button class="pixel-cta" id="app-start" type="button">接管集市</button>
28+
<button class="pixel-cta pixel-cta--ghost" id="app-reset" type="button">重置摊位</button>
29+
</div>
30+
</header>
31+
32+
<section class="pixel-layout">
33+
<section class="pixel-panel pixel-panel--primary">
34+
<div class="pixel-stats">
35+
<article class="pixel-stat"><span class="pixel-stat__label">关卡</span><strong class="pixel-stat__value" id="stat-stage">1</strong></article>
36+
<article class="pixel-stat"><span class="pixel-stat__label">得分</span><strong class="pixel-stat__value" id="stat-score">0</strong></article>
37+
<article class="pixel-stat"><span class="pixel-stat__label">护盾</span><strong class="pixel-stat__value" id="stat-life">3</strong></article>
38+
<article class="pixel-stat"><span class="pixel-stat__label">摊位</span><strong class="pixel-stat__value" id="stat-target">0 / 3</strong></article>
39+
<article class="pixel-stat"><span class="pixel-stat__label">静音</span><strong class="pixel-stat__value" id="stat-skill">就绪</strong></article>
40+
<article class="pixel-stat"><span class="pixel-stat__label">纪录</span><strong class="pixel-stat__value" id="stat-best">0</strong></article>
41+
</div>
42+
43+
<div class="pixel-board-shell">
44+
<canvas class="pixel-canvas" id="pixel-canvas" width="840" height="840" role="img" aria-label="回声集市棋盘"></canvas>
45+
<div class="pixel-overlay is-visible" id="pixel-overlay" aria-live="polite">
46+
<p class="pixel-overlay__kicker">集市简报</p>
47+
<h2 class="pixel-overlay__title" id="overlay-title">按开始或 Enter 接管集市</h2>
48+
<p class="pixel-overlay__body" id="overlay-body">方向键移动和推箱，空格听声，Q 展开静音罩。回声门只传送人，必须先换边再推箱。</p>
49+
</div>
50+
</div>
51+
52+
<section class="pixel-pad">
53+
<button class="pixel-pad__button" data-action="up" type="button">上</button>
54+
<button class="pixel-pad__button" data-action="left" type="button">左</button>
55+
<button class="pixel-pad__button" data-action="wait" type="button">停</button>
56+
<button class="pixel-pad__button" data-action="right" type="button">右</button>
57+
<button class="pixel-pad__button" data-action="down" type="button">下</button>
58+
<button class="pixel-pad__button pixel-pad__button--accent" data-action="skill" type="button">静音</button>
59+
</section>
60+
</section>
61+
62+
<aside class="pixel-panel pixel-panel--side">
63+
<section class="pixel-sidecard">
64+
<h2 class="pixel-sidecard__title">任务状态</h2>
65+
<p class="pixel-sidecard__body" id="status-text">把 3 个货箱推回摊位，再从北门撤离。</p>
66+
<p class="pixel-sidecard__body pixel-sidecard__body--hint" id="objective-text">回声门只送人不送箱，别把货箱推到死角。</p>
67+
</section>
68+
<section class="pixel-sidecard">
69+
<h2 class="pixel-sidecard__title">玩法说明</h2>
70+
<ul class="pixel-rules">
71+
<li>踩铜闸开关会打开封闭通道。</li>
72+
<li>货箱压到摊位后会锁定得分。</li>
73+
<li>静音罩能让巡音影停住一拍。</li>
74+
</ul>
75+
</section>
76+
<section class="pixel-sidecard">
77+
<h2 class="pixel-sidecard__title">控制方式</h2>
78+
<ul class="pixel-rules">
79+
<li>WASD / 方向键：移动和推箱</li>
80+
<li>Space：听声等待</li>
81+
<li>Q：静音罩</li>
82+
<li>Enter：开始</li>
83+
<li>R：重置</li>
84+
</ul>
85+
</section>
86+
<section class="pixel-sidecard">
87+
<h2 class="pixel-sidecard__title">行动面板</h2>
88+
<div class="pixel-mini-actions">
89+
<button class="pixel-button pixel-button--ghost" id="action-wait" type="button">听声</button>
90+
<button class="pixel-button pixel-button--accent" id="action-skill" type="button">静音</button>
91+
<button class="pixel-button pixel-button--ghost" id="action-restart" type="button">重开</button>
92+
</div>
93+
</section>
94+
<section class="pixel-sidecard">
95+
<h2 class="pixel-sidecard__title">遥测</h2>
96+
<dl class="pixel-metrics">
97+
<div class="pixel-metrics__row"><dt>当前回合</dt><dd id="metric-turn">0</dd></div>
98+
<div class="pixel-metrics__row"><dt>巡音影</dt><dd id="metric-danger">0</dd></div>
99+
<div class="pixel-metrics__row"><dt>最佳关卡</dt><dd id="metric-best-stage">0</dd></div>
100+
</dl>
101+
</section>
102+
<section class="pixel-sidecard">
103+
<h2 class="pixel-sidecard__title">行动日志</h2>
104+
<ul class="pixel-feed" id="feed-list"></ul>
105+
</section>
106+
</aside>
107+
</section>
108+
</main>
109+
110+
<script src="src/js/grid-arcade-core.js"></script>
111+
<script src="src/js/pixel-page-runtime.js"></script>
112+
<script src="src/js/echo-bazaar.js"></script>
113+
</body>
114+
</html>

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,15 @@ <h1 class="menu-hero__title">下一页就开玩</h1>
2727
</p>
2828
<div class="menu-hero__meta" aria-label="页面概览">
2929
<div class="menu-pill">
30-
<strong id="menu-total">62</strong>
30+
<strong id="menu-total">64</strong>
3131
<span>个主推作品</span>
3232
</div>
3333
<div class="menu-pill">
3434
<strong id="menu-featured">4</strong>
3535
<span>个重点推荐</span>
3636
</div>
3737
<div class="menu-pill">
38-
<strong id="menu-visible">62</strong>
38+
<strong id="menu-visible">64</strong>
3939
<span>个当前结果</span>
4040
</div>
4141
</div>
@@ -110,7 +110,7 @@ <h2 id="menu-browse-title">先筛选，再进入你现在最想玩的那一页</
110110

111111
<div class="menu-results">
112112
<p class="menu-results__summary" id="menu-results-summary">
113-
显示 57 / 57 个作品。
113+
显示 64 / 64 个作品。
114114
</p>
115115
<div class="menu-active-filters" id="menu-active-filters" aria-live="polite"></div>
116116
</div>

0 commit comments

Comments
 (0)