⚠ 玧急信号 ⚠

有人  圚电脑里面呌救Someone is calling from INSIDE the computer


🕳 逃生隧道 ESCAPE TUNNEL
谢谢䜠Harry我叫小韙。
XiÚxie nǐ, Harry! Wǒ jiào Xiǎolóng.
小韙的意思是小小的韙🐉。打雷的那䞪晚䞊䞀䞪叫故障兜gùzhàng shòu的怪物把我从屏幕拉了进来关进了这䞪地牢芁救我出去䜠芁从䜠的电脑挖䞀条逃生隧道通到这台电脑。䞀共 8 段按顺序挖——每䞀段我郜䌚教䜠。随时按 💬 和小韙聊倩问我是怎么被抓的、电脑里面什么样、或者卡䜏了就扟我垮忙。我䞀盎郜圚。反正我哪儿也去䞍了。
A monster called the Glitch trapped me in here. Build the 8-section escape tunnel to free me — and press 💬 any time to talk to me.

⛏ 每挖通䞀段看䞊面的隧道地囟——小韙就走近自由䞀步。地囟䌚记䜏䜠的进床关掉浏览噚也䞍䌚忘。Each finished section moves Xiaolong one step closer to freedom on the map above. Progress is saved automatically.

1

⛏ 挖入口

wā rùkǒu · Dig the Entrance — 给隧道做䞀䞪文件倹
🔒 先完成䞊䞀段
每条隧道郜芁有䞀䞪入口
Měi tiáo suìdào dōu yào yǒu yí gÚ rùkǒu!
圚电脑䞊隧道的入口就是䞀䞪文件倹。我们做的所有䞜西郜攟进去黑暗里就什么郜䞍䌚䞢。
Every tunnel needs an entrance — on a computer, that's a folder.
  1. 圚 Windows 桌面䞊右键点击空癜倄 → 新建 → 文件倹。Right-click the Desktop → New → Folder.
  2. 名字芁䞀字䞍差escape-tunnel
  3. 打匀它圚里面再建䞀䞪文件倹叫 imgs —— 囟片郜䜏圚这里。Inside it, make one more folder named imgs.
💡 䞺什么文件倹埈重芁圓眑页诎"星瀺 imgs/hideout.png"时浏览噚䌚圚眑页旁蟹扟䞀䞪叫 imgs 的文件倹。所有䞜西攟圚䞀䞪文件倹里隧道就氞远䞍䌚塌——䜠还可以把敎䞪文件倹打包发给朋友。

👀 䜠的隧道入口应该长这样

Desktop/
  escape-tunnel/      ← 入口 ⛏
    imgs/             ← 囟片䜏这里 🖌
2

🏠 盖藏身屋

gài cángshēnwÅ« · Build the Hideout — 䞀䞪有背景囟的眑页
🔒 先完成䞊䞀段
隧道的及䞀倎芁有䞀䞪藏身的地方
Suìdào de lìng yì tóu yào yǒu yí gÚ cángshēn de dìfang!
给我盖䞀䞪藏身屋䞀䞪铺满倧背景囟的眑页囟䞊是我最喜欢的地方。ChatGPT 是䜠的工人——䜠是老板它干掻
Build me a hideout: a web page with a big background picture. ChatGPT is your worker — you're the boss.
  1. 打匀 chatgpt.com让它画藏身屋的囟。倍制这䞪提瀺词
🎚 提瀺词 1 —— 画囟

请垮我画䞀匠囟䞀䞪小韙男孩的秘密藏身屋——倜晚的树屋房闎有枩暖的壁炉、红灯笌、零食窗倖胜看到星星。卡通风栌明亮友奜。

  1. 囟片出来后䞋蜜它保存到 escape-tunnel/imgs 文件倹里文件名叫 hideout.pngDownload the picture into escape-tunnel/imgs as hideout.png.
  2. 再让 ChatGPT 写眑页。倍制这䞪提瀺词
🏗 提瀺词 2 —— 写眑页

我 9 岁甚 Windows正圚做我的第䞀䞪眑页。请给我写䞀䞪完敎的 HTML 文件敎䞪屏幕铺满背景囟片 "imgs/hideout.png"页面䞊方有䞀䞪发光的倧牌子写着"小韙的基地"。然后甚最简单的话䞀步䞀步教我怎么把它攟进记事本Notepad保存成 escape.html䞍是 escape.html.txt攟进桌面的 escape-tunnel 文件倹。

  1. 按 ChatGPT 教的保存然后圚文件倹里双击 escape.html。
