Skip to content

Commit d614aef

Browse files
hrniuxhrniux
committed
feat: add ten pixel strategy games
1 parent 68ab2ac commit d614aef

45 files changed

Lines changed: 5152 additions & 95 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
</p>
66

77
<p align="center">
8-
<strong>33 playable browser-native mini games and interactive experiments.</strong><br />
8+
<strong>43 playable browser-native mini games and interactive experiments.</strong><br />
99
Built with vanilla JavaScript, Canvas, and zero framework overhead.
1010
</p>
1111

1212
<p align="center">
13-
<img alt="Playable pages" src="https://img.shields.io/badge/playable_pages-33-0ea5e9?style=for-the-badge" />
14-
<img alt="Curated picks" src="https://img.shields.io/badge/curated_picks-27-22c55e?style=for-the-badge" />
13+
<img alt="Playable pages" src="https://img.shields.io/badge/playable_pages-43-0ea5e9?style=for-the-badge" />
14+
<img alt="Curated picks" src="https://img.shields.io/badge/curated_picks-37-22c55e?style=for-the-badge" />
1515
<img alt="Tech stack" src="https://img.shields.io/badge/vanilla_js-canvas-f59e0b?style=for-the-badge" />
1616
<img alt="License" src="https://img.shields.io/badge/license-MIT-111827?style=for-the-badge" />
1717
</p>
@@ -25,7 +25,7 @@
2525
> 一个以原生 Web 技术构建的小游戏与互动实验合集。
2626
> A curated collection of browser-native mini games, pixel-art experiments, and interactive demos.
2727
28-
DemoCodex 聚焦于“无需构建、打开即玩”的浏览器体验。当前仓库包含 33 个可直接运行的 HTML 页面，其中 `index.html` 聚合了 27 个主推作品；其余页面保留为实验原型、历史版本或扩展说明页，方便继续迭代和对照实现。
28+
DemoCodex 聚焦于“无需构建、打开即玩”的浏览器体验。当前仓库包含 43 个可直接运行的 HTML 页面，其中 `index.html` 聚合了 37 个主推作品；其余页面保留为实验原型、历史版本或扩展说明页，方便继续迭代和对照实现。
2929

3030
如果这个仓库给你带来一个可复用的玩法灵感、一个值得拆解的页面结构，或者只是给你 5 分钟好玩的浏览器时光，欢迎直接点个 Star。
3131

@@ -44,14 +44,16 @@ DemoCodex 聚焦于“无需构建、打开即玩”的浏览器体验。当前
4444
| [`orbit-rescue.html`](./orbit-rescue.html) | 轨道策略 | 环带换位与停滞脉冲结合，单局节奏很紧。 |
4545
| [`magnet-forge.html`](./magnet-forge.html) | 像素策略 | 磁力推箱、追击火花和供电目标组合得很完整。 |
4646
| [`cavern-blast.html`](./cavern-blast.html) | 像素爆破 | 爆炸时序、碎岩清障和虫群追击非常适合被围观。 |
47+
| [`solar-sentry.html`](./solar-sentry.html) | 像素策略 | 光核回收、清场脉冲和高速回航结合得很干净。 |
48+
| [`relay-rush.html`](./relay-rush.html) | 滑行策略 | 长直线滑行和稳频冻结把节奏拉得非常紧。 |
4749
| [`mind-lab.html`](./mind-lab.html) | 交互测试 | 不只是游戏，展示了仓库在“轻量互动网页”上的另一条路线。 |
4850
| [`compound_interest.html`](./compound_interest.html) | 可视化实验 | 复利主题页把图表、故事线和滚雪球演示做成了一个完整案例。 |
4951

5052
## Fast Facts
5153

