rogerwang2008
319ba1890a
- 新增 page3.html：无「天」背景的演职员表与火山场景 - 重构为页面专属 CSS/JS 与共用的 text-scene 渲染引擎 - PDF 导出支持 --page 参数
88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
/* 第 1 页场景数据
|
||
渲染引擎见 text-scene.js；坐标范围 x 0–27，y 0–43。 */
|
||
|
||
(() => {
|
||
/* 云：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: 25, y: 2, kind: 'magpie' },
|
||
{ x: 1, y: 4, kind: 'sparrow' },
|
||
{ x: 3, y: 8, kind: 'crow' },
|
||
{ x: 9, y: 13, kind: 'magpie' },
|
||
{ x: 9, y: 15, kind: 'sparrow' },
|
||
{ x: 26, y: 5, kind: 'crow' },
|
||
{ x: 17, y: 9, kind: 'sparrow' },
|
||
{ x: 21, y: 12, kind: 'magpie' },
|
||
{ x: 19, y: 15, kind: 'crow' },
|
||
];
|
||
|
||
/* 天线：单列「线」，从 y 向下叠 h 格；最右楼顶另加一根深色 */
|
||
const antennas = [
|
||
{ x: 7, y: 28, h: 3 },
|
||
{ x: 22, y: 27, h: 4 },
|
||
{ x: 26, y: 34, h: 3, cls: 'ant ant-dark' },
|
||
];
|
||
|
||
/* 楼群：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 },
|
||
];
|
||
|
||
/* 标题区：整格扣出的居中矩形，左右各留 2 格 */
|
||
const title = {
|
||
text: '关于「甲子」的虚构故事',
|
||
emphasis: '甲子',
|
||
top: 14,
|
||
height: 4,
|
||
side: 2,
|
||
};
|
||
|
||
TextScene.render({
|
||
cols: 28,
|
||
rows: 44,
|
||
clouds,
|
||
sun,
|
||
birds,
|
||
antennas,
|
||
buildings,
|
||
title,
|
||
});
|
||
})();
|