feat: 新增第 2 页静物文字画
地、桌、椅与桌下暗枪构成场景，桌上竖排酒杯与烛火，右下角酒桶，右上角吊灯。
This commit is contained in:
rogerwang2008 committed
1 parent
54235eb631
commit
b84340fac1
4 files changed
+118
-1
No files matched your search
@@ -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` 中调整字号与位置。
|
||||
|
||||
@@ -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); }
|
||||
@@ -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' },
|
||||
],
|
||||
});
|
||||
})();
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<!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/common.css">
|
||||
<link rel="stylesheet" href="assets/css/page2.css">
|
||||
<script src="assets/js/text-scene.js" defer></script>
|
||||
<script src="assets/js/page2.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="scene"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user