52-
- `33` 个可直接运行的 HTML 页面
53-
- `27` 个首页主推入口
54-
- `69` 个 `src/js` / `src/css` 文件
54+
- `43` 个可直接运行的 HTML 页面
55+
- `37` 个首页主推入口
56+
- `89` 个 `src/js` / `src/css` 文件
5557
- `npm run check:manifest` 会对 README 声明、首页入口数和仓库真实页面数做一致性校验
5658
- `npm run test:browser` 使用本机 `Google Chrome` 跑统一浏览器回归，不回退到 Playwright bundled browser
5759

@@ -97,7 +99,7 @@ npm run test:browser
9799
补充说明：
98100

99101
- `npm run check:manifest` 会核对仓库 HTML 总数、`index.html` 主推卡片数量，以及 README 中声明的页面数是否一致。
100-
- `npm test` 运行当前内建的逻辑自检，现已覆盖现有主推策略页与新增的 8 个像素小游戏。
102+
- `npm test` 运行当前内建的逻辑自检，现已覆盖 23 个主推策略 / 像素小游戏。
101103
- `npm run test:browser` 会自动拉起仓库根目录的本地静态服务，再顺序执行当前已接入统一套件的主推像素游戏浏览器回归。
102104
- 浏览器回归只使用本机已安装的 `Google Chrome`；如路径不在默认位置，可通过环境变量 `DEMOCODEX_CHROME_EXECUTABLE` 指向现有本机 Chrome 可执行文件。
103105
- 仓库不会回退到 Playwright bundled browser，也不需要为本项目运行 `playwright install`。
@@ -123,6 +125,16 @@ npm run test:browser
123125
| 像素策略 | `comet-lantern.html` | 夜巡拾星小游戏，用闪灯脉冲震开黑影并回收彗尘。 |
124126
| 像素爆破 | `cavern-blast.html` | 像素风回合制爆破地城，围绕雷芯延时爆炸、碎岩清障与虫群追击展开。 |
125127
| 像素策略 | `frostbite-freight.html` | 冰面惯性货运谜局，利用滑行和制动器把货箱送进停靠位。 |
128+
| 像素策略 | `solar-sentry.html` | 太阳阵列巡检关卡，回收光核后用日冕脉冲扫开碎片再撤离。 |
129+
| 像素策略 | `crate-circuit.html` | 机房接线推箱页，把电路箱送上节点后卡着断流窗口穿过闸门。 |
130+
| 像素策略 | `reef-raider.html` | 海床打捞路线题，收回遗物、冻结潮流，再从右下角出口带着成果撤走。 |
131+
| 像素策略 | `forge-feint.html` | 锻炉主题推箱页，推动钢胚压住锻点并用冷锤冻结火星。 |
132+
| 像素策略 | `prism-patrol.html` | 棱镜采集路线关，围绕短线收束、锁光停顿和干净撤离展开。 |
133+
| 像素策略 | `glacier-switch.html` | 冰面滑行推箱页，用雪楔清掉冰刺，再靠惯性把货箱送上停靠位。 |
134+
| 像素策略 | `thorn-trail.html` | 慢节奏林径采集关，藤刺会扩散，修枝刀负责切出短暂安全路线。 |
135+
| 像素策略 | `relay-rush.html` | 滑行信道冲刺局，收满中继节点后再靠稳频波压住干扰完成回航。 |
136+
| 像素策略 | `lumen-lift.html` | 补光塔主题推箱页，把棱镜箱送上光台并靠聚光脉冲拖住暗影。 |
137+
| 像素策略 | `quarry-quest.html` | 矿区推石撤离关，把矿石推进标记槽后从北侧井口带走样本。 |
126138
| 潜行解谜 | `neon-heist.html` | 回合制霓虹潜入小游戏，围绕巡逻同步推进、EMP 停滞、诱饵错位与路线计算展开。 |
127139
| 轨道策略 | `orbit-rescue.html` | 环形轨道回收游戏，利用停滞脉冲与节拍式移动在碎片环带间抢回救生舱。 |
128140
| 港湾策略 | `tide-courier.html` | 港湾潮道投递谜局，利用潮流拖拽与换流浮标反转航道，在驳船间抢回漂流货箱。 |
@@ -151,7 +163,7 @@ npm run test:browser
151163

