chore: 初始化项目仓库

.gitattributes

@@ -0,0 +1,4 @@
+# 统一换行符，避免 Windows/Linux 之间来回转换
+* text=auto eol=lf
+
+*.ttf binary

.gitignore

@@ -0,0 +1,13 @@
+# 操作系统
+.DS_Store
+Thumbs.db
+desktop.ini
+
+# 编辑器 / IDE
+.idea/
+.vscode/
+*.iml
+
+# 临时文件
+*.log
+.tmp-*

README.md

@@ -0,0 +1,68 @@
+# 落日 · 文字游戏
+
+一个 28 列 × 44 行的汉字文字画单页。黑底、每格一个汉字，空白处由淡色「天」铺满；画面包含晚霞云、落日、飞鸟、天线与城市楼群，上方以整格扣出的黑色标题框居中呈现「关于「甲子」的虚构故事」。
+
+## 效果概述
+
+- 28 列 × 44 行，严格按字符网格排布，全页文字统一字号。
+- 空白格自动填充淡色「天」，形成低对比背景纹理。
+- 元素按层绘制：云 → 落日 → 飞鸟 → 天线 → 楼群。楼群最后绘制，保证太阳在无楼处仍保留完整圆弧。
+- 标题区域按整格对齐扣空，并叠放黑色面板，居中显示白色标题。
+- 使用 Zpix 像素字体；正文行通过负字距补偿，把单字步进压回 1em。
+
+## 目录结构
+
+```
+.
+├─ index.html              # 页面骨架
+├─ assets/
+│  ├─ css/style.css        # 布局、字号与各元素配色
+│  ├─ js/scene.js          # 场景数据与网格渲染
+│  └─ fonts/zpix.ttf       # Zpix 像素字体
+└─ references/a.html       # 原始参考页
+```
+
+## 运行
+
+直接打开 `index.html` 即可。若需通过本地服务器预览：
+
+```bash
+python -m http.server 8000
+# 浏览器访问 http://localhost:8000
+```
+
+## 调整指南
+
+### 构图（assets/js/scene.js）
+
+| 数据 | 含义 |
+| --- | --- |
+| `clouds` | 云：三行 3/5/3 的云形，x/y 为最宽一行的左上角 |
+| `sun` | 落日：逐行圆形切片，数组顺序对应顶部的红到底部的黄 |
+| `birds` | 飞鸟：每只占 2 格（麻雀 / 海鸥 / 乌鸦） |
+| `antennas` | 天线：单列「线」，从 y 向下叠 h 格 |
+| `buildings` | 楼群：x/y/w/h，n 对应 `.bld-n` |
+| `TITLE` | 标题文案、起始行、行高、左右留格数 |
+
+坐标为 0–27 列、0–43 行；越界会直接抛错提示。
+
+### 样式（assets/css/style.css）
+
+- 整体字号：`.scene` 的 `font-size`，所有元素统一继承。
+- 背景「天」：`.sky`。
+- 云：`.cloud` 的明度与 `.cloud-*` 的色相。
+- 落日：`.sun` 的整体明度（当前为原色 90%），`.sun-t1` 至 `.sun-t17` 为逐行色阶。
+- 飞鸟：`.bird-sparrow`、`.bird-gull`、`.bird-crow`。
+- 天线：`.ant`。
+- 楼群：`.bld` 与 `.bld-1` 至 `.bld-8`。
+- 标题：`.title-panel`（黑色矩形）与 `.title-panel .title`（白色文字及字号）。
+
+## 实现说明
+
+- `scene.js` 先建立 28×44 网格并全部填「天」，再按数组覆盖元素；同 class 的连续字符合并为单个 `span` 输出。
+- 标题区把对应格子清空，并在同一位置叠放绝对定位的黑色面板；边缘与字符整格对齐，不会出现半个字。
+- Zpix 单字步进为 13/12 em，因此 `.line` 使用 `letter-spacing: -0.083333em` 补偿，保证 28 列恰好落在 28em 宽内。
+
+## 字体许可
+
+`assets/fonts/zpix.ttf` 为第三方 Zpix 像素字体，版权归原作者所有；使用或分发前请遵循其原始许可说明。

