落日 · 文字游戏

一个 28 列 × 44 行的汉字文字画单页。黑底、每格一个汉字，空白处由淡色「天」铺满；画面包含晚霞云、落日、飞鸟、天线与城市楼群，上方以整格扣出的黑色标题框居中呈现「关于「甲子」的虚构故事」。

效果概述

28 列 × 44 行，严格按字符网格排布，全页文字统一字号。
空白格自动填充淡色「天」，形成低对比背景纹理。
元素按层绘制：云 → 落日 → 飞鸟 → 天线 → 楼群。楼群最后绘制，保证太阳在无楼处仍保留完整圆弧。
标题区域按整格对齐扣空，并叠放黑色面板，居中显示白色标题。
使用 Zpix 像素字体；正文行通过负字距补偿，把单字步进压回 1em。

目录结构

.
├─ index.html              # 页面骨架
├─ assets/
│  ├─ css/style.css        # 布局、字号与各元素配色
│  ├─ js/scene.js          # 场景数据与网格渲染
│  └─ fonts/zpix.ttf       # Zpix 像素字体
└─ references/a.html       # 原始参考页

运行

直接打开 index.html 即可。若需通过本地服务器预览：

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 像素字体，版权归原作者所有；使用或分发前请遵循其原始许可说明。

2.9 KiB Raw Blame History Unescape Escape