152164
- 渲染方式：Canvas 2D 是主要交互载体，部分页面采用像素风绘制和 `requestAnimationFrame` 循环。
153165
- 代码组织：仓库同时存在单文件原型页与按 `src/css`、`src/js` 拆分的模块化页面。
154-
- 状态持久化：贪吃蛇、2048、扫雷、俄罗斯方块、回声矩阵、星环逃逸、霓虹潜行、轨道营救、潮汐信使、晶洞爆破、磁场工坊、余烬搬运、裂轨列调、符文守卫、像素果园、信号冲刺、金库推箱、彗灯拾星、霜轨货运、像素坦克等页面都使用了浏览器本地存储。
166+
- 状态持久化：贪吃蛇、2048、扫雷、俄罗斯方块、回声矩阵、星环逃逸、霓虹潜行、轨道营救、潮汐信使、晶洞爆破、磁场工坊、余烬搬运、裂轨列调、符文守卫、像素果园、信号冲刺、金库推箱、彗灯拾星、霜轨货运、太阳哨站、箱线回路、暗礁打捞、炉火佯动、棱镜巡线、冰川换道、荆棘小径、中继冲刺、琉光升塔、矿场追标、像素坦克等页面都使用了浏览器本地存储。
155167
- 依赖策略：除 `voxelcraft.html`、`compound_interest.html` 和个别字体资源外，整体坚持轻依赖甚至零依赖。
156168

157169
## 目录结构

