Project 02 · 网页游戏原型 · 关卡与交互设计Web game prototype · Level & interaction design
窗景Windowscape
拖动窗口、对齐门洞，在三层纵深里接出自己的路。
Drag windows, align doors and build a path through three layers of depth.
02
拖动 · 对齐 · 穿过Drag. Align. Walk through.
熟悉的窗口操作，变成通往下一层的路。Familiar window controls become a path into the next layer.
The interaction
让窗口成为一段路Make a window part of the path
拖动标题栏，移动窗口。同层的门对齐后，门框变成品红；跑过去，或按 ↓ 穿过后墙的门，走进更深一层。
Drag a title bar to move a window. Align doors on the same layer and the frame turns magenta. Run across, or press ↓ through a back-wall door to go deeper.
亲手试一下 ↗Try it in your browser ↗键盘移动与跳跃，鼠标拖动窗口。Keyboard to move and jump; mouse to drag windows.
Core loop核心循环Core loop
读局面Read the scene谁在哪一层？门框是白还是品红？Which layer is each window on? White or magenta frame?
摆 / 缩放Place / resize拖标题栏摆位置；点 □ / – 变大变小。Drag a title bar to place; click □ / – to resize.
接通Connect同层的门对齐，门框变品红。Same-layer doors line up; the frame turns magenta.
走过去Walk through跑过去，或按 ↓ 走进后一层。Run across, or press ↓ to step deeper.
更深一层One layer deeper新的局面，回到「读局面」。A new scene; read it again.
五个机制与实机细节Five mechanics and in-game details
Five mechanics五个机制Five mechanics
01
纵深门Depth door
舱的后墙上有门，通往后一层。门后有舱对准时门框变品红，按 ↓ 走进去。
A door in a pod's back wall leads deeper. With a pod lined up behind it, the frame turns magenta; press ↓.
首次出现：第 1、2 关First seen: Levels 1–202
变大变小Bigger, smaller
□ 让窗口变大：在远处就先拉近一层，到了你这层再真的长大。– 反过来。按完停在原地，位置自己拖。按钮借自最大化 / 最小化，但这里控制的是纵深。
□ makes a window bigger: a far one comes closer, then on your layer it grows. – does the reverse. It stays put; you drag it. The buttons come from maximize and minimize, but here they control depth.
首次出现：第 3 关First seen: Level 303
会塌Crumble
有裂缝的楼板踩上去就开始裂、越来越晃，3.2 秒后塌掉；人还在上面就会掉下去，整关重来。倒下后的危楼踩上去也会碎裂。
A cracked BRIDGE starts breaking when you step on it and falls after 3.2 s. Still on it? You fall and the level restarts. A toppled TOWER crumbles under you too.
首次出现：第 4 关First seen: Level 404
危楼Tower
从哪边顶它，它就往另一边倒；倒下的长度等于高度。太矮就 □ 长高，太高就 – 缩矮。
Push a TOWER and it falls the other way; its fallen length equals its height. Too short? □. Too tall? –.
首次出现：第 6 关First seen: Level 605
升降台Lift
带扶手的矮台。站上去按 □，它往上长、把你托上去；按 – 缩回，把你放下来。
A low block with a railing. Stand on it and click □: it grows and carries you. Click – and it lowers you.
首次出现：第 9 关First seen: Level 9
DIY 关卡编辑器DIY level editor玩家自己出题Players make the puzzles
搭：加窗口（房间 / 能拖的 / 实心块 / 桌面），拖着摆；改宽高、开门，勾选「能拖、最大化、可乘坐」。试：一键进自己的关，规则和正式关一样，Esc 回编辑器。存：存在本地，或导出一串代码发给别人。
Build: add a window (room, movable, block, desktop) and drag it into place; set size and doors. Play: one click into your level with the main game's rules; Esc to edit. Share: save locally, or export a code anyone can import.
选项用窗口本来的词，玩家搭关时用的就是通关时学会的那套操作。
The options use window words, so building uses the controls players learned by playing.
原型结构与技术实现Prototype structure and implementation
游戏框架Structure三章十关，一段往下走的旅程Three chapters, ten levels, one journey down
- 第一章 · 往深处走 5 关Ch. 1 · Going Deeper 5 levels
- 第二章 · 危楼 3 关Ch. 2 · Towers 3 levels
- 第三章 · 升降 2 关Ch. 3 · Lifts 2 levels
- 「你走到了最深处」"You reached the depths"
每一关：开场镜头（从出口拉回起点）→ 解谜 → 走进出口 → 雾中转场 → 下一关从雾里浮出来。Every level: opening shot → puzzle → walk into the exit → fog transition → the next level emerges.
Code技术展示：一个公式算出三层纵深One formula for three layers of depth
prototype_depth.html · 纵深与镜头（节选）depth & camera (excerpt)
// 镜头对准第 focusF 层：那一层 1:1，越往后越小 const DEPTH_K = .47, MAX_Z = 2; const layerScale = n => 1 / Math.max(.05, 1 + (n - focusF) * DEPTH_K); // 危楼倒下：绕底角转 90°，倒下的长度 = 原来的高度 function towerFoot(r, dir, x, y){ return {x: dir > 0 ? x : x + r.w - r.h, y: y + r.h - r.w, w: r.h, h: r.w}; }
- 一点透视：缩放 = 1 / (1 + 层差 × 0.47)。离镜头越近变化越大，推镜头时就有了视差。One-point perspective: scale = 1 / (1 + layer difference × 0.47). Near layers change most, so camera moves give parallax.
- 共用世界坐标：三层共用一套坐标，「正后方」就是同一个 (x, y)：穿过后墙门，位置不变。Shared coordinates: "directly behind" is the same (x, y), so a back-wall door keeps your position.
- 危楼 = 一次旋转：宽高互换就是倒下后的走廊，所以它有多高，就能接多远。A tower is one rotation: swap width and height and you get the corridor; its height decides its reach.
- 按钮暗 = 这一下没用：同一个函数既决定按下做什么，也决定按钮亮不亮，画面和规则永远一致。Dark button = no effect: one function decides both what a press does and whether the button is lit.
研究参考与视觉方向Research and visual direction
本章回答：参考了什么，要解决的核心问题是什么，这个世界是什么样。This part answers: what I referenced, the core problem, and what this world is.
References研究参考：取什么，用在哪References: what I took, and where it went
Superliminal
参考：强制透视，近大远小会改变物体的实际大小。用在：□ 把远处的小楼板拉近、再长大，就成了一座桥。
Reference: forced perspective, where near and far change an object's real size. Used for: □ brings a small far slab closer, grows it, and it becomes a bridge.
Inside
参考：灰阶、电影感，不用文字讲故事。用在：黑白灰加唯一的品红；用开场镜头和推镜代替说明文字。
Reference: grayscale, cinematic, storytelling without words. Used for: grayscale plus one magenta; camera moves instead of written instructions.
《小小梦魇 2》· Limbo · Inside：不用文字的教学Little Nightmares II · Limbo · Inside: teaching without words
参考：这几款游戏都不靠文字教玩家：危险先在安全的地方演示一次，或者用场景里的东西暗示怎么做，玩家看懂之后再亲手尝试。用在：第 4 关先在安全的地方塌一块楼板给你看；第 2 关的穿梭舱先自己滑过门后，门框跟着变色。
Reference: none of these games teach with text; danger is shown once somewhere safe, or the scene hints at what to do, and then the player tries it. Used for: in Level 4 a slab collapses somewhere safe first; in Level 2 the shuttle slides behind the door by itself and the frame changes colour.
BLAME!
参考：无边无际、看不到尽头的巨构。用在：看不到顶的混凝土立面；横梁上很小的人，用来量出建筑有多大。
Reference: an endless megastructure. Used for: a concrete facade with no visible top; tiny figures on a beam to show scale.
粗野主义建筑Brutalist architecture
参考：清水混凝土、厚重的体块、重复的模块。用在：窗口变成有重量的混凝土预制舱，能拖的浅、拖不动的深。
Reference: raw concrete, heavy masses, repeated modules. Used for: windows become heavy precast concrete pods, movable ones light and fixed ones dark.
操作系统的窗口Operating-system windows
参考：拖动、最小化、最大化，每个人都会的操作。用在：拖标题栏摆位置直接借用；□ / – 保留按钮的样子，改成控制纵深。
Reference: drag, minimize and maximize, controls everyone knows. Used for: dragging title bars is borrowed directly; □ and – keep their look but now control depth.
Art direction美术方向：三轮试验，最后选 BArt direction: three rounds, then B
通用的暗色科幻界面Generic dark sci-fi UI
角色、门、起点、终点、提示框都在发光，没有主次。
Character, doors, start, goal and hint box all glowed, so nothing stood out.
赛博朋克样张：颜色只表达功能Cyberpunk: color only for function
品红 = 你，黄 = 能拖，青 = 门。问题：细节和层次不够，显得粗糙；霓虹风太常见，满屏特效会盖住解谜信息。
Magenta = you, yellow = movable, cyan = doors. Problem: rough, and heavy neon effects bury puzzle information.
赛博朋克 × 粗野主义 × 巨物Cyberpunk × brutalism × megastructure
混凝土预制舱、统一的光向、看不到顶的巨塔和雾海。问题：三种风格平均混合，哪种都不鲜明。
Concrete pods, one light direction, a topless tower and fog. Problem: three styles averaged; none stood out.
电影感粗野主义Cinematic brutalism
只有黑白灰，唯一的颜色是品红：你，和你接通的路。代价是能拖 / 拖不动只能靠明暗区分。
Only grayscale; the one color is magenta: you, and the path you connect. Movable vs. fixed must read through value alone.
← 左右滑动Scroll sideways →
一种风格当主角（大约七成），另一种只借它最有辨识度的一点，第三种要么只当点缀，要么不要。
Let one style lead (about 70%), borrow only the most recognizable trait of a second, and keep a third as an accent or drop it.
— 三轮美术试验学到的— lesson from three rounds of art direction
Core design problem核心问题：三层纵深让玩法变新，也让画面变难读Three layers make the play new, and the image hard to read
第一版纵深原型把推远拉近、后墙的门、坍塌三个新概念塞进同一关，朋友试玩时根本看不懂怎么玩。加了 6 步文字引导以后能通关，但这等于把答案念给玩家，并没有教会他。
The first depth prototype put three new ideas (pull and push, back-wall doors, collapse) into one level. Friends who tried it could not tell how to play at all. Six steps of text made it beatable, but that only read out the answer.
①
看不出前后Front or back?
同一块楼板，在远层很小，拉近就变大。它「小」是因为远，还是本来就小？
The same slab is small far away and big when close. Is it small because it's far, or because it's small?
②
画面上对齐 ≠ 接上Lined up is not connected
两扇门看起来对齐了，但只要不在同一层就接不上，人走过去会掉下去。
Two doors can look aligned, but on different layers they don't connect, and you fall.
③
多了一维操作One more dimension of input
最早换层要「拖着窗口时滚滚轮」：既难被发现，也不是窗口本来就有的操作。
Changing layers meant scrolling while dragging: hard to discover, and not something real windows do.
Solution解法：四层设计，少用文字Solution: four layers of design, few words
规则只有一条：只有同一层的门才能对接。层数最多三层。
One rule: only doors on the same layer connect. At most three layers.
一眼可见Visible at a glance开场镜头先停在最深处的出口，再拉回起点；前 / 中 / 远层级指示；越远越小、越淡、越被雾吃掉。The opening shot holds on the deepest exit, then pulls back; a Near / Mid / Far indicator; farther is smaller, paler, foggier.
操作有预告Actions preview鼠标停在 □ / – 上，先用虚线画出按下后窗口在哪一层、多大，能接上的标品红。Hover □ or – and a dashed outline shows the window's layer and size after the click, magenta if it connects.
关卡即教学Levels are the tutorial一关只教一件事：往里走 → 对准 → 近大远小 → 会塌 → 综合。开始界面不写规则。One idea per level: Step In → Line Up → Near and Far → Crumble → All Together. No rules on the start screen.
兜底提示Fallback hints同一步卡住约 20 秒，才出现那一步的提示；按场上的实际状态判断缺哪一步。Only after ~20 s stuck does a hint appear, based on the actual state of the level.
试过又撤回Tried and withdrawn
俯视图（按住 Shift 弹出平面图）Top-down map (hold Shift)
撤回：要多学一种看图方式，还会打断沉浸；前后关系已经能靠虚线轮廓、拉近预览和品红门框看出来。Withdrawn: another way to read the screen that breaks immersion; outlines, previews and magenta frames already show depth.
试过又撤回Tried and withdrawn
一步步的文字引导Step-by-step text guidance
能通关，但等于念答案。改成卡住才出现的兜底提示。Beatable, but it reads out the answer. Replaced by hints that appear only when you're stuck.
World世界观：一座正在坍塌的巨构World: a megastructure that is slowly collapsing
一座看不到顶、也看不到底的巨构，正在一点点塌下去。你是困在里面的一个品红色的小东西，只能在一扇扇「窗口」——挂在巨构上的混凝土预制舱——里行走。出口在最深处的天光里。
A megastructure with no visible top or bottom is slowly falling apart. You are a small magenta figure trapped inside, able to walk only within "windows": precast concrete pods hanging on the structure. The exit is the light at the deepest point.
让环境来讲：不写剧情文字。深度读数随着往里走不断下降；远处的楼时不时自己倒下；横梁上很小的人衬出巨构的尺度；转场的雾里，若隐若现一座城市。
Told through the environment: no story text. The depth readout drops as you go further in; distant towers collapse on their own; tiny figures on a beam show the scale; a city flickers in the transition fog.
混凝土预制舱Concrete pods窗口Windows
浅色能拖，深色拖不动——不靠颜色也分得清。
Light = movable, dark = fixed — readable without color.
品红Magenta你和接通的路You and your path
全场唯一的颜色，一眼就能找到自己。
The only color on screen; you always find yourself.
天光Daylight出口The exit
每关都有方向：往最亮的地方走。
Every level has a direction: walk toward the brightest point.
雾Fog纵深Depth
越远越淡、越被吞掉，不用数字也看得出层次。
Farther is paler and more hidden; layers read without numbers.
危楼Towers倒下变走廊A corridor when toppled
远处先倒一座做预告：先看见，再遇到。
A distant tower falls first as a preview: see it, then meet it.
升降台Lifts会长高的窗口A window that grows
站上去按 □，它把你托上去：窗口变大本身就是升降。
Stand on it and click □: growing is the lift.
十关，不靠文字教会玩家Ten levels that teach without text
本章回答：十关怎么不靠文字教会玩家，镜头怎么讲空间，场景怎么一步步改出来。This part answers: how ten levels teach, how the camera tells space, and how the scenes evolved.
01–05 / LEARN
往深处走Going deeper
穿门 → 对准 → 缩放 → 坍塌 → 综合Doors → alignment → scaling → collapse → combine
06–08 / COMBINE
危楼Towers
长高 → 缩矮 → 推远再长高Grow → shrink → send back, then grow
09–10 / REVERSE
升降Lifts
托上去 → 放下来Carry up → lower down
近大远小Near and Far
教：□ 远的拉近，近的长大。小楼板先拉近、再长大，拖进缺口。Teaches: □ = bigger. Bring the far BRIDGE closer, grow it, drag it in.
Level 03 / DESIGN FOCUS
形状先给出答案Let shape suggest the answer
远处楼板和缺口一样高、但更窄，□ 按钮闪烁。先用形状和按钮引导“拉近、长大”，再让玩家自己拖入缺口。
The distant slab matches the gap in height but is narrower; □ pulses. Shape and the button suggest bringing it closer and growing it, while placement stays with the player.
综合All Together
教：把前三件事串起来。拉近楼板搭桥、接中继舱、穿两道门、冲过会塌的桥；卡住约 20 秒才出提示。Teaches: the first three, combined. Bring the BRIDGE in, attach ROOM 02, take two doors, sprint across; hints after ~20 s.
Level 05 / DESIGN FOCUS
把学过的动作连起来Combine what the player knows
第 5 关把搭桥、接中继舱、穿门和跑过塌桥串起来。提示约 20 秒后才出现，按当前局面找出缺失的一步。
Level 5 links bridge building, ROOM 02, doors and a collapsing crossing. Hints wait about 20 seconds, then identify the missing step from the current state.
推远 · 三层深Send It Back · 3 layers
危楼在中层，缺口在最远层。做法：– 推远 → 走下去 → □ 长高 → 推。TOWER on the mid layer, gap on the far one. Do: – send back → go down → □ grow → push.
Level 08 / DESIGN FOCUS
让同一机制提出新问题Ask a new question with the same tool
危楼在中层，缺口在最远层。先推远，再走下去、长高、推倒；从“变大就能过”转为先判断层级和顺序。
The tower is on the mid layer and the gap on the far layer. Send it back before going down, growing and toppling it: layer and order now matter.
展开完整十关设计Explore all ten levels
第一章 · 往深处走Chapter 1 · Going Deeper5 关，一关只教一件事Five levels, one idea each
往里走Step In
教：后墙的门能走进去。门已对准，白光从门洞透出来，按 ↓。Teaches: back-wall doors lead deeper. The door is lined up and light shines through; press ↓.
对准Line Up
教：门框品红 = 后面有路。穿梭舱滑过门后，门框跟着变色。Teaches: magenta = a path behind. A SHUTTLE slides past and the frame changes color.
近大远小Near and Far
教：□ 远的拉近，近的长大。小楼板先拉近、再长大，拖进缺口。Teaches: □ = bigger. Bring the far BRIDGE closer, grow it, drag it in.
会塌Crumble
教：有裂缝的楼板会塌。先在安全的地方塌一块给你看，再自己跑过同样的楼板。Teaches: cracked slabs collapse. One falls somewhere safe first; then you cross an identical one.
综合All Together
教：把前三件事串起来。拉近楼板搭桥、接中继舱、穿两道门、冲过会塌的桥；卡住约 20 秒才出提示。Teaches: the first three, combined. Bring the BRIDGE in, attach ROOM 02, take two doors, sprint across; hints after ~20 s.
第二、三章 · 危楼与升降Chapters 2–3 · Towers & Lifts每关换一个动作，也换路线A new action and a new route each level
推倒 · 向右Topple · rightward
危楼太矮，倒下去够不着出口。做法：□ 长高 → 往右顶倒。Too short to reach the EXIT. Do: □ grow → push it over.
太高了 · 从右往左Too Tall · right to left
满高度，倒下会砸到出口，推不倒。做法：– 缩矮 → 再推。Full height; falling, it would crush the EXIT. Do: – shrink → push.
推远 · 三层深Send It Back · 3 layers
危楼在中层，缺口在最远层。做法：– 推远 → 走下去 → □ 长高 → 推。TOWER on the mid layer, gap on the far one. Do: – send back → go down → □ grow → push.
升降 · 向上Lift · upward
矮台够不着高处的出口门。做法：拖到门下 → 站上去 → □ 长高，把你托上去。The low LIFT can't reach the high EXIT door. Do: drag it under → step on → □ grow.
往下走 · 从高处往下Going Down · downward
起点在高处，升降台已是满高度。做法：□ 拉近 → 拖到高门下 → 站上屋顶 → – 缩回，把你放下去。You start high; the far LIFT is already tall. Do: □ closer → drag under the high door → walk onto its roof → – shrink.
关卡教学原则Teaching principles
一关只教一件事One idea per level
第一版把三个新概念塞进一关，只能靠 6 步文字指路。拆成 5 关以后，开始界面连规则都不写。
The first version squeezed three ideas into one level and needed six steps of text. Split into five, the start screen states no rules.
先让玩家看到，再让他自己做Show first, then let them do it
第 2 关的穿梭舱自己滑过门后，门框变色两次；第 4 关先在安全的地方塌一块楼板给你看。
In Level 2 the SHUTTLE slides behind the door by itself; in Level 4 a BRIDGE collapses somewhere safe first.
形状呼应就是提示A shape echo is the hint
第 3 关远处那块楼板和缺口一样高、只是窄一截，□ 又一闪一闪。不用文字，玩家也会想到「让它变大」。
In Level 3 the far BRIDGE is as tall as the gap but narrower, and its □ pulses. Players think "make it bigger".
新机制先单独出现，再组合Alone first, then combined
危楼：06 长高 → 07 缩矮 → 08 推远再长高。升降台：09 托上去 → 10 放下来。
Towers: 06 grow → 07 shrink → 08 send back, then grow. Lifts: 09 up → 10 down.
Camera镜头跟随：用镜头讲空间Camera: telling space through the lens
开场Opening先在出口天光上停 0.9 秒，再用 2.3 秒拉回起点。为什么：先建立「三层，终点在最深处」。Holds on the exit 0.9 s, pulls back over 2.3 s. Why: show the goal is deepest.
穿后墙的门Through a door角色先走进去，镜头再跟上。为什么：让换层读成「往里走」，不是缩放。You step in first, the camera follows. Why: a layer change reads as walking in.
镜头呼吸Breathing camera你所在的层不动，越远移得越多；拖窗口时冻结。为什么：有空间感，窗口又不会在鼠标下漂。Your layer stays put, far layers drift; freezes while dragging. Why: depth without drifting windows.
大场面冲击Big impacts危楼砸地：推镜约 5%、顿帧约 0.1 秒、灰白闪光；楼板坍塌约六成力度。为什么：轻重和事件大小对应。TOWER landing: ~5% push, 0.1 s hit-stop, grey flash; a BRIDGE is ~60%. Why: weight matches the event.
减少晃动Reduce motion设置里一键关掉漂移、震屏、推镜、顿帧、闪光和速度线。为什么：照顾容易晕的玩家。One setting turns off drift, shake, push, hit-stop, flashes. Why: for players prone to motion sickness.
查看五版转场迭代Five transition iterations
场景迭代Scene iteration过关转场：改了五版Level transition: five versions
v1 白光吞没v1 White-out太刺眼 · 撤回Too glaring · withdrawn
v2 沉进灰雾v2 Grey haze和背景差不多，雾气太弱 · 撤回Too close to the background · withdrawn
v3 雾团飘来v3 Fog banks不如弥漫的雾 · 撤回Less atmospheric · withdrawn
v4 弥漫的雾v4 Diffuse fog只改节奏：1 秒浓起来，停一会儿，2 秒散开Timing only: 1 s in, hold, 2 s out
v5 雾中蜃楼v5 Fog mirage雾里浮现巨构城市，每次随机A city in the fog, new each time
安静地解谜，事件时爆发Quiet puzzling, bursts on events
本章回答：解谜里玩家有哪些选择，信息给多少，节奏怎么起伏。This part answers: what choices players make, how much the game tells them, and how tension rises and falls.
放在哪一层、多大Which layer, what size
□ / – 同时管远近和大小：03 楼板先拉近再长大；08 危楼要反过来先推远，再长高。
□ and – cover distance and size: Level 3 comes closer then grows; Level 8 goes back first, then grows.
代价Cost长大后可能压到别的窗口，要先挪开。
A grown window may hit others; move them first.
先做什么What first
10 要先把升降台摆好、走上屋顶再缩，顺序反了就下不去；05 中继舱停错位置，会占住楼板的位置。
In Level 10 you must place the LIFT and stand on it before shrinking; in Level 5 a misparked ROOM 02 blocks the BRIDGE.
代价Cost顺序错了，要先把窗口挪回去。
Wrong order means moving windows back.
什么时候走When to go
有裂缝的楼板 3.2 秒后塌；02 可以等穿梭舱自己滑到门后，也可以把它拖过来停住。
A cracked BRIDGE falls after 3.2 s; in Level 2 you can wait for the SHUTTLE or drag it yourself.
代价Cost犹豫就会掉下去，整关自动重来。
Hesitate and you fall; the level restarts.
从哪边推Which side to push
危楼往你顶的反方向倒；它立在哪、有多高，决定它会变成哪一段路。
A TOWER falls away from you; where it stands and how tall it is decide which path it becomes.
代价Cost楼倒错了这一关就过不去，只能按 R 重来。
Topple it wrong and the level is lost; press R.
预告：不打断解谜Previews that don't interrupt
- 按钮预览：品红写「能接上」，很淡的写「没地方，先挪开」。Button preview: magenta "connects", faint "no room, move it first".
- 危楼落点：品红 = 两头都能接上，白 = 接不全，灰 = 倒不下去。Tower landing: magenta = both ends, white = partial, grey = cannot fall.
- 头顶小字：「↓ 走进纵深」「顶住它 →」。Prompts: "↓ Go deeper", "Push it →".
兜底与容错Fallbacks and forgiveness
- 延迟提示：每关一句，卡住 20～30 秒才出现；第 5 关按步骤给，约 20 秒。Delayed hints: one line per level after 20–30 s; Level 5 goes step by step, after about 20 s.
- 掉下去自动整关重来；R 随时重来。Fall and the level restarts; R any time.
- 吸附：录制时发现差半个像素会对不准，改成吸附范围内一律精确对齐。Snapping: half a pixel off broke alignment, so anything in range now aligns exactly.
声音Sound
- 删掉随机钟声；18 处电子「嘀」声全部换成混凝土、钢、碎石、空气的声音。Random bells removed; 18 electronic beeps became concrete, steel, rubble and air.
- 远处的楼先看到倒塌，一两秒后才听到；别的层的事听起来更轻、更闷。Distant towers are seen before heard; other layers sound softer.
- 平时只有低沉的氛围长音；楼板开裂、危楼倒下时换上心跳般的鼓点。Dark ambient pads; a heartbeat drum when a bridge cracks or a tower falls.
每加一个操作，先问：这是窗口本来就有的吗First ask: is this something a real window does?
本章回答：试玩中发现的问题，各自优化成了什么。This part answers: what each playtest problem became.
20处朋友测试和自测发现的问题，都已优化issues found in friend and self-testing, all fixed
7个 2D 原版 bugbugs fixed in the 2D original
10/10关全流程回归通过levels pass full replays
17当前版本号 BUILD 17current build, BUILD 17
来源：朋友测试和自测记录。Source: friend playtests and my own testing.
回到窗口本身Back to the window
换层操作Layer controls
拖着窗口滚滚轮换层，不是窗口的操作Scrolling while dragging isn't a window action
改回标题栏的 □ / –Back to the title-bar □ / –
回到窗口本身Back to the window
自动对位Auto-placement
按钮自动吸到能接上的位置，替玩家摆好Buttons snapped windows into place for you
按完停在原地，位置自己拖Windows stay put; you drag them
关卡 · 朋友反馈Levels · friend feedback
关卡路线Level routes
加入变大变小后，二、三章每关（尤其每章最后一关）都是向右过缺口，相似度太高After grow/shrink was added, every Ch. 2–3 level, especially each chapter's last, crossed a gap to the right
07 从右往左、要缩矮；08 推远到最远层；10 从高处往下走07 right to left; 08 three layers deep; 10 goes downward
教学 · 朋友反馈Teaching · friend feedback
玩法上手Learning to play
一关塞进三个新概念，朋友试玩看不懂怎么玩Three new ideas in one level; friends couldn't tell how to play
先加 6 步文字引导救急，再拆成 5 个教学关Six text steps as a stopgap, then five tutorial levels
机制Mechanics
升降玩法Lift mechanic
纵深版里「可乘坐的窗口」没了，少了一种窗口玩法The depth version lost the rideable window
做成第三章「升降」；原版「随便一扇窗都能顶人」的 bug 不恢复Became Chapter 3 "Lifts"; the old "any window lifts you" bug stays fixed
技术Tech
黑屏Black screen
嵌进网页框时画布是 0×0，之后不再重算Embedded in a frame, the canvas stayed 0×0
每帧检查画布尺寸；渲染出错也不停住，错误写在提示条上Check canvas size every frame; errors show in the hint bar
一次关键修正A key fix自适应提示：按场上状态判断你缺哪一步Adaptive hints: find the missing step from the game state
改之前Before
提示按固定顺序往下走。第 5 关提前进了中层的话，卡住 25 秒后提示会说「跑过楼板」——可楼板根本还没搭。
Hints followed a fixed order. Going into the mid layer early, the hint said "run across the BRIDGE", which wasn't built yet.
改之后After
每一步都有自己的完成条件，每次都从头检查「当前局面缺哪一步」；把放好的窗口又挪走，提示会退回到那一步。约 20 秒才出现，做完就收起。
Each step has a done-condition; the game finds the first unmet one. Undo a step and the hint steps back. Appears after ~20 s, hides once done.
先腾位置Make room中继舱占住了楼板的位置，虚线框标出它该去哪ROOM 02 blocks the BRIDGE; a dashed frame shows where it goes
拉近楼板Bring it closer点远处楼板的 □Click the far BRIDGE's □
接上Attach楼板接到 ROOM 04 左边，ROOM 02 接楼板BRIDGE left of ROOM 04, ROOM 02 to the BRIDGE
走进中层Mid layer走进品红的门Through the magenta door
冲过去Sprint跑过会塌的楼板，进入远层，走进白光Across the collapsing BRIDGE, into the light
让背景变成关卡Turn the background into the level
本章回答：为什么做这个游戏，它是什么。This part answers: why make this game, and what is it?
拖动、最小化、最大化——每个人都会操作窗口。把窗口当成关卡里的房间，玩家不用学，就知道它能「搬」。
Drag, minimize, maximize: everyone already knows windows. Treat them as rooms in a level, and players know right away that they can be moved.
起点Where it started最早的 2D 版The 2D original
7 关加一个 DIY 关卡编辑器。机制有门对齐、最大化 / 最小化、可乘坐的窗口，最后一关把窗口接到「桌面」。
Seven levels and a DIY level editor. Mechanics: lining up doors, maximize and minimize, rideable windows, and a final level that connects to the "desktop".
当时的判断：「搬窗口接路」成立而且新，前两关教学清楚。问题在于画面是通用的暗色科幻界面，背景只是墙纸，和玩法没有关系。
My assessment then: "move windows to build a path" worked and felt fresh. But the visuals were generic dark sci-fi UI, and the background was wallpaper with no link to play.
第一轮工作：先修 7 个 bug（例如普通窗口能把角色顶上去、绕过关卡设计），再重画门和标题栏，让门看起来像门。
First pass: fixed 7 bugs (for example, any window could lift the character and bypass the level design), then redrew doors and title bars so doors read as doors.
Motivation设计动机：三件事Motivation: three things
01
窗口自带操作语言Windows come with a language
拖动、最小化、最大化，每个人都会。拖动直接借用，不需要教；□ / – 保留了按钮的样子，但改成控制纵深（见下一条），所以第 3 关专门教。
Drag, minimize, maximize: everyone knows them. Dragging is borrowed directly; □ and – keep their look but now control depth (see next), so Level 3 teaches them.
02
背景不该只是墙纸The background should not be wallpaper
定下电影感粗野主义后，巨构有了尺度，却只是挂在后面的一张画。当时的问题是：关卡玩法能不能和背景联系起来，从 2D 融合 3D 纵深？我的做法是在横向、纵向之外再叠加第三个方向——纵深，把关卡做成三层的伪 3D 结构，让关卡结构更丰富。
After choosing cinematic brutalism, the megastructure had scale but was only a painting. Could the levels connect to the background, blending 2D into 3D depth? My answer was to add a third direction on top of horizontal and vertical — depth — turning each level into a three-layer pseudo-3D structure with a richer layout.
03
一路往深处走Keep going deeper
把一张张互不相干的平面谜题，连成一段走进巨构深处的旅程。每穿过一道后墙的门，左下角的深度读数就往下走。
Turn unrelated flat puzzles into one journey into the megastructure. Every back-wall door takes the depth readout further down.
Experience goals体验目标：三个设计支柱，每条都写了怎么检验Three design pillars, each with a way to check it
A
往深处走Go deeper
设计Design三层纵深、后墙的门；开场镜头从出口拉回起点；过关时沉进雾里。
Three layers and back-wall doors; the opening shot pulls back from the exit; finishing a level sinks into fog.
检验Check玩完问「这个游戏在玩什么」，看玩家会不会自己说出「往深处走」。
Ask "what is this game about?" Do players say "going deeper" on their own?
B
不靠文字看懂Readable without text
设计Design一关只教一件事；品红 = 接通的路；卡住约 20 秒才出现提示。
One idea per level; magenta = a connected path; hints only after ~20 s stuck.
检验Check有多少人等到了提示；卡在哪一关、卡了多久。
How many players reach a hint; where they get stuck, and for how long.
C
有重量的氛围Atmosphere with weight
设计Design黑白灰加唯一的品红；混凝土、钢、碎石的物理音效；冲击时推镜和顿帧。
Grayscale plus one magenta; concrete, steel and rubble sounds; camera push and hit-stop.
检验Check截图转灰度，仍分得清能拖 / 拖不动、门、角色、出口；声音轻重按事件大小排。
Grayscale screenshots still read; loudness matches event size.
验证与反思Validation & reflection
本章回答：验证了什么，还缺什么，下一步做什么。This part answers: what was tested, what is missing, and what comes next.
10/10自动通关回归automated replays每轮改动后用脚本模拟输入，从「开始」打到完成界面，并检查控制台没有报错。After every change, a script plays from Start to the ending and checks for console errors.
2:22熟练通关时长（人工录屏）practiced run (screen recording)自动通关脚本另测为 114 秒，其中开场镜头 15 秒、转场 31 秒。The auto-play script takes 114 s, including 15 s of opening shots and 31 s of transitions.
≈2dB平静与紧张的音量差calm vs tense紧张时只比平静时响约 2 dB，不爆音；低音层原来比其他层高约 12 dB，已调平。Tense is only about 2 dB louder than calm, with no clipping; the low layer was about 12 dB louder than the rest, now balanced.
−18%代码整理code cleanup5132 行减到 4223 行，只删被覆盖的旧函数，整理前后画面一致。5,132 → 4,223 lines, removing only overridden code; visuals unchanged.
做对了什么What worked
- 让背景变成关卡：巨构从墙纸变成要往里走的空间The background became the level
- 一关只教一件事，开始界面不写规则One idea per level; no rules on the start screen
- 颜色只表达功能：黑白灰加唯一的品红Color only for function: grayscale plus one magenta
- 敢撤回：俯视图、白光转场、三种风格的融合Willing to withdraw: the map, the white-out, the three-style blend
还不够的地方Not enough yet
- 第一版纵深原型一次塞了三个新概念，只能靠文字救场The first depth prototype introduced three ideas at once
- 世界观只有环境叙事，故事外壳还很薄The story frame is still thin
- 操作方式改了三次（滚轮 → 换层按钮 → 变大变小），一开始没守住「窗口」这个主题Controls changed three times; I didn't hold to the window theme from the start
- 快速迭代留下多层覆盖的代码Fast iteration left layers of overriding code
下一步Next
- 新机制：巨梁当承托；探照灯照到就回到起点New mechanics: giant beams; a searchlight that sends you back
- 故事外壳：你是谁，为什么往深处走，雾里的城市是什么A story frame: who you are, why you go deeper
- 编辑器支持分层和危楼Editor support for layers and towers
这个项目里最重要的设计工作，不是加机制，而是让一个新机制被看懂。
The most important design work here wasn't adding mechanics. It was making one new mechanic understood.
Play · BUILD 17
别光看，
去玩一下。Don't just read.
Play it.
完整 10 关和 DIY 关卡编辑器，在浏览器里直接打开，约 2～5 分钟。
All 10 levels plus the DIY editor, right in your browser. About 2–5 minutes.
需要电脑键盘和鼠标。游戏界面为英文。Requires a keyboard and mouse.
Next · 03
丧尸生存解谜关卡Zombie Survival Puzzle Level
下一个项目Next project