Files
gplan-2/production/mockups/enemy-card-vs-standee-mockup.html
T
DKChan a20ea38086 docs(ux): 敌人卡形态裁决收口——全站桩形态定稿(台账 99)
用户看对照样张拍板:卡片式千万不能用——B 区主角与敌人均站桩(无框立绘+底座),
主角状态小图标挂血条正下方,英雄卡/敌人卡整体退役,C 区数据框不动。

- 06 清单「敌人卡形态」解决移除(46→45 条)
- battle.md:B 区行/组件表两行/线框图 B 区重绘(顺带清行为环残留示意)/
  死亡·Boss·弹道·义务对照四处措辞/OQ4 收口注记/修订记录
- 战斗表现 v0.4:相邻裁定改裁决已下、样张对照项解除(正式样张按站桩单版出样)
- HUD框架 v0.6:敌人呈现义务行载体改立绘(数据面零改动)
- 敌人系统/美术清单:指认行与对照义务同步
- 对照样张存档 production/mockups/(HTML+3PNG)
- active.md 快照节+台账 99
2026-09-20 02:58:47 +08:00

326 lines
22 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>敌人卡形态对照样张 — 卡片式 vs 站桩式</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0d0b09; color:#cfc4b0; font-family:"Microsoft YaHei","PingFang SC",sans-serif; padding:24px; }
h1 { font-size:18px; color:#d9a441; margin-bottom:4px; }
.note { font-size:12px; color:#8a7f6d; margin-bottom:20px; }
.screen-wrap { margin-bottom:36px; }
.screen-title { font-size:15px; color:#e8d9b0; margin-bottom:8px; font-weight:bold; }
.screen-title small { color:#8a7f6d; font-weight:normal; }
/* ===== 战斗屏 1280x800 ===== */
.screen { width:1280px; height:800px; background:#171310; border:1px solid #3a322a; position:relative; display:flex; flex-direction:column; }
/* A 区 */
.zone-a { height:28px; background:#1f1a15; border-bottom:1px solid #3a322a; display:flex; align-items:center; padding:0 16px; gap:6px; font-size:12px; }
.node-tag { padding:1px 8px; border:1px solid #4a4036; border-radius:3px; color:#8a7f6d; }
.node-tag.past { color:#6b5f34; border-color:#3a322a; }
.node-tag.now { color:#d9a441; border-color:#d9a441; background:rgba(217,164,65,.12); }
.node-tag.boss { border-color:#c0392b; color:#c0392b; }
.arrow { color:#4a4036; }
/* B 区 */
.zone-b { height:252px; background:#221c16; border-bottom:1px solid #3a322a; position:relative; display:flex; }
.round-ind { position:absolute; top:10px; left:50%; transform:translateX(-50%); font-size:14px; color:#e8d9b0; letter-spacing:2px; background:#171310; border:1px solid #3a322a; padding:2px 14px; border-radius:10px; z-index:5;}
.hero-card { width:190px; margin:34px 0 34px 18px; background:#2a231c; border:1px solid #4a4036; border-radius:6px; padding:8px; }
.hero-sil { height:70px; display:flex; align-items:center; justify-content:center; }
.stat-row { font-size:12px; color:#cfc4b0; margin-top:6px; }
.hpbar { height:10px; background:#171310; border:1px solid #4a4036; border-radius:2px; overflow:hidden; margin-top:3px; }
.hpbar > div { height:100%; background:#5da35d; }
.hpbar.enemy > div { background:#c0574a; }
.status-chips { display:flex; gap:4px; margin-top:6px; min-height:18px; }
.chip { font-size:11px; padding:1px 6px; border-radius:3px; border:1px solid; }
.chip.buff { color:#8fd18f; border-color:#3f6b3f; background:rgba(93,163,93,.12); }
.chip.debuff { color:#d98a7f; border-color:#6b3f3a; background:rgba(192,87,74,.12); }
.stage { flex:1; position:relative; }
.detail-band { position:absolute; bottom:0; left:0; right:0; height:24px; background:#171310; border-top:1px solid #3a322a; font-size:11px; color:#9a8f7c; display:flex; align-items:center; padding:0 12px; gap:8px; }
.detail-band .expand { margin-left:auto; color:#d9a441; }
/* 卡片式敌人 */
.enemy-cards { display:flex; gap:12px; align-items:center; margin:34px 18px 34px 0; }
.ecard { width:150px; background:#2a231c; border:1px solid #4a4036; border-radius:6px; padding:8px; position:relative; }
.ecard .order { position:absolute; top:-8px; left:-8px; width:22px; height:22px; border-radius:50%; background:#d9a441; color:#171310; font-size:12px; font-weight:bold; display:flex; align-items:center; justify-content:center; border:2px solid #171310; }
.ecard .portrait { height:56px; background:#171310; border:1px solid #3a322a; border-radius:4px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.ecard .ename { font-size:12px; color:#e8d9b0; text-align:center; margin-bottom:4px; }
.fx-icon { font-size:11px; color:#d98a7f; border:1px dashed #6b3f3a; border-radius:3px; padding:1px 6px; display:inline-block; margin-top:5px;}
/* 站桩式敌人 */
.standee-stage { position:relative; flex:1; height:100%; }
.ground { position:absolute; bottom:24px; left:8%; right:8%; height:2px; background:linear-gradient(90deg,transparent,#4a4036 20%,#4a4036 80%,transparent); }
.standee { position:absolute; bottom:26px; display:flex; flex-direction:column; align-items:center; }
.standee .floaters { display:flex; gap:4px; margin-bottom:4px; align-items:center; }
.fbar { width:64px; height:8px; background:#171310; border:1px solid #4a4036; border-radius:2px; overflow:hidden; }
.fbar > div { height:100%; background:#c0574a; }
.fbar.hero > div { background:#5da35d; }
.forder { width:18px; height:18px; border-radius:50%; background:#d9a441; color:#171310; font-size:11px; font-weight:bold; display:flex; align-items:center; justify-content:center; }
.standee .base { width:70px; height:12px; border-radius:50%; background:radial-gradient(ellipse,#3a322a,#221c16); margin-top:-4px; }
.standee .fx-flash { position:absolute; top:-14px; font-size:18px; color:#e8b04a; text-shadow:0 0 8px rgba(232,176,74,.6); }
.status-icons { display:flex; gap:3px; margin-top:3px; }
.sicon { width:16px; height:16px; border-radius:3px; border:1px solid #4a4036; background:#241f19; font-size:10px; display:flex; align-items:center; justify-content:center; }
.sicon.buff { color:#8fd18f; border-color:#3f6b3f; }
.sicon.debuff { color:#d98a7f; border-color:#6b3f3a; }
.sicon .stack { font-size:8px; transform:translate(5px,5px); }
/* 下半区 */
.lower { flex:1; display:flex; }
.zone-c { width:240px; background:#1f1a15; border-right:1px solid #3a322a; padding:12px; }
.zone-d { flex:1; background:#1b1611; padding:8px; position:relative; }
.databox { border:1px solid #4a4036; padding:6px 8px; font-size:12px; margin-bottom:8px; background:#241f19; }
.databox b { color:#e8d9b0; }
.ap-bar { height:44px; display:flex; align-items:center; gap:10px; padding:0 8px; font-size:13px; }
.ap-dot { width:14px; height:14px; border-radius:50%; border:1px solid #d9a441; display:inline-block; margin-right:3px; }
.ap-dot.full { background:#d9a441; }
.btn { border:1px solid #4a4036; background:#2a231c; color:#cfc4b0; font-size:12px; padding:4px 10px; border-radius:4px; }
.btn.accent { border-color:#d9a441; color:#d9a441; }
.board { display:grid; grid-template-columns:repeat(12,36px); grid-auto-rows:36px; gap:2px; justify-content:center; margin-top:4px; }
.cell { background:#2e2820; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:bold; color:#e8d9b0; font-family:Consolas,monospace; position:relative; }
.cell.open { background:#3d352a; }
.cell.flag::after { content:"🚩"; font-size:16px; }
.cell.reward::before { content:""; position:absolute; bottom:2px; right:2px; width:8px; height:8px; border-radius:50%; }
.cell.reward.r1::before { background:#8fd18f; }
.cell.reward.r2::before { background:#7fa8d9; }
.pawn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pawn i { width:14px; height:14px; border-radius:50% 50% 40% 40%; background:#e8d9b0; display:block; box-shadow:0 10px 0 -3px #e8d9b0; }
.toast { position:absolute; top:52px; left:50%; transform:translateX(-50%); background:#171310; border:1px solid #6b3f3a; color:#d98a7f; font-size:12px; padding:4px 12px; border-radius:4px; }
.callout { font-size:12px; color:#d9a441; margin-top:8px; line-height:1.7; }
.callout b { color:#e8d9b0; }
</style>
</head>
<body>
<h1>敌人卡形态对照样张(卡片式 vs 站桩式)</h1>
<div class="note">仅裁决「B 区敌人怎么呈现」这一件事:两版除 B 区敌人呈现外完全一致(四区布局按 battle.md 现行口径;意图预告=普攻零表示/特殊技动画占位;剪影为程序化占位,非美术终稿)。战斗场景:第 1 关,地精一伙 ×2,第 3 轮挖掘中。</div>
<!-- ============ 卡片式 ============ -->
<div class="screen-wrap">
<div class="screen-title">形态 A · 卡片式 <small>—— 带框信息卡,信息有固定卡位</small></div>
<div class="screen">
<div class="zone-a">
<span class="node-tag past">战</span><span class="arrow">→</span><span class="node-tag past">战</span><span class="arrow">→</span><span class="node-tag now">赏</span><span class="arrow">→</span><span class="node-tag">战</span><span class="arrow">→</span><span class="node-tag">战</span><span class="arrow">→</span><span class="node-tag">疗</span><span class="arrow">→</span><span class="node-tag boss">王</span>
</div>
<div class="zone-b">
<div class="round-ind">第 3 轮 · 挖掘中</div>
<div class="hero-card">
<div class="hero-sil">
<svg width="46" height="64" viewBox="0 0 46 64"><path d="M23 4 L30 10 L28 18 C36 22 38 32 37 44 L40 60 L30 60 L28 48 L18 48 L16 60 L6 60 L9 44 C8 32 10 22 18 18 L16 10 Z" fill="#cfc4b0"/></svg>
</div>
<div class="stat-row">HP 42/50</div>
<div class="hpbar"><div style="width:84%"></div></div>
<div class="stat-row">攻 6 <span style="color:#8fd18f">(+50%)</span></div>
<div class="status-chips"><span class="chip buff">⬆ +50% ·2</span><span class="chip buff">🛡 坚守 ·1</span></div>
</div>
<div class="stage">
<div style="position:absolute;inset:34px 0 24px;display:flex;align-items:center;justify-content:center;color:#5a5044;font-size:13px;">[ 兑现演出区 ]</div>
<div class="detail-band">▸ 上轮:主角攻击 3 → 地精 −3 | 攻击+50%(1结算) | 伏击+1 ×2 <span class="expand">[展开明细 ▾]</span></div>
</div>
<div class="enemy-cards">
<div class="ecard">
<div class="order">①</div>
<div class="portrait"><svg width="36" height="46" viewBox="0 0 36 46"><path d="M18 2 L26 6 L24 12 L30 14 L28 20 C32 26 32 34 30 42 L8 42 C6 34 6 26 10 20 L8 14 L14 12 L12 6 Z" fill="#9a8f7c"/></svg></div>
<div class="ename">地精</div>
<div class="hpbar enemy"><div style="width:70%"></div></div>
<div class="stat-row" style="font-size:11px;color:#8a7f6d">HP 7/10</div>
<div class="status-chips"><span class="chip debuff">伏击 ×2</span></div>
<span class="fx-icon">⚔ 特殊技·攻击系</span>
</div>
<div class="ecard">
<div class="order">②</div>
<div class="portrait"><svg width="36" height="46" viewBox="0 0 36 46"><path d="M18 2 L26 6 L24 12 L30 14 L28 20 C32 26 32 34 30 42 L8 42 C6 34 6 26 10 20 L8 14 L14 12 L12 6 Z" fill="#9a8f7c"/></svg></div>
<div class="ename">地精</div>
<div class="hpbar enemy"><div style="width:40%"></div></div>
<div class="stat-row" style="font-size:11px;color:#8a7f6d">HP 4/10</div>
<div class="status-chips"><span class="chip debuff">伏击 ×2</span></div>
<span class="fx-icon" style="color:#5a5044;border-color:#3a322a">普攻 · 无表示</span>
</div>
</div>
</div>
<div class="lower">
<div class="zone-c">
<div class="databox"><b>HP</b> 42 / 50</div>
<div class="databox"><b>攻击</b> 6 <span style="color:#8fd18f">(+50%)</span></div>
<div class="databox"><b>RAP</b> 3 / 8</div>
<div class="databox" style="margin-top:14px"><b>状态效果</b></div>
<div class="status-chips" style="flex-direction:column;align-items:flex-start">
<span class="chip buff">⬆ 攻击+50% ○ 1</span>
<span class="chip buff">🛡 坚守 ○ ●</span>
</div>
<div style="margin-top:18px;text-align:center;color:#5a5044;font-size:11px">[ 小人立绘占位 ]</div>
</div>
<div class="zone-d">
<div class="ap-bar">
<span class="ap-dot full"></span><span class="ap-dot full"></span><span class="ap-dot full"></span><span class="ap-dot full"></span><span class="ap-dot"></span><span class="ap-dot"></span>
<span style="color:#8a7f6d">4/6</span>
<button class="btn">⏹ 停手</button>
<span style="margin-left:auto"></span>
<button class="btn">? 图例</button>
<button class="btn accent">↻ 刷新 −8 |剩 2</button>
</div>
<div class="board" id="boardA"></div>
<div class="toast">AP 不足 · 剩 0 点</div>
</div>
</div>
</div>
<div class="callout"><b>卡片式读法:</b>每个敌人一只带框卡——敌像、血条、顺位徽标①②、状态槽(伏击层数为全体共享、各卡同值)、特殊技动画占位都有固定卡位;信息不随站位漂移,排版最稳。代价:框多、界面感重,战斗画面区更像"面板"而非"场景"。</div>
</div>
<!-- ============ 站桩式 ============ -->
<div class="screen-wrap">
<div class="screen-title">形态 B · 站桩式 <small>—— 无框立绘 + 底座,信息悬浮跟随</small></div>
<div class="screen">
<div class="zone-a">
<span class="node-tag past">战</span><span class="arrow">→</span><span class="node-tag past">战</span><span class="arrow">→</span><span class="node-tag now">赏</span><span class="arrow">→</span><span class="node-tag">战</span><span class="arrow">→</span><span class="node-tag">战</span><span class="arrow">→</span><span class="node-tag">疗</span><span class="arrow">→</span><span class="node-tag boss">王</span>
</div>
<div class="zone-b">
<div class="round-ind">第 3 轮 · 挖掘中</div>
<div class="hero-card">
<div class="hero-sil">
<svg width="46" height="64" viewBox="0 0 46 64"><path d="M23 4 L30 10 L28 18 C36 22 38 32 37 44 L40 60 L30 60 L28 48 L18 48 L16 60 L6 60 L9 44 C8 32 10 22 18 18 L16 10 Z" fill="#cfc4b0"/></svg>
</div>
<div class="stat-row">HP 42/50</div>
<div class="hpbar"><div style="width:84%"></div></div>
<div class="stat-row">攻 6 <span style="color:#8fd18f">(+50%)</span></div>
<div class="status-chips"><span class="chip buff">⬆ +50% ·2</span><span class="chip buff">🛡 坚守 ·1</span></div>
</div>
<div class="stage">
<div class="standee-stage">
<div class="ground"></div>
<div class="standee" style="right:230px;">
<div class="fx-flash">⚔</div>
<div class="floaters"><span class="forder">①</span><div class="fbar"><div style="width:70%"></div></div><span class="chip debuff">伏击×2</span></div>
<svg width="52" height="72" viewBox="0 0 36 46"><path d="M18 2 L26 6 L24 12 L30 14 L28 20 C32 26 32 34 30 42 L8 42 C6 34 6 26 10 20 L8 14 L14 12 L12 6 Z" fill="#9a8f7c"/></svg>
<div class="base"></div>
</div>
<div class="standee" style="right:80px;">
<div class="floaters"><span class="forder">②</span><div class="fbar"><div style="width:40%"></div></div><span class="chip debuff">伏击×2</span></div>
<svg width="46" height="64" viewBox="0 0 36 46"><path d="M18 2 L26 6 L24 12 L30 14 L28 20 C32 26 32 34 30 42 L8 42 C6 34 6 26 10 20 L8 14 L14 12 L12 6 Z" fill="#8a7f6d"/></svg>
<div class="base"></div>
</div>
<div style="position:absolute;top:8px;left:50%;transform:translateX(-50%);color:#5a5044;font-size:13px;">[ 兑现演出区 ]</div>
</div>
<div class="detail-band">▸ 上轮:主角攻击 3 → 地精 −3 | 攻击+50%(1结算) | 伏击+1 ×2 <span class="expand">[展开明细 ▾]</span></div>
</div>
</div>
<div class="lower">
<div class="zone-c">
<div class="databox"><b>HP</b> 42 / 50</div>
<div class="databox"><b>攻击</b> 6 <span style="color:#8fd18f">(+50%)</span></div>
<div class="databox"><b>RAP</b> 3 / 8</div>
<div class="databox" style="margin-top:14px"><b>状态效果</b></div>
<div class="status-chips" style="flex-direction:column;align-items:flex-start">
<span class="chip buff">⬆ 攻击+50% ○ 1</span>
<span class="chip buff">🛡 坚守 ○ ●</span>
</div>
<div style="margin-top:18px;text-align:center;color:#5a5044;font-size:11px">[ 小人立绘占位 ]</div>
</div>
<div class="zone-d">
<div class="ap-bar">
<span class="ap-dot full"></span><span class="ap-dot full"></span><span class="ap-dot full"></span><span class="ap-dot full"></span><span class="ap-dot"></span><span class="ap-dot"></span>
<span style="color:#8a7f6d">4/6</span>
<button class="btn">⏹ 停手</button>
<span style="margin-left:auto"></span>
<button class="btn">? 图例</button>
<button class="btn accent">↻ 刷新 −8 |剩 2</button>
</div>
<div class="board" id="boardB"></div>
<div class="toast">AP 不足 · 剩 0 点</div>
</div>
</div>
</div>
<div class="callout"><b>站桩式读法:</b>敌人是"站在战斗画面里的角色"——立绘 + 椭圆底座,血条/顺位/状态徽标全部悬浮在头顶跟随站位;场景感强、受击与退场动画直接演在角色身上。代价:信息位置随站位浮动、悬浮件之间可能互撞(上图已能看出 ①头顶三件悬浮件的拥挤),三敌满编时右侧更挤。</div>
</div>
<!-- ============ 定稿形态:全站桩(主角+敌人) ============ -->
<div class="screen-wrap">
<div class="screen-title">✅ 定稿形态 · 全站桩 <small>—— 主角与敌人均无卡片立绘+底座;状态小图标挂血条下(2026-09-20 用户拍板)</small></div>
<div class="screen">
<div class="zone-a">
<span class="node-tag past">战</span><span class="arrow">→</span><span class="node-tag past">战</span><span class="arrow">→</span><span class="node-tag now">赏</span><span class="arrow">→</span><span class="node-tag">战</span><span class="arrow">→</span><span class="node-tag">战</span><span class="arrow">→</span><span class="node-tag">疗</span><span class="arrow">→</span><span class="node-tag boss">王</span>
</div>
<div class="zone-b">
<div class="round-ind">第 3 轮 · 挖掘中</div>
<div class="standee-stage" style="width:100%;display:flex;">
<div class="ground" style="left:40px;right:40px;"></div>
<!-- 主角站桩 -->
<div class="standee" style="position:absolute;left:80px;">
<div class="floaters">
<div class="fbar hero" style="width:80px"><div style="width:84%"></div></div>
</div>
<div class="status-icons">
<span class="sicon buff">⬆<span class="stack">2</span></span>
<span class="sicon buff">🛡<span class="stack">1</span></span>
</div>
<svg width="56" height="80" viewBox="0 0 46 64"><path d="M23 4 L30 10 L28 18 C36 22 38 32 37 44 L40 60 L30 60 L28 48 L18 48 L16 60 L6 60 L9 44 C8 32 10 22 18 18 L16 10 Z" fill="#e0d6c2"/></svg>
<div class="base" style="width:80px"></div>
</div>
<div style="position:absolute;top:40px;left:50%;transform:translateX(-50%);color:#5a5044;font-size:13px;">[ 兑现演出区 ]</div>
<!-- 敌人站桩 ×2 -->
<div class="standee" style="position:absolute;right:220px;">
<div class="fx-flash">⚔</div>
<div class="floaters"><span class="forder">①</span><div class="fbar"><div style="width:70%"></div></div></div>
<div class="status-icons"><span class="sicon debuff">伏<span class="stack">2</span></span></div>
<svg width="52" height="72" viewBox="0 0 36 46"><path d="M18 2 L26 6 L24 12 L30 14 L28 20 C32 26 32 34 30 42 L8 42 C6 34 6 26 10 20 L8 14 L14 12 L12 6 Z" fill="#9a8f7c"/></svg>
<div class="base"></div>
</div>
<div class="standee" style="position:absolute;right:70px;">
<div class="floaters"><span class="forder">②</span><div class="fbar"><div style="width:40%"></div></div></div>
<div class="status-icons"><span class="sicon debuff">伏<span class="stack">2</span></span></div>
<svg width="46" height="64" viewBox="0 0 36 46"><path d="M18 2 L26 6 L24 12 L30 14 L28 20 C32 26 32 34 30 42 L8 42 C6 34 6 26 10 20 L8 14 L14 12 L12 6 Z" fill="#8a7f6d"/></svg>
<div class="base"></div>
</div>
<div class="detail-band">▸ 上轮:主角攻击 3 → 地精 −3 | 攻击+50%(1结算) | 伏击+1 ×2 <span class="expand">[展开明细 ▾]</span></div>
</div>
</div>
<div class="lower">
<div class="zone-c">
<div class="databox"><b>HP</b> 42 / 50</div>
<div class="databox"><b>攻击</b> 6 <span style="color:#8fd18f">(+50%)</span></div>
<div class="databox"><b>RAP</b> 3 / 8</div>
<div class="databox" style="margin-top:14px"><b>状态效果</b></div>
<div class="status-chips" style="flex-direction:column;align-items:flex-start">
<span class="chip buff">⬆ 攻击+50% ○ 1</span>
<span class="chip buff">🛡 坚守 ○ ●</span>
</div>
<div style="margin-top:18px;text-align:center;color:#5a5044;font-size:11px">[ 小人立绘占位 ]</div>
</div>
<div class="zone-d">
<div class="ap-bar">
<span class="ap-dot full"></span><span class="ap-dot full"></span><span class="ap-dot full"></span><span class="ap-dot full"></span><span class="ap-dot"></span><span class="ap-dot"></span>
<span style="color:#8a7f6d">4/6</span>
<button class="btn">⏹ 停手</button>
<span style="margin-left:auto"></span>
<button class="btn">? 图例</button>
<button class="btn accent">↻ 刷新 −8 |剩 2</button>
</div>
<div class="board" id="boardC"></div>
<div class="toast">AP 不足 · 剩 0 点</div>
</div>
</div>
</div>
<div class="callout"><b>定稿形态读法:</b>主角与敌人都以"立绘+底座"站在战斗画面区——主角在左(绿色血条悬浮头顶,状态小图标一排挂血条正下方),敌人在右(红色血条+顺位徽标,伏击等状态图标同款挂在血条下);全部无框、无卡片。C 区角色信息数据框保留(那是规划数据面,不是战斗内卡片)。</div>
</div>
<script>
function mulberry32(a){return function(){a|=0;a=a+0x6D2B79F5|0;var t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296}}
function buildBoard(id){
const rnd=mulberry32(20260920);
const el=document.getElementById(id);
const flags=new Set([3,17,40,66,90]);
const pawn=83;
for(let i=0;i<144;i++){
const c=document.createElement('div');c.className='cell';
const open=rnd()<0.55;
if(open){
c.classList.add('open');
c.textContent=Math.floor(rnd()*3)+1;
const r=rnd();
if(r<0.10)c.classList.add('reward','r1');
else if(r<0.16)c.classList.add('reward','r2');
}
if(flags.has(i))c.classList.add('flag');
if(i===pawn){c.classList.add('open');c.innerHTML='<span class="pawn"><i></i></span>';}
el.appendChild(c);
}
}
buildBoard('boardA');buildBoard('boardB');buildBoard('boardC');
</script>
</body>
</html>