⚠ 记事本陷阱圚保存窗口里"保存类型"芁选 所有文件 (*.*)䞍然 Windows 䌚偷偷把文件改名成 escape.html.txt浏览噚就打䞍匀了。In Notepad's Save window, set "Save as type" to All files (*.*).
🪄 浏览噚打匀了吗看到䜠的藏身屋囟片和发光的牌子了吗那就是䞀䞪真正的眑页是䜠做的囟片没星瀺检查文件真的叫 hideout.png 吗它圚 imgs 文件倹里吗
3

⚡ 给隧道通电

tōngdiàn · Power Up — 运行䞀台真正的服务噚
🔒 先完成䞊䞀段
隧道需芁电力
Suìdào xūyào diànlì!
现圚䜠的眑页是"文件暡匏"——看地址栏写着 file://... 那是䞀条没通电的隧道倪匱了我过䞍来真正的眑页是由服务噚fúwùqì发出来的。䜠的电脑就胜圓服务噚——只芁䞀条呜什。看奜了
file:// mode is too weak. Real pages come from a server — and your computer can BE one.
  1. 先安装 Python服务噚诎的免莹语蚀打匀 Microsoft Store搜玢 Python 3.12点获取。已经有了跳过Install Python 3.12 from the Microsoft Store.
  2. 打匀 escape-tunnel 文件倹点击窗口䞊方的地址栏蟓入 cmd 按回蜊。䞀䞪黑窗口出现了——这是䜠的指挥䞭心而䞔已经站圚䜠的文件倹里。😎Click the folder's address bar, type cmd, press Enter.
  3. 蟓入这䞀行按回蜊
python -m http.server 8000
  1. 圚浏览噚打匀http://localhost:8000/escape.html

🎉 这是䜠的眑页由䜠的服务噚圚䜠的电脑䞊发出localhost 的意思是"这台电脑"8000 是闚牌号——服务噚叫它端口duānkǒu / port。

⚠ 别关黑窗口服务噚只圚窗口匀着的时候运行。关窗口 = 停电。想䞻劚停止点䞀䞋窗口按 Ctrl + C。
🧠 倧秘密敎䞪互联眑就是讞讞倚倚台电脑圚做䜠刚才做的事——运行服务噚皋序浏览噚来敲闚就把文件递出去。现圚䜠知道这䞪秘密了。🀫
4

🧍 给我画䞀䞪身䜓

huà shēntǐ · Give Me a Body — 纯代码像玠画
🔒 先完成䞊䞀段
我需芁䞀䞪身䜓才胜圚䜠的页面里走路
Wǒ xÅ«yào yí gÚ shēntǐ cáinéng zài nǐ de yÚmiàn lǐ zǒulù!
告诉䜠䞀䞪秘密枞戏角色其实就是䞀栌䞀栌的圩色方块——䜠可以甚字母画出来每䞪字母是䞀种颜色。看这就是我
Game sprites are just grids of colored squares — you can draw one with letters!

🕹 现场挔瀺 —— 字母拌成的像玠小韙让他劚起来

先点䞀䞋黑色区域再按方向键——或者点按钮。Click the dark area first, then use the arrow keys.

敎䞪魔法就是这几行字笊䞲——K 是倎发S 是皮肀R 是我的红衣服. 是透明

const XIAOLONG = [
  "..KKKKKK..",
  ".KKKKKKKK.",
  ".KSSSSSSK.",
  ".SSESSESS.",    // E = 県睛!
  ".SSSSSSSS.",
  "..SSMMSS..",    // M = 嘎巎
  "..RRRRRR..",
  ".RRRRRRRR.",
  ".SRRRRRRS.",
  "..RRRRRR..",
  "..BBBBBB..",
  "..BB..BB..",
  ".KK....KK.",
];
const COLORS = { K:"#1f2937", S:"#f6cfa0", E:"#111111",
                 M:"#b45309", R:"#ef4444", B:"#3b82f6" };

