feat: 新增 page3 演职员表并拆分多页资源

- 新增 page3.html：无「天」背景的演职员表与火山场景 - 重构为页面专属 CSS/JS 与共用的 text-scene 渲染引擎 - PDF 导出支持 --page 参数
2026-11-11 00:13:14 +08:00
1 parent b9ed01d91b
commit 319ba1890a
@@ -0,0 +1,134 @@
+/* 第 3 页场景数据
+   前景：演职员表；背景：电线、麻雀、枪、草。
+   本页不铺「天」，空白格保持为空。 */
+
+(() => {
+  /* 固定种子的噪声，保证每次渲染一致 */
+  const noise = (x, y) => {
+    let h = Math.imul(x, 374761393) + Math.imul(y, 668265263);
+    h = Math.imul(h ^ (h >>> 13), 1274126177);
+    return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+  };
+
+  /* 火山：占据下半屏，下 2/3 为山体、上 1/3 为熔岩棋盘格 */
+  const volcano = [];
+  const VOLCANO_TOP = 21;
+  const VOLCANO_BOTTOM = 42;
+
+  /* 每列的熔岩下沿，形成不规则的熔岩流 */
+  const lavaBottom = Array.from({ length: 28 }, (_, x) => {
+    return VOLCANO_TOP + 6 + Math.floor(noise(x, 3) * 3);
+  });
+  [5, 13, 21].forEach((x) => {
+    lavaBottom[x] += 4 + Math.floor(noise(x, 9) * 3);
+  });
+
+  /* 两层熔岩的分界：按列小幅随机起伏 */
+  const lavaSplit = Array.from({ length: 28 }, (_, x) => {
+    const offset = Math.round((noise(x, 13) - 0.5) * 4);
+    return Math.max(
+      VOLCANO_TOP + 2,
+      Math.min(VOLCANO_TOP + 5, VOLCANO_TOP + 3 + offset)
+    );
+  });
+
+  /* 主熔岩区以下为山体，两侧做对称平滑处理 */
+  const ROCK_START = VOLCANO_TOP + 7;
+
+  for (let y = VOLCANO_TOP; y <= VOLCANO_BOTTOM; y++) {
+    /* 距底部 5 格起铺满整幅宽度，避免山体过陡 */
+    const fullWidthAt = VOLCANO_BOTTOM - 5;
+    const t = (y - VOLCANO_TOP) / (fullWidthAt - VOLCANO_TOP);
+    const baseWidth =
+      y >= fullWidthAt ? 28 : Math.round(10 + 18 * Math.min(1, Math.max(0, t)));
+
+    let width;
+    let left;
+
+    if (y < ROCK_START) {
+      /* 熔岩区保持原有随机形状 */
+      const jitter =
+        y >= fullWidthAt ? 0 : Math.round((noise(0, y) - 0.5) * 2);
+      width = Math.max(4, Math.min(28, baseWidth + jitter));
+      left = Math.floor((28 - width) / 2);
+      left += Math.round((noise(1, y) - 0.5) * 2);
+      left = Math.max(0, Math.min(28 - width, left));
+      if (y === VOLCANO_TOP + 1) left = Math.max(0, left - 1);
+    } else {
+      /* 山体左右对称，宽度取偶数和，保留低频小幅随机 */
+      const wobble = Math.round((noise(7, Math.floor(y / 3)) - 0.5) * 2);
+      let w = y >= fullWidthAt ? 28 : Math.min(28, baseWidth + wobble);
+      w -= w % 2;
+      width = Math.max(4, w);
+      left = (28 - width) / 2;
+    }
+
+    /* 顶部火山口：仅两行凹下，第一行缺口更宽 */
+    const craterGap = y < ROCK_START ? [4, 2][y - VOLCANO_TOP] || 0 : 0;
+    const gapStart = craterGap ? Math.floor((width - craterGap) / 2) : 0;
+
+    for (let i = 0; i < width; i++) {
+      if (craterGap && i >= gapStart && i < gapStart + craterGap) continue;
+
+      const x = left + i;
+      const isLava = y <= lavaBottom[x];
+      const isUpperLava = isLava && y <= lavaSplit[x];
+
+      volcano.push({
+        text: isLava ? ((x + y) % 2 === 0 ? '熔' : '岩') : '石',
+        x,
+        y,
+        cls: isLava ? (isUpperLava ? 'lava-a' : 'lava-b') : 'rock',
+      });
+    }
+  }
+
+  /* 第十行左侧补一个「熔」 */
+  const row10 = volcano.filter((cell) => cell.y === VOLCANO_TOP + 9);
+  const row10Left = Math.min(...row10.map((cell) => cell.x));
+  volcano.push({
+    text: '熔',
+    x: row10Left - 1,
+    y: VOLCANO_TOP + 9,
+    cls: 'lava-b',
+  });
+
+  TextScene.render({
+    cols: 28,
+    rows: 44,
+    skyChar: '',
+    glyphs: [
+      /* 电线：整行贯穿页面 */
+      { text: '电线'.repeat(14), x: 0, y: 8, cls: 'wire' },
+      /* 麻雀：竖排于从左到右第四格，落在电线上方 */
+      { text: '麻雀', x: 3, y: 6, cls: 'sparrow', vertical: true },
+      /* 火山铺在底部背景，枪、草、消防栓在其上层 */
+      ...volcano,
+      /* 枪：多个「枪」拼出枪形，占最右 4 列，枪口指向左上方的麻雀 */
+      { text: '枪', x: 24, y: 20, cls: 'gun' },
+      { text: '枪', x: 25, y: 20, cls: 'gun' },
+      { text: '枪', x: 25, y: 21, cls: 'gun' },
+      { text: '枪', x: 26, y: 21, cls: 'gun' },
+      { text: '枪', x: 26, y: 22, cls: 'gun' },
+      { text: '枪', x: 27, y: 22, cls: 'gun' },
+      { text: '枪', x: 27, y: 23, cls: 'gun' },
+      { text: '枪', x: 27, y: 24, cls: 'gun' },
+      /* 草：最底部一排 */
+      { text: '草'.repeat(28), x: 0, y: 43, cls: 'grass' },
+      /* 消防栓：最后三行分散竖排九根，左侧留 2 格 */
+      ...[2, 5, 8, 10, 13, 16, 19, 23, 25].map((x) => ({
+        text: '消防栓',
+        x,
+        y: 41,
+        cls: 'hydrant',
+        vertical: true,
+      })),
+    ],
+  });
+
+  const scene = document.querySelector('.scene');
+  const credits = document.createElement('h1');
+  credits.className = 'credits';
+  credits.textContent = '演职员表';
+  scene.append(credits);
+})();