feat: 新增第 2 页静物文字画

地、桌、椅与桌下暗枪构成场景,桌上竖排酒杯与烛火,右下角酒桶,右上角吊灯。
This commit is contained in:
rogerwang2008 committed 2026-11-11 02:11:54 +08:00
1 parent 54235eb631
commit b84340fac1
4 files changed
+118 -1

No files matched your search

+10 -1
View File
@@ -2,7 +2,7 @@
一个 28 列 × 44 行的汉字文字画 Demo。黑底、每格一个汉字,空白处由淡色「天」铺满;画面包含晚霞云、落日、飞鸟、天线与城市楼群,上方以整格扣出的黑色标题框居中呈现「关于「甲子」的虚构故事」。
项目规划为三张类似页面,当前实现第 1 页(`page1.html`)与第 3 页(`page3.html`)。
项目规划为三张类似页面,当前实现第 1 页(`page1.html`)、第 2 页(`page2.html`)与第 3 页(`page3.html`)。
## 效果概述
@@ -17,6 +17,7 @@
```
.
├─ page1.html # 第 1 页入口
├─ page2.html # 第 2 页入口
├─ page3.html # 第 3 页入口
├─ pyproject.toml # uv 环境与导出依赖
├─ uv.lock # 依赖锁定
@@ -25,10 +26,12 @@
│ ├─ css/
│ │ ├─ common.css # 三页共用:字体、骨架、网格、标题框
│ │ ├─ page1.css # 第 1 页配色
│ │ ├─ page2.css # 第 2 页配色
│ │ └─ page3.css # 第 3 页配色与前景标题
│ ├─ js/
│ │ ├─ text-scene.js # 共享文字画渲染引擎
│ │ ├─ page1.js # 第 1 页场景数据
│ │ ├─ page2.js # 第 2 页场景数据
│ │ └─ page3.js # 第 3 页场景数据
│ └─ fonts/zpix.ttf # Zpix 像素字体
└─ references/a.html # 原始参考页
@@ -41,6 +44,7 @@
```bash
python -m http.server 8000
# 第 1 页 http://localhost:8000/page1.html
# 第 2 页 http://localhost:8000/page2.html
# 第 3 页 http://localhost:8000/page3.html
```
@@ -49,6 +53,7 @@ python -m http.server 8000
现有页面:
- `page1.html`:完整日落城市文字画,空白处铺淡色「天」。
- `page2.html`:无「天」背景;底排「地」,其上以「桌」「椅」「枪」摆出桌子、椅子与枪。
- `page3.html`:无「天」背景的演职员表;含 35 个演职员 nametag、电线、麻雀、草、消防栓与下半屏火山。
共用与专属:
@@ -108,6 +113,10 @@ uv run playwright install chromium
- 天线:`.ant`(深色款为 `.ant-dark`)。
- 楼群:`.bld` 与 `.bld-1` 至 `.bld-8`。
### 第 2 页(assets/js/page2.js)
`block(x, y, w, h, text, cls)` 按矩形铺字:桌面与桌腿、靠背/座面/椅腿、枪口/枪身/握把都由若干矩形拼出,坐标按格对齐;配色见 `page2.css` 的 `.table`、`.chair`、`.gun`、`.ground`。
### 第 3 页(assets/js/page3.js)
通过 `glyphs` 数组放置任意背景字:`{ text, x, y, cls, vertical }`,坐标仍按格对齐。前景标题 `.credits` 由页面脚本追加,可在 `page3.css` 中调整字号与位置。