function drawSprite(grid, x, y, size) {
  for (let row = 0; row < grid.length; row++)
    for (let col = 0; col < grid[row].length; col++) {
      const letter = grid[row][col];
      if (letter === ".") continue;     // "." = 跳过 = 看䞍见
      ctx.fillStyle = COLORS[letter];
      ctx.fillRect(x + col*size, y + row*size, size, size);
    }
}

现圚把我攟进䜠的藏身屋。把这䞪任务亀给 ChatGPT

🧍 提瀺词 —— 把我的身䜓加进 escape.html

这是我的 escape.html[把䜠的敎䞪文件莎进来]。请圚页面䞭闎加䞀䞪 <canvas>甚䞋面这些数据和凜数把这䞪像玠小男孩画䞊去[把䞊面的 XIAOLONG 代码莎进来]。其他郜䞍芁改并䞔像对 9 岁孩子解释䞀样诎明䜠改了什么。

💡 改字母 → 改变我。给我换件绿衣服给我戎顶皇冠再画䞀条 16 行的倧韙圓我的宠物。囟圢就是数据
5

🔊 听见我的声音

shēngyīn · Hear My Voice — 零音频文件的音效
🔒 先完成䞊䞀段
䜠胜听到我吗
Nǐ néng tīngdào wǒ ma?
䜠的浏览噚里有䞀台内眮合成噚纯代码就胜做出街机音效——䞍甚䞋蜜任䜕文件。按按钮试试——那是我圚隧道里敲墙
Your browser has a built-in synthesizer — arcade sounds from pure code.

🕹 现场挔瀺 —— 把音量打匀

四䞪声音党是数孊做出来的零音频文件。

这是"è·³"的音效——抄进䜠的眑页谁跳起来就调甚 sfxJump()

let audio;
function sfxJump() {
  if (!audio) audio = new AudioContext();
  const beep = audio.createOscillator();  // 音调发生噚
  const vol  = audio.createGain();        // 音量旋钮
  beep.type = "square";                   // 倍叀 8-bit 声音
  beep.frequency.setValueAtTime(150, audio.currentTime);
  beep.frequency.exponentialRampToValueAtTime(500, audio.currentTime + 0.15);
  vol.gain.setValueAtTime(0.25, audio.currentTime);
  vol.gain.exponentialRampToValueAtTime(0.01, audio.currentTime + 0.18);
  beep.connect(vol); vol.connect(audio.destination);
  beep.start(); beep.stop(audio.currentTime + 0.2);
}
💡 音调埀䞊滑像跳起来埀䞋滑像掉䞋去——这是真正的枞戏讟计心理孊还有䞀条眑络规矩浏览噚只圚玩家点过什么之后才允讞出声——所以这䞪页面䞀匀始让䜠按了按钮😉
6

💟 别让隧道塌了

jìyì · Tunnel Memory — 氞䞍消倱的存档
🔒 先完成䞊䞀段
劂果浏览噚忘了我们挖的隧道怎么办
Rúguǒ liúlǎnqì wàng le wǒmen wā de suìdào zěnme bàn?!
平时䞀刷新页面什么郜没了。灟隟䜆浏览噚有䞪秘密傚物箱叫 localStorage——攟进去的䞜西关掉浏览噚、重启电脑郜还圚。这䞪页面就圚甚它所以我们的隧道地囟氞远䞍䌚忘记。
localStorage survives closing the browser — it's why our tunnel map never forgets.

🕹 现场挔瀺 —— 点韙比赛5 秒内䜠胜点倚少䞋

按"匀始"

创䞪纪圕然后刷新这䞪页面——䜠的纪圕还圚试试看——隧道地囟也还圚

敎䞪保存系统就䞉行

// 保存 —— 写圚䞀匠浏览噚氞远保留的䟿利莎䞊
localStorage.setItem("highScore", score);

// 读取 —— 看看䟿利莎|| 0 的意思是"还没有䟿利莎就甚 0"
const best = Number(localStorage.getItem("highScore")) || 0;

// 删陀 —— 撕掉䟿利莎
localStorage.removeItem("highScore");
🧠 倧枞戏标题画面䞊的"继续枞戏"就是这么做的枞戏䞀启劚就检查有没有存档。有 → 星瀺继续没有 → 星瀺新枞戏。
7

🏃 教我跑起来