‎crate-circuit.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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='12' fill='%230d1b1f'/%3E%3Crect x='14' y='14' width='36' height='36' fill='%2306b6d4'/%3E%3Crect x='24' y='24' width='16' height='16' fill='%23f97316'/%3E%3C/svg%3E"
14+
/>
15+
<link rel="stylesheet" href="src/css/crate-circuit.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">Factory Grid</p>
23+
<h1 class="pixel-title">箱线回路</h1>
24+
<p class="pixel-lead">
25+
机房里的箱体是电路开关，节点一旦接通就能恢复整段供电。你要把每个箱体推到位，再趁回路稳定时穿过右下闸门。
26+
</p>
27+
</div>
28+
<div class="pixel-actions">
29+
<button class="pixel-cta" id="app-start" type="button">开始接线</button>
30+
<button class="pixel-cta pixel-cta--ghost" id="app-reset" type="button">重置机房</button>
31+
</div>
32+
</header>
33+
34+
<section class="pixel-layout">
35+
<section class="pixel-panel pixel-panel--primary">
36+
<div class="pixel-stats">
37+
<article class="pixel-stat"><span class="pixel-stat__label">关卡</span><strong class="pixel-stat__value" id="stat-stage">1</strong></article>
38+
<article class="pixel-stat"><span class="pixel-stat__label">得分</span><strong class="pixel-stat__value" id="stat-score">0</strong></article>
39+
<article class="pixel-stat"><span class="pixel-stat__label">护盾</span><strong class="pixel-stat__value" id="stat-life">3</strong></article>
40+
<article class="pixel-stat"><span class="pixel-stat__label">目标</span><strong class="pixel-stat__value" id="stat-target">0 / 3</strong></article>
41+
<article class="pixel-stat"><span class="pixel-stat__label">技能</span><strong class="pixel-stat__value" id="stat-skill">就绪</strong></article>
42+
<article class="pixel-stat"><span class="pixel-stat__label">纪录</span><strong class="pixel-stat__value" id="stat-best">0</strong></article>
43+
</div>
44+
<div class="pixel-board-shell">
45+
<canvas class="pixel-canvas" id="pixel-canvas" width="840" height="840" role="img" aria-label="箱线回路棋盘"></canvas>
46+
<div class="pixel-overlay is-visible" id="pixel-overlay" aria-live="polite">
47+
<p class="pixel-overlay__kicker">机房简报</p>
48+
<h2 class="pixel-overlay__title" id="overlay-title">按开始或 Enter 进入机房</h2>
49+
<p class="pixel-overlay__body" id="overlay-body">
50+
推动箱体点亮节点，空格稳线，Q 释放断流，把周围的火花暂时冻结。
51+
</p>
52+
</div>
53+
</div>
54+
<section class="pixel-pad">
55+
<button class="pixel-pad__button" data-action="up" type="button">上</button>
56+
<button class="pixel-pad__button" data-action="left" type="button">左</button>
57+
<button class="pixel-pad__button" data-action="wait" type="button">等</button>
58+
<button class="pixel-pad__button" data-action="right" type="button">右</button>
59+
<button class="pixel-pad__button" data-action="down" type="button">下</button>
60+
<button class="pixel-pad__button pixel-pad__button--accent" data-action="skill" type="button">断流</button>
61+
</section>
62+
</section>
63+
<aside class="pixel-panel pixel-panel--side">
64+
<section class="pixel-sidecard">
65+
<h2 class="pixel-sidecard__title">任务状态</h2>
66+
<p class="pixel-sidecard__body" id="status-text">先把 3 个电路箱推上节点，再走向右下闸门。</p>
67+
<p class="pixel-sidecard__body pixel-sidecard__body--hint" id="objective-text">
68+
箱体会锁住节点，断流则能让火花安静两拍。
69+
</p>
70+
</section>
71+
<section class="pixel-sidecard">
72+
<h2 class="pixel-sidecard__title">玩法说明</h2>
73+
<ul class="pixel-rules">
74+
<li>推动电路箱，别把自己卡死在通道里。</li>
75+
<li>节点全部接通后，闸门会开启。</li>
76+
<li>Q 释放断流，压住附近火花。</li>
77+
</ul>
78+
</section>
79+
<section class="pixel-sidecard">
80+
<h2 class="pixel-sidecard__title">控制方式</h2>
81+
<ul class="pixel-rules">
82+
<li>WASD / 方向键：移动</li>
83+
<li>Space：原地等待</li>
84+
<li>Q：释放断流</li>
85+
<li>Enter：开始</li>
86+
<li>R：重置</li>
87+
</ul>
88+
</section>
89+
<section class="pixel-sidecard">
90+
<h2 class="pixel-sidecard__title">行动面板</h2>
91+
<div class="pixel-mini-actions">
92+
<button class="pixel-button pixel-button--ghost" id="action-wait" type="button">等待</button>
93+
<button class="pixel-button pixel-button--accent" id="action-skill" type="button">断流</button>
94+
<button class="pixel-button pixel-button--ghost" id="action-restart" type="button">重开</button>
95+
</div>
96+
</section>
97+
<section class="pixel-sidecard">
98+
<h2 class="pixel-sidecard__title">遥测</h2>
99+
<dl class="pixel-metrics">
100+
<div class="pixel-metrics__row"><dt>当前回合</dt><dd id="metric-turn">0</dd></div>
101+
<div class="pixel-metrics__row"><dt>危险源</dt><dd id="metric-danger">0</dd></div>
102+
<div class="pixel-metrics__row"><dt>最佳关卡</dt><dd id="metric-best-stage">0</dd></div>
103+
</dl>
104+
</section>
105+
<section class="pixel-sidecard">
106+
<h2 class="pixel-sidecard__title">行动日志</h2>
107+
<ul class="pixel-feed" id="feed-list"></ul>
108+
</section>
109+
</aside>
110+
</section>
111+
</main>
112+
<script src="src/js/grid-arcade-core.js"></script>
113+
<script src="src/js/pixel-page-runtime.js"></script>
114+
<script src="src/js/crate-circuit.js"></script>
115+
</body>
116+
</html>

0 commit comments

Comments
 (0)