143 lines
5.1 KiB
JavaScript
143 lines
5.1 KiB
JavaScript
/* 第 2 页场景数据
|
||
背景字满铺「墙」，明度同 page1 的「天」；前景文字四周整格扣空。 */
|
||
|
||
(() => {
|
||
/* 按矩形铺字，逐行生成一条 glyph */
|
||
const block = (x, y, w, h, text, cls) =>
|
||
Array.from({ length: h }, (_, j) => ({
|
||
text: text.repeat(w),
|
||
x,
|
||
y: y + j,
|
||
cls,
|
||
}));
|
||
|
||
/* 扣空：按整格清空，保证留下的背景都是完整字 */
|
||
const clear = (x, y, w, h) => block(x, y, w, h, ' ', 'void');
|
||
|
||
TextScene.render({
|
||
cols: 28,
|
||
rows: 44,
|
||
skyChar: '墙',
|
||
skyClass: 'wall',
|
||
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'),
|
||
|
||
/* 酒杯：立在桌面之上，竖排两字；左起第 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'),
|
||
|
||
/* 灯笼：右上角，4 格宽；链加长两节使整体下移两格，并整体右移一格 */
|
||
{ text: '链', x: 24, y: 0, cls: 'chain' },
|
||
{ text: '链', x: 24, y: 1, cls: 'chain' },
|
||
{ text: '链', x: 24, y: 2, cls: 'chain' },
|
||
...block(23, 3, 2, 1, '链', 'chain'),
|
||
{ text: '链', x: 23, y: 4, cls: 'chain' },
|
||
...block(23, 5, 2, 1, '笼', 'cap'),
|
||
...block(22, 6, 1, 3, '笼', 'shade'),
|
||
...block(25, 6, 1, 3, '笼', 'shade'),
|
||
...block(23, 6, 2, 3, '灯', 'core'),
|
||
...block(23, 9, 2, 1, '笼', 'shade'),
|
||
|
||
/* 穗：灯笼底下四字，上行两格、下行左右分开 */
|
||
...block(23, 10, 2, 1, '穗', 'tassel'),
|
||
{ text: '穗', x: 22, y: 11, cls: 'tassel' },
|
||
{ text: '穗', x: 24, y: 11, cls: 'tassel' },
|
||
|
||
/* 画框：墙上 8×6 矩形，「框」为边、「图」作画面 */
|
||
...block(12, 3, 8, 1, '框', 'frame'),
|
||
...block(12, 8, 8, 1, '框', 'frame'),
|
||
...block(12, 4, 1, 4, '框', 'frame'),
|
||
...block(19, 4, 1, 4, '框', 'frame'),
|
||
...block(13, 4, 6, 4, '图', 'picture'),
|
||
|
||
/* 前景留白：文字外框各放约半格，再向外取整格扣空，文字在其中居中 */
|
||
...clear(3, 4, 7, 3), /* 「酒水单」y4.7–6.3 → 行 4–6 */
|
||
...clear(4, 12, 8, 14), /* 第一列 y12.75–25.25 → 行 12–25 */
|
||
...clear(16, 14, 8, 19), /* 第二列 y14.75–32.25 → 行 14–32 */
|
||
],
|
||
});
|
||
|
||
const scene = document.querySelector('.scene');
|
||
|
||
/* 画框照片：盖在「图」区之上，四边各缩 0.1em 以免压到「框」 */
|
||
const picture = document.createElement('img');
|
||
picture.className = 'picture-img';
|
||
picture.src = 'assets/images/page2-picture.png';
|
||
picture.alt = '';
|
||
scene.append(picture);
|
||
|
||
const listing = document.createElement('h1');
|
||
listing.className = 'listing';
|
||
listing.textContent = '酒水单';
|
||
scene.append(listing);
|
||
|
||
/* 酒水单：前景两列，前 5 后 7；罗马数字与曲目名各自左对齐 */
|
||
const PROGRAM = [
|
||
['I', '听'], ['II', '酒歌'], ['III', '眼睛'], ['IV', '黑'], ['V', '天'],
|
||
['VI', '麻雀'], ['VII', '业火'], ['VIII', '问'], ['IX', '难'], ['X', '画'],
|
||
['XI', '田'], ['XII', '今生'],
|
||
];
|
||
|
||
const programColumn = (items) => {
|
||
const col = document.createElement('div');
|
||
col.className = 'program-col';
|
||
|
||
for (const [no, name] of items) {
|
||
const row = document.createElement('div');
|
||
row.className = 'program-item';
|
||
|
||
const numeral = document.createElement('span');
|
||
numeral.className = 'program-no';
|
||
numeral.textContent = no;
|
||
|
||
const label = document.createElement('span');
|
||
label.className = 'program-name';
|
||
label.textContent = name;
|
||
|
||
row.append(numeral, label);
|
||
col.append(row);
|
||
}
|
||
|
||
return col;
|
||
};
|
||
|
||
const program = document.createElement('div');
|
||
program.className = 'program';
|
||
|
||
const first = programColumn(PROGRAM.slice(0, 5));
|
||
const second = programColumn(PROGRAM.slice(5));
|
||
first.classList.add('program-col-1');
|
||
second.classList.add('program-col-2');
|
||
|
||
program.append(first, second);
|
||
scene.append(program);
|
||
})();
|