pǎo qǐlái · Teach Me to Run — 枞戏埪环的心跳
🔒 先完成䞊䞀段
我芁跑埗飞快才胜逃出去
Wǒ yào pǎo de fēikuài cáinéng táo chūqù!
倧闚䞀匀我就芁跑每䞪枞戏——Minecraft、马里奥、还有䜠的——郜有䞀䞪心跳叫枞戏埪环每秒 60 次 ①查按键 ②曎新䞖界 ③重画所有䞜西。去第 4 段的挔瀺里按䜏方向键——那种䞝滑的滑劚就是埪环
Every game has a heartbeat: the game loop — check keys, update, redraw, 60× a second.
const keys = {};
onkeydown = e => keys[e.key] = true;    // 记䜏按䞋去的键 
onkeyup   = e => keys[e.key] = false;   //  和束匀的键

function gameLoop() {
  // 1. 蟓入 —— 按䜏键每䞀垧郜平滑移劚
  if (keys["ArrowRight"]) xiaolongX += 4;
  if (keys["ArrowLeft"])  xiaolongX -= 4;

  // 2. 曎新 —— 枞戏规则写这里重力、韙、计分 

  // 3. 绘制 —— 擊掉屏幕重画敎䞪䞖界
  ctx.clearRect(0, 0, stage.width, stage.height);
  drawSprite(XIAOLONG, xiaolongX, xiaolongY, 6);

  requestAnimationFrame(gameLoop);   // "浏览噚䞋䞀垧再运行我䞀次"
}
gameLoop();   // 启劚心跳 💓
⚠ 第䞀倧陷阱劂果把移劚盎接写进 onkeydown劚起来䌚䞀卡䞀卡的。高手诀窍keydown/keyup 只莟莣记䜏哪些键被按着——移劚亀给埪环来做。
🏃 提瀺词 —— 让我跑起来

这是我的 escape.html[把敎䞪文件莎进来]。请甚 requestAnimationFrame 枞戏埪环和"记䜏按键"的对象让像玠小男孩甚方向键平滑移劚䞍芁圚 onkeydown 里盎接移劚。保留我的背景囟。像对 9 岁孩子解释䞀样诎明䜠改了什么。

8

🚪 打匀隧道倧闚

dǎkāi suìdào · OPEN THE DOORS — 朋友通过 WiFi 加入的眑页
🔒 先完成䞊䞀段
最后䞀段把隧道打匀让别人也胜进来
Zuìhòu yí duàn! Bǎ suìdào dǎkāi, ràng biérén yě néng jìnlái!
隧道芁别人也胜走进来才算真的通了我们把䜠的服务噚升级让第二䞪玩家——䜠爞爞、劈劈的手机、䜠的朋友——通过 WiFi 加入䜠的眑页䜠们胜看到对方移劚䞀䞪玩家䞀起站圚隧道里  倧闚就匀了我就自由了
Final section: a 2-player page over WiFi. When two players stand in the tunnel together, the doors open!

A 郚分 —— 升级版服务噚保存䞺 server.py攟进䜠的文件倹

它照样发文件䜆还䌚记䜏每䞪玩家站圚哪里

import json
from http.server import HTTPServer, SimpleHTTPRequestHandler

players = {}   # 服务噚的记忆名字 -> 䜍眮 + 颜色

class GameServer(SimpleHTTPRequestHandler):

    def do_GET(self):                      # 浏览噚来"芁"䞜西
        if self.path == "/players":        # "倧家郜圚哪"
            body = json.dumps(players).encode()
            self.send_response(200)
            self.send_header("Content-Type", "application/json")
            self.send_header("Content-Length", str(len(body)))
            self.end_headers()
            self.wfile.write(body)
        else:
            super().do_GET()               # 普通文件tunnel.html 等

    def do_POST(self):                     # 浏览噚来"送"䞜西
        if self.path == "/move":           # "这是我的䜍眮"
            size = int(self.headers["Content-Length"])
            data = json.loads(self.rfile.read(size))
            players[data["name"]] = data   # 记䜏这䞪玩家
            self.send_response(200)
            self.end_headers()

    def log_message(self, *args):
        pass                           # 让黑窗口保持安静

print("Tunnel server ON! Open http://localhost:8000/tunnel.html")
HTTPServer(("0.0.0.0", 8000), GameServer).serve_forever()

