diff --git a/README.md b/README.md index 647e2b5..9fefac4 100644 --- a/README.md +++ b/README.md @@ -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` 中调整字号与位置。 diff --git a/assets/css/page2.css b/assets/css/page2.css new file mode 100644 index 0000000..c3a2445 --- /dev/null +++ b/assets/css/page2.css @@ -0,0 +1,15 @@ +/* 第 2 页:无「天」背景;地、桌、椅、枪 */ + +.ground { color: color-mix(in srgb, #8a7350 55%, #000); } +.table { color: color-mix(in srgb, #c08a4e 60%, #000); } +.chair { color: color-mix(in srgb, #d98f3f 65%, #000); } +.gun { color: color-mix(in srgb, #93a9c9 62%, #000); } +.cup { color: color-mix(in srgb, #f2a83c 85%, #000); } +.candle { color: color-mix(in srgb, #efd9a8 65%, #000); } +.flame { color: color-mix(in srgb, #ff4b3a 80%, #000); } +.barrel { color: color-mix(in srgb, #a86a2e 58%, #000); } +.lid { color: color-mix(in srgb, #b03a2e 62%, #000); } +.wine { color: rgba(244, 238, 222, 0.5); } +.lamp { color: color-mix(in srgb, #e0d3bf 58%, #000); } +.bulb { color: #ffe23a; } +.glow { color: color-mix(in srgb, #ffe23a 22%, #000); } diff --git a/assets/js/page2.js b/assets/js/page2.js new file mode 100644 index 0000000..4ab149f --- /dev/null +++ b/assets/js/page2.js @@ -0,0 +1,75 @@ +/* 第 2 页场景数据 + 全部为背景字:地、桌、椅、枪,均按格对齐。 + 本页不铺「天」,空白格保持为空。 */ + +(() => { + /* 按矩形铺字,逐行生成一条 glyph */ + const block = (x, y, w, h, text, cls) => + Array.from({ length: h }, (_, j) => ({ + text: text.repeat(w), + x, + y: y + j, + cls, + })); + + TextScene.render({ + cols: 28, + rows: 44, + skyChar: '', + glyphs: [ + /* 地:最后一排 */ + { text: '地'.repeat(28), x: 0, y: 43, cls: 'ground' }, + + /* 桌:12 格宽;桌面两行,桌腿各 2 格、向内缩一格并落地 */ + ...block(0, 36, 12, 2, '桌', 'table'), + ...block(1, 38, 2, 5, '桌', 'table'), + ...block(9, 38, 2, 5, '桌', 'table'), + + /* 椅:4 格宽,比桌面低一档;右侧靠背、一格座面与两条椅腿 */ + ...block(16, 38, 1, 2, '椅', 'chair'), + ...block(13, 40, 4, 1, '椅', 'chair'), + ...block(13, 41, 1, 2, '椅', 'chair'), + ...block(16, 41, 1, 2, '椅', 'chair'), + + /* 枪:藏在桌子底下,倒数第二行第 6、7 列,倒数第三行第 8 列 */ + ...block(5, 42, 2, 1, '枪', 'gun'), + ...block(7, 41, 1, 1, '枪', 'gun'), + + /* 酒杯:立在桌面之上,竖排两字;左起第 4 格与右起第 3 格 */ + { text: '酒', x: 3, y: 34, cls: 'cup' }, + { text: '杯', x: 3, y: 35, cls: 'cup' }, + { text: '酒', x: 9, y: 34, cls: 'cup' }, + { text: '杯', x: 9, y: 35, cls: 'cup' }, + + /* 烛:两酒杯正中竖排三字,立在桌面上 */ + ...block(6, 33, 1, 3, '烛', 'candle'), + + /* 火:烛焰两字,左上到右下斜排,右下那字正对烛柱 */ + { text: '火', x: 5, y: 31, cls: 'flame' }, + { text: '火', x: 6, y: 32, cls: 'flame' }, + + /* 酒桶:右下角地上,4 格宽;「盖」为顶、「桶」做外壳,内里盛「酒」 */ + ...block(24, 38, 4, 1, '盖', 'lid'), + ...block(24, 39, 1, 3, '桶', 'barrel'), + ...block(27, 39, 1, 3, '桶', 'barrel'), + ...block(25, 39, 2, 3, '酒', 'wine'), + ...block(24, 42, 4, 1, '桶', 'barrel'), + + /* 吊灯:右上角,9 格宽;吊线—倒锥灯罩—T 形灯泡 */ + ...block(23, 0, 1, 3, '灯', 'lamp'), + ...block(21, 3, 5, 1, '灯', 'lamp'), + ...block(20, 4, 7, 1, '灯', 'lamp'), + ...block(19, 5, 9, 1, '灯', 'lamp'), + + /* 光:灯泡四周的暗黄光晕,上方被灯罩遮住不放 */ + ...block(21, 6, 1, 2, '光', 'glow'), + ...block(25, 6, 1, 2, '光', 'glow'), + ...block(22, 7, 1, 1, '光', 'glow'), + ...block(24, 7, 1, 1, '光', 'glow'), + ...block(22, 8, 3, 1, '光', 'glow'), + + ...block(22, 6, 3, 1, '灯', 'bulb'), + { text: '灯', x: 23, y: 7, cls: 'bulb' }, + ], + }); +})(); diff --git a/page2.html b/page2.html new file mode 100644 index 0000000..bb10dbb --- /dev/null +++ b/page2.html @@ -0,0 +1,18 @@ + + +
+ + + +