assets/css/style.css

@@ -0,0 +1,115 @@
+@font-face {
+  font-family: "Zpix";
+  src: url("../fonts/zpix.ttf") format("truetype");
+  font-display: swap;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: #000;
+}
+
+body {
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-family: "Zpix", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+               "Noto Sans SC", "Source Han Sans SC", sans-serif;
+  -webkit-text-size-adjust: 100%;
+}
+
+/* 28 列 × 44 行文字网格，1em = 1 个汉字；
+   字号在这里统一控制，所有元素（含天线）字号完全一致 */
+.scene {
+  position: relative;
+  font-size: min(3.4vw, calc(100dvh / 44));
+  line-height: 1em;
+  width: 28em;
+  height: 44em;
+  user-select: none;
+  font-kerning: none;
+}
+
+.line {
+  display: block;
+  height: 1em;
+  line-height: 1em;
+  white-space: pre;
+  /* Zpix 单字步进为 13/12 em，补偿回 1em，保证 28 列正好落在 28em 内 */
+  letter-spacing: -0.083333em;
+}
+
+/* —— 标题区：按整格扣出的黑色矩形，左右各留 3 格 —— */
+.title-panel {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+
+.title-panel .title {
+  margin: 0;
+  color: #fff;
+  font-size: 1.6em;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+/* —— 背景：空白格里的淡色「天」 —— */
+.sky { color: rgba(190, 200, 240, 0.15); }
+
+/* —— 云：固定颜色，明度取太阳与黑底之间的一半，色相沿用晚霞色 —— */
+.cloud { color: color-mix(in srgb, var(--cloud, #ff9ebb) 35%, #000); }
+.cloud-pink { --cloud: #ff9ebb; }
+.cloud-violet { --cloud: #b98cff; }
+.cloud-orange { --cloud: #ffa95c; }
+.cloud-rose { --cloud: #ff85b3; }
+.cloud-lilac { --cloud: #c98cff; }
+
+/* —— 落日：太阳逐行色调，t1 顶部偏红 → t17 底部偏黄；整体明度为原色的 90% —— */
+.sun { color: color-mix(in srgb, var(--tone, #ff5a36) 90%, #000); }
+.sun-t1 { --tone: #ff5a36; }
+.sun-t2 { --tone: #ff5a36; }
+.sun-t3 { --tone: #ff6533; }
+.sun-t4 { --tone: #ff7330; }
+.sun-t5 { --tone: #ff812d; }
+.sun-t6 { --tone: #ff8f2b; }
+.sun-t7 { --tone: #ff9d29; }
+.sun-t8 { --tone: #ffaa2a; }
+.sun-t9 { --tone: #ffb62d; }
+.sun-t10 { --tone: #ffc132; }
+.sun-t11 { --tone: #ffcb38; }
+.sun-t12 { --tone: #ffd33f; }
+.sun-t13 { --tone: #ffda46; }
+.sun-t14 { --tone: #ffe04e; }
+.sun-t15 { --tone: #ffe556; }
+.sun-t16 { --tone: #ffe95e; }
+.sun-t17 { --tone: #ffec66; }
+
+/* —— 飞鸟 —— */
+.bird-sparrow { color: #e0a45c; }
+.bird-gull { color: #a0c8f0; }
+.bird-crow { color: #b0a8c8; }
+
+/* —— 天线 —— */
+.ant { color: #8a8a9e; }
+
+/* —— 楼群：灰色系，明度与原棕色一致 —— */
+.bld { color: #3f3f3f; }
+.bld-1 { color: #3b3b3b; }
+.bld-2 { color: #343434; }
+.bld-3 { color: #464646; }
+.bld-4 { color: #393939; }
+.bld-5 { color: #4e4e4e; }
+.bld-6 { color: #414141; }
+.bld-7 { color: #494949; }
+.bld-8 { color: #353535; }

assets/js/scene.js

@@ -0,0 +1,160 @@
+/* 落日文字画 · 28 × 44 网格
+   构图全部由下方数组描述；空白格自动用「天」铺满。
+   修改元素只需调整数组中的坐标与尺寸，行列范围：x 0–27，y 0–43。 */
+
+(() => {
+  const COLS = 28;
+  const ROWS = 44;
+
+  /* 云：x/y 为最宽一行的左上角，三行 3/5/3；上下拉开分布 */
+  const clouds = [
+    { x: 10, y: 2, tone: 'pink' },
+    { x: 18, y: 6, tone: 'violet' },
+    { x: 1, y: 10, tone: 'orange' },
+    { x: 23, y: 13, tone: 'lilac' },
+    { x: 4, y: 16, tone: 'rose' },
+  ];
+
+  /* 落日：整体下移贴近楼群，形成日落；
+     色调按数组顺序，顶部偏红 → 底部偏黄 */
+  const sun = [
+    { y: 18, x: 13, w: 2 },
+    { y: 19, x: 10, w: 8 },
+    { y: 20, x: 9, w: 10 },
+    { y: 21, x: 8, w: 12 },
+    { y: 22, x: 7, w: 14 },
+    { y: 23, x: 7, w: 14 },
+    { y: 24, x: 6, w: 16 },
+    { y: 25, x: 6, w: 16 },
+    { y: 26, x: 6, w: 16 },
+    { y: 27, x: 6, w: 16 },
+    { y: 28, x: 6, w: 16 },
+    { y: 29, x: 7, w: 14 },
+    { y: 30, x: 7, w: 14 },
+    { y: 31, x: 8, w: 12 },
+    { y: 32, x: 9, w: 10 },
+    { y: 33, x: 10, w: 8 },
+    { y: 34, x: 13, w: 2 },
+  ];
+
+  /* 飞鸟：数量减少，间距不等，仅少量成对；上下拉开分布 */
+  const birds = [
+    { x: 0, y: 2, kind: 'gull' },
+    { x: 26, y: 2, kind: 'gull' },
+    { x: 1, y: 4, kind: 'sparrow' },
+    { x: 3, y: 8, kind: 'crow' },
+    { x: 6, y: 13, kind: 'gull' },
+    { x: 9, y: 15, kind: 'sparrow' },
+    { x: 26, y: 5, kind: 'crow' },
+    { x: 17, y: 9, kind: 'sparrow' },
+    { x: 21, y: 12, kind: 'gull' },
+    { x: 19, y: 15, kind: 'crow' },
+  ];
+
+  /* 天线：单列「线」，从 y 向下叠 h 格；楼顶在第 31 行，露出部分为 3 / 4 格 */
+  const antennas = [
+    { x: 7, y: 28, h: 3 },
+    { x: 22, y: 27, h: 4 },
+  ];
+
+  /* 楼群：n 对应 .bld-n，最终按 x/y/w/h 铺满「楼」（高度裁到第 44 行） */
+  const buildings = [
+    { n: 1, x: 0, y: 35, w: 3, h: 9 },
+    { n: 2, x: 3, y: 39, w: 3, h: 5 },
+    { n: 3, x: 6, y: 31, w: 4, h: 13 },
+    { n: 4, x: 10, y: 36, w: 3, h: 8 },
+    { n: 5, x: 13, y: 30, w: 4, h: 14 },
+    { n: 6, x: 17, y: 34, w: 3, h: 10 },
+    { n: 7, x: 20, y: 31, w: 4, h: 13 },
+    { n: 8, x: 24, y: 37, w: 4, h: 7 },
+  ];
+
+  /* 标题区：整格扣出的居中矩形，左右各留 3 格 */
+  const TITLE = {
+    text: '关于「甲子」的虚构故事',
+    top: 14,
+    height: 5,
+    side: 3,
+  };
+
+  const BIRD_WORDS = { sparrow: '麻雀', gull: '海鸥', crow: '乌鸦' };
+
+  const grid = Array.from({ length: ROWS }, () =>
+    Array.from({ length: COLS }, () => ({ ch: '天', cls: 'sky' }))
+  );
+
+  const put = (x, y, ch, cls) => {
+    if (x < 0 || x >= COLS || y < 0 || y >= ROWS) {
+      throw new Error(`元素超出网格范围：(${x}, ${y})`);
+    }
+    grid[y][x] = { ch, cls };
+  };
+
+  const putRow = (y, x, n, ch, cls) => {
+    for (let i = 0; i < n; i++) put(x + i, y, ch, cls);
+  };
+
+  for (const { x, y, tone } of clouds) {
+    const cls = `cloud cloud-${tone}`;
+    putRow(y, x + 1, 3, '云', cls);
+    putRow(y + 1, x, 5, '云', cls);
+    putRow(y + 2, x + 1, 3, '云', cls);
+  }
+
+  sun.forEach(({ y, x, w }, i) => {
+    const tone = `sun-t${i + 1}`;
+    for (let dx = 0; dx < w; dx++) put(x + dx, y, '日', `sun ${tone}`);
+  });
+
+  for (const { x, y, kind } of birds) {
+    const [a, b] = BIRD_WORDS[kind];
+    put(x, y, a, `bird-${kind}`);
+    put(x + 1, y, b, `bird-${kind}`);
+  }
+
+  for (const { x, y, h } of antennas) {
+    for (let i = 0; i < h; i++) put(x, y + i, '线', 'ant');
+  }
+
+  for (const { n, x, y, w, h } of buildings) {
+    for (let j = 0; j < h; j++) putRow(y + j, x, w, '楼', `bld bld-${n}`);
+  }
+
+  for (let y = TITLE.top; y < TITLE.top + TITLE.height; y++) {
+    for (let x = TITLE.side; x < COLS - TITLE.side; x++) {
+      grid[y][x] = { ch: '　', cls: 'cut' };
+    }
+  }
+
+  /* 把同 class 的连续字符合并成一个 span，减少 DOM 节点 */
+  const html = grid
+    .map((row) => {
+      let line = '';
+      for (let i = 0; i < COLS; ) {
+        let j = i + 1;
+        while (j < COLS && row[j].cls === row[i].cls) j++;
+        const text = row.slice(i, j).map((cell) => cell.ch).join('');
+        line += `<span class="${row[i].cls}">${text}</span>`;
+        i = j;
+      }
+      return `<div class="line">${line}</div>`;
+    })
+    .join('');
+
+  const scene = document.querySelector('.scene');
+  scene.innerHTML = html;
+
+  const panel = document.createElement('div');
+  panel.className = 'title-panel';
+  panel.style.top = `${TITLE.top}em`;
+  panel.style.left = `${TITLE.side}em`;
+  panel.style.width = `${COLS - TITLE.side * 2}em`;
+  panel.style.height = `${TITLE.height}em`;
+
+  const title = document.createElement('h1');
+  title.className = 'title';
+  title.textContent = TITLE.text;
+
+  panel.append(title);
+  scene.append(panel);
+})();

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<meta name="color-scheme" content="dark">
+<title>落日 · 文字游戏</title>
+<link rel="stylesheet" href="assets/css/style.css">
+<script src="assets/js/scene.js" defer></script>
+</head>
+<body>
+
+  <div class="scene"></div>
+
+</body>
+</html>

references/a.html

@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>落日 · 文字游戏</title>
+<style>
+  * { box-sizing: border-box; }
+  html, body {
+    margin: 0;
+    padding: 0;
+    background: #000;           /* 黑底 */
+  }
+  body {
+    min-height: 100dvh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+                 "Noto Sans SC", "Source Han Sans SC", sans-serif;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  /* 舞台：28 列 × 50 行 的文字网格，1em = 1 个汉字格子 */
+  .scene {
+    position: relative;
+    font-size: min(3.4vw, 1.85vh, 13px);
+    line-height: 1em;
+    width: 28em;
+    height: 50em;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  /* 每一个文字块 */
+  .t {
+    position: absolute;
+    left: calc(var(--x) * 1em);
+    top:  calc(var(--y) * 1em);
+    white-space: pre;      /* 保留空格与换行 */
+    line-height: 1em;
+    letter-spacing: 0;
+    margin: 0;
+  }
+
+  /* 城市：黑底上可见的深灰剪影 */
+  .bld { color: #4a4a5a; }
+
+  /* 天线：小字号，向上多排 */
+  .ant {
+    font-size: 0.45em;
+    line-height: 1em;
+    color: #8a8a9e;
+  }
+</style>
+</head>
+<body>
+
+<div class="scene">
+
+  <!-- ==================== 云 · 晚霞色 ==================== -->
+
+  <!-- 云 A -->
+  <div class="t" style="--x:10;--y:0;color:#ff9ebb">　云云云　
+云云云云云
+　云云云　</div>
+
+  <!-- 云 B -->
+  <div class="t" style="--x:17;--y:1;color:#b98cff">　云云云　
+云云云云云
+　云云云　</div>
+
+  <!-- 云 C -->
+  <div class="t" style="--x:1;--y:2;color:#ffa95c">　云云云　
+云云云云云
+　云云云　</div>
+
+  <!-- 云 E -->
+  <div class="t" style="--x:4;--y:5;color:#ff85b3">　云云云　
+云云云云云
+　云云云　</div>
+
+  <!-- 云 D -->
+  <div class="t" style="--x:23;--y:8;color:#c98cff">　云云云　
+云云云云云
+　云云云　</div>
+
+
+  <!-- ==================== 落日 · 圆盘 ==================== -->
+
+  <div class="t" style="--x:13;--y:10;color:#ff5a36">日日</div>
+  <div class="t" style="--x:10;--y:11;color:#ff5a36">日日日日日日日日</div>
+  <div class="t" style="--x:9;--y:12;color:#ff6533">日日日日日日日日日日</div>
+  <div class="t" style="--x:8;--y:13;color:#ff7330">日日日日日日日日日日日日</div>
+  <div class="t" style="--x:7;--y:14;color:#ff812d">日日日日日日日日日日日日日日</div>
+  <div class="t" style="--x:7;--y:15;color:#ff8f2b">日日日日日日日日日日日日日日</div>
+  <div class="t" style="--x:6;--y:16;color:#ff9d29">日日日日日日日日日日日日日日日日</div>
+  <div class="t" style="--x:6;--y:17;color:#ffaa2a">日日日日日日日日日日日日日日日日</div>
+  <div class="t" style="--x:6;--y:18;color:#ffb62d">日日日日日日日日日日日日日日日日</div>
+  <div class="t" style="--x:6;--y:19;color:#ffc132">日日日日日日日日日日日日日日日日</div>
+  <div class="t" style="--x:6;--y:20;color:#ffcb38">日日日日日日日日日日日日日日日日</div>
+  <div class="t" style="--x:7;--y:21;color:#ffd33f">日日日日日日日日日日日日日日</div>
+  <div class="t" style="--x:7;--y:22;color:#ffda46">日日日日日日日日日日日日日日</div>
+  <div class="t" style="--x:8;--y:23;color:#ffe04e">日日日日日日日日日日日日</div>
+  <div class="t" style="--x:9;--y:24;color:#ffe556">日日日日日日日日日日</div>
+  <div class="t" style="--x:10;--y:25;color:#ffe95e">日日日日日日日日</div>
+  <div class="t" style="--x:13;--y:26;color:#ffec66">日日</div>
+
+
+  <!-- ==================== 飞鸟 · 两斜行 ==================== -->
+
+  <!-- 左行：从太阳左上角向左上飞到左边界（10 只） -->
+  <div class="t" style="--x:5.5;--y:14;color:#e0a45c">麻雀</div>
+  <div class="t" style="--x:4.92;--y:13;color:#a0c8f0">海鸥</div>
+  <div class="t" style="--x:4.34;--y:12;color:#b0a8c8">乌鸦</div>
+  <div class="t" style="--x:3.76;--y:11;color:#e0a45c">麻雀</div>
+  <div class="t" style="--x:3.18;--y:10;color:#a0c8f0">海鸥</div>
+  <div class="t" style="--x:2.6;--y:9;color:#b0a8c8">乌鸦</div>
+  <div class="t" style="--x:2.02;--y:8;color:#e0a45c">麻雀</div>
+  <div class="t" style="--x:1.44;--y:7;color:#a0c8f0">海鸥</div>
+  <div class="t" style="--x:0.86;--y:6;color:#b0a8c8">乌鸦</div>
+  <div class="t" style="--x:0.28;--y:5;color:#e0a45c">麻雀</div>
+
+  <!-- 右行：从更高处向右上飞到右边界（10 只） -->
+  <div class="t" style="--x:19;--y:11;color:#b0a8c8">乌鸦</div>
+  <div class="t" style="--x:19.7;--y:10;color:#a0c8f0">海鸥</div>
+  <div class="t" style="--x:20.4;--y:9;color:#e0a45c">麻雀</div>
+  <div class="t" style="--x:21.1;--y:8;color:#b0a8c8">乌鸦</div>
+  <div class="t" style="--x:21.8;--y:7;color:#a0c8f0">海鸥</div>
+  <div class="t" style="--x:22.5;--y:6;color:#e0a45c">麻雀</div>
+  <div class="t" style="--x:23.2;--y:5;color:#b0a8c8">乌鸦</div>
+  <div class="t" style="--x:23.9;--y:4;color:#a0c8f0">海鸥</div>
+  <div class="t" style="--x:24.6;--y:3;color:#e0a45c">麻雀</div>
+  <div class="t" style="--x:25.3;--y:2;color:#b0a8c8">乌鸦</div>
+
+
+  <!-- ==================== 天线 · 小字号向上多排 ==================== -->
+
+  <div class="t" style="--x:7.55;--y:25.6"><div class="ant">天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线</div></div>
+
+  <div class="t" style="--x:21.5;--y:25.6"><div class="ant">天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线
+天线</div></div>
+
+
+  <!-- ==================== 城市 · 楼群 ==================== -->
+
+  <!-- 楼 1（列 0-2，行 35-49） -->
+  <div class="t bld" style="--x:0;--y:35">楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼</div>
+
+  <!-- 楼 2（列 3-5，行 39-49） -->
+  <div class="t bld" style="--x:3;--y:39">楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼</div>
+
+  <!-- 楼 3（列 6-9，行 31-49） -->
+  <div class="t bld" style="--x:6;--y:31">楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼</div>
+
+  <!-- 楼 4（列 10-12，行 36-49） -->
+  <div class="t bld" style="--x:10;--y:36">楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼</div>
+
+  <!-- 楼 5（列 13-16，行 30-49，最高的楼） -->
+  <div class="t bld" style="--x:13;--y:30">楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼</div>
+
+  <!-- 楼 6（列 17-19，行 34-49） -->
+  <div class="t bld" style="--x:17;--y:34">楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼
+楼楼楼</div>
+
+  <!-- 楼 7（列 20-23，行 31-49） -->
+  <div class="t bld" style="--x:20;--y:31">楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼</div>
+
+  <!-- 楼 8（列 24-27，行 37-49） -->
+  <div class="t bld" style="--x:24;--y:37">楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼
+楼楼楼楼</div>
+
+</div>
+
+</body>
+</html>