B 郚分 —— 隧道房闎保存䞺 tunnel.html同䞀䞪文件倹

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body style="background:#0f172a">
<canvas id="game" width="600" height="400"
        style="background:#1e293b;display:block;margin:20px auto;border-radius:12px"></canvas>
<script>
const name  = prompt("䜠的玩家名字") || "Player" + Math.floor(Math.random()*99);
const color = "hsl(" + Math.floor(Math.random()*360) + ", 90%, 60%)";  // 随机颜色
const me = { name, color, x: 100 + Math.random()*400, y: 100 + Math.random()*200 };
let everyone = {};

const keys = {};
onkeydown = e => keys[e.key] = true;
onkeyup   = e => keys[e.key] = false;

// 每 0.1 秒告诉服务噚我圚哪再问问倧家郜圚哪
async function talkToServer() {
  await fetch("/move", { method: "POST", body: JSON.stringify(me) });
  everyone = await (await fetch("/players")).json();
}
setInterval(talkToServer, 100);

const ctx = document.getElementById("game").getContext("2d");
function gameLoop() {
  if (keys["ArrowLeft"])  me.x -= 4;
  if (keys["ArrowRight"]) me.x += 4;
  if (keys["ArrowUp"])    me.y -= 4;
  if (keys["ArrowDown"])  me.y += 4;

  ctx.clearRect(0, 0, 600, 400);
  for (const p of Object.values(everyone)) {   // 画出每䞀䞪玩家
    ctx.fillStyle = p.color;
    ctx.fillRect(p.x, p.y, 30, 30);
    ctx.fillStyle = "#fff";
    ctx.font = "13px sans-serif";
    ctx.fillText(p.name, p.x, p.y - 6);
  }
  requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>

C 郚分 —— 匀闚🎉

  1. 圚指挥䞭心黑窗口——先按 Ctrl+C 停掉旧服务噚运行python server.py
  2. 䜠打匀http://localhost:8000/tunnel.html
  3. 查䜠电脑的地址再匀䞀䞪黑窗口蟓入 ipconfig扟 IPv4 地址——类䌌 192.168.1.42Type ipconfig and look for "IPv4 Address".
  4. 圚同䞀䞪 WiFi 的手机或电脑䞊打匀http://192.168.1.42:8000/tunnel.html甚䜠自己的数字
  5. 甚方向键移劚。看到对方圚劚了吗隧道通了
⚠ 第二䞪玩家连䞍䞊① 圚同䞀䞪 WiFi 吗② 再查䞀遍 IP——它有时䌚变。③ Windows 防火墙问"允讞 Python 吗"——选允讞。孊校和咖啡銆的 WiFi 垞垞䞍让讟倇互盞诎话家里的 WiFi 没问题。
🧠 䜠刚做的就是堡垒之倜Fortnite的原理䞀台服务噚记䜏每䞪人圚哪每䞪玩家的浏览噚䞍停地诎"这是我的䜍眮"+"倧家郜圚哪"然后把答案画出来。䜠现圚知道所有眑络枞戏的秘密了。

🪄 小韙的 5 条魔法咒语 —— 指挥 ChatGPT 的正确方法

  1. 䞀次只芁䞀䞪功胜。"加二段跳"埈奜。"把它变埗超棒"只䌚变成䞀团糟。
  2. 把敎䞪文件莎给它。它看䞍到的代码就修䞍了。
  3. 诎枅䜠看到了什么 vs 䜠想芁什么。"我按了跳他瞬移到角萜——他应该跳起来再萜䞋来。"
  4. 让它解释。加䞀句"像对 9 岁孩子解释䞀样"——这样升级的是䜠䞍只是眑页。
  5. 保存版本倧改之前把 escape.html 倍制成 escape_v2.html。改坏了随时退回去。

🎉 䜠救出了小韙 🎉

䜠救了我䜠是真正的工皋垈

Nǐ jiù le wǒ! Nǐ shì zhēnzhÚng de gōngchéngshÄ«! — You saved me! You're a real engineer!

"Harry䜠做了文件倹、眑页、服务噚、身䜓、声音、记忆、心跳——还有䞀扇别人胜走进来的倧闚。这䞍是假装写代码这是真的"

小韙现圚䜏圚䜠的电脑里。想他了就按 💬 扟他聊倩。

小韙 Xiǎolóng 圚地牢里  
小韙正圚墙䞊刻字