824 lines
37 KiB
HTML
824 lines
37 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>FishDice Lucky Dice 资产与配置交付清单</title>
|
||
<style>
|
||
:root {
|
||
color-scheme: dark;
|
||
--bg: #15100e;
|
||
--panel: #241815;
|
||
--panel-2: #30201a;
|
||
--line: #6d4b35;
|
||
--gold: #f2c34b;
|
||
--gold-2: #ffe084;
|
||
--red: #b3192c;
|
||
--red-2: #f33f31;
|
||
--green: #35b75f;
|
||
--blue: #3f9bd6;
|
||
--text: #f7ead4;
|
||
--muted: #c9aa86;
|
||
--shadow: 0 18px 48px rgba(0, 0, 0, .28);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
margin: 0;
|
||
background:
|
||
radial-gradient(circle at 50% -60px, rgba(255, 224, 132, .14), transparent 360px),
|
||
radial-gradient(circle at 8% 160px, rgba(179, 25, 44, .18), transparent 290px),
|
||
var(--bg);
|
||
color: var(--text);
|
||
font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
|
||
line-height: 1.55;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
header, main, footer {
|
||
width: min(1180px, calc(100vw - 32px));
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header { padding: 34px 0 18px; }
|
||
h1 {
|
||
margin: 0 0 8px;
|
||
font-size: clamp(28px, 4vw, 46px);
|
||
line-height: 1.14;
|
||
letter-spacing: 0;
|
||
}
|
||
h2 {
|
||
margin: 34px 0 14px;
|
||
font-size: 24px;
|
||
letter-spacing: 0;
|
||
}
|
||
h3 {
|
||
margin: 22px 0 10px;
|
||
font-size: 18px;
|
||
letter-spacing: 0;
|
||
}
|
||
p, li { color: var(--muted); }
|
||
a { color: var(--gold-2); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
code {
|
||
color: #ffe9a8;
|
||
background: rgba(0, 0, 0, .32);
|
||
padding: 2px 5px;
|
||
border-radius: 4px;
|
||
font-family: Consolas, Menlo, monospace;
|
||
font-size: .92em;
|
||
}
|
||
|
||
.lede {
|
||
margin: 0;
|
||
max-width: 940px;
|
||
color: var(--muted);
|
||
font-size: 16px;
|
||
}
|
||
|
||
.summary {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 10px;
|
||
margin: 20px 0 8px;
|
||
}
|
||
.summary-item {
|
||
border: 1px solid var(--line);
|
||
background: rgba(36, 24, 21, .82);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
}
|
||
.summary-item strong {
|
||
display: block;
|
||
color: var(--gold-2);
|
||
font-size: 19px;
|
||
line-height: 1.2;
|
||
}
|
||
.summary-item span {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
padding: 12px 0 14px;
|
||
margin-bottom: 8px;
|
||
background: rgba(21, 16, 14, .88);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.nav a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 34px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 999px;
|
||
padding: 6px 12px;
|
||
background: rgba(36, 24, 21, .86);
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
text-decoration: none;
|
||
}
|
||
.nav a:hover {
|
||
color: var(--gold-2);
|
||
border-color: var(--gold);
|
||
}
|
||
|
||
.preview {
|
||
position: relative;
|
||
overflow: hidden;
|
||
min-height: 360px;
|
||
margin: 26px 0 8px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background:
|
||
radial-gradient(circle at 50% 18%, rgba(255, 230, 110, .28), transparent 180px),
|
||
linear-gradient(150deg, #3b2119, #120d0b 66%);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.preview-title {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 38px;
|
||
transform: translateX(-50%);
|
||
color: var(--gold-2);
|
||
font-size: clamp(34px, 8vw, 76px);
|
||
font-weight: 900;
|
||
text-shadow: 0 8px 0 #a6471d, 0 0 18px rgba(255, 224, 132, .7);
|
||
animation: title-pop 7.8s infinite;
|
||
white-space: nowrap;
|
||
}
|
||
.preview-board {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 144px;
|
||
transform: translateX(-50%);
|
||
width: min(520px, 86vw);
|
||
height: 92px;
|
||
border: 8px solid var(--gold);
|
||
border-radius: 18px;
|
||
background: #3b1713;
|
||
box-shadow: 0 14px 0 rgba(0, 0, 0, .18), 0 0 24px rgba(242, 195, 75, .28);
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
padding: 16px;
|
||
animation: board-rise 7.8s infinite;
|
||
}
|
||
.slot {
|
||
border: 4px solid #d69422;
|
||
border-radius: 12px;
|
||
background: #5b2017;
|
||
box-shadow: inset 0 0 18px rgba(0, 0, 0, .38);
|
||
}
|
||
.slot::after {
|
||
content: "ROCKET";
|
||
display: grid;
|
||
place-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff4c4;
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
opacity: 0;
|
||
}
|
||
.slot:nth-child(1)::after { animation: lock-one 7.8s infinite; }
|
||
.slot:nth-child(2)::after { animation: lock-two 7.8s infinite; }
|
||
.slot:nth-child(3)::after { animation: lock-three 7.8s infinite; }
|
||
.preview-tray {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 34px;
|
||
transform: translateX(-50%) rotateX(58deg) rotateZ(45deg);
|
||
width: 330px;
|
||
height: 330px;
|
||
border: 10px solid #dfaa4b;
|
||
border-radius: 28px;
|
||
background: var(--red);
|
||
box-shadow: 0 18px 0 #5b2a1d;
|
||
animation: tray-rise 7.8s infinite;
|
||
}
|
||
.die {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 166px;
|
||
width: 42px;
|
||
height: 42px;
|
||
margin-left: -21px;
|
||
border-radius: 8px;
|
||
background: #fff6df;
|
||
border: 2px solid #e6d2ad;
|
||
box-shadow: 0 8px 16px rgba(0, 0, 0, .34);
|
||
color: #8b1b21;
|
||
display: grid;
|
||
place-items: center;
|
||
font-weight: 900;
|
||
animation: dice-roll 7.8s infinite;
|
||
}
|
||
.die:nth-of-type(2) { animation-delay: .12s; }
|
||
.die:nth-of-type(3) { animation-delay: .24s; }
|
||
.reward {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 164px;
|
||
transform: translateX(-50%) scale(0);
|
||
padding: 10px 18px;
|
||
border-radius: 8px;
|
||
background: var(--red-2);
|
||
color: #fff5dc;
|
||
font-weight: 900;
|
||
box-shadow: 0 0 28px rgba(255, 221, 94, .7);
|
||
animation: reward-launch 7.8s infinite;
|
||
}
|
||
.preview-title, .preview-board, .preview-tray, .die, .reward, .slot::after {
|
||
animation-delay: -2.4s;
|
||
}
|
||
|
||
.section {
|
||
scroll-margin-top: 84px;
|
||
}
|
||
.panel {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: rgba(36, 24, 21, .82);
|
||
padding: 14px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
||
gap: 14px;
|
||
}
|
||
.grid-2 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 14px;
|
||
}
|
||
.grid-3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 14px;
|
||
}
|
||
.collab-board {
|
||
scroll-margin-top: 84px;
|
||
margin: 26px 0 8px;
|
||
border: 2px solid var(--gold);
|
||
border-radius: 8px;
|
||
background:
|
||
radial-gradient(circle at 50% 0, rgba(255, 224, 132, .16), transparent 220px),
|
||
rgba(36, 24, 21, .9);
|
||
padding: 16px;
|
||
box-shadow: 0 0 32px rgba(242, 195, 75, .12), var(--shadow);
|
||
}
|
||
.collab-board h2 {
|
||
margin-top: 0;
|
||
color: var(--gold-2);
|
||
}
|
||
.collab-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
.owner-card {
|
||
border: 1px solid rgba(242, 195, 75, .42);
|
||
border-radius: 8px;
|
||
background: rgba(0, 0, 0, .18);
|
||
padding: 14px;
|
||
}
|
||
.owner-card h3 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
margin-top: 0;
|
||
color: var(--gold-2);
|
||
}
|
||
.owner-card ul {
|
||
margin: 0;
|
||
padding-left: 18px;
|
||
}
|
||
.owner-card li {
|
||
margin: 7px 0;
|
||
}
|
||
.owner-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 24px;
|
||
border: 1px solid rgba(255, 224, 132, .5);
|
||
border-radius: 999px;
|
||
padding: 3px 8px;
|
||
color: var(--gold-2);
|
||
background: rgba(242, 195, 75, .12);
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
}
|
||
.owner-tag.art { color: #ffd2cf; border-color: rgba(243, 63, 49, .45); background: rgba(179, 25, 44, .18); }
|
||
.owner-tag.design { color: #d8ffd8; border-color: rgba(53, 183, 95, .45); background: rgba(53, 183, 95, .14); }
|
||
.owner-tag.dev { color: #d8ecff; border-color: rgba(63, 155, 214, .48); background: rgba(63, 155, 214, .14); }
|
||
.section-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-top: 34px;
|
||
}
|
||
.section-title-row h2 {
|
||
margin: 0 0 14px;
|
||
}
|
||
.blocking-table {
|
||
border: 2px solid rgba(242, 195, 75, .65);
|
||
box-shadow: 0 0 26px rgba(242, 195, 75, .08);
|
||
}
|
||
.compare-table td:first-child {
|
||
width: 118px;
|
||
color: var(--gold-2);
|
||
font-weight: 800;
|
||
}
|
||
.compare-table td:nth-child(2) {
|
||
width: 160px;
|
||
color: #ffd2cf;
|
||
font-weight: 700;
|
||
}
|
||
.gap-tag {
|
||
display: inline-flex;
|
||
margin: 2px 4px 2px 0;
|
||
border: 1px solid rgba(243, 63, 49, .45);
|
||
border-radius: 999px;
|
||
padding: 2px 7px;
|
||
color: #ffd2cf;
|
||
background: rgba(179, 25, 44, .16);
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
}
|
||
figure {
|
||
margin: 0;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--panel);
|
||
box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
|
||
}
|
||
figure img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
figcaption {
|
||
padding: 10px 12px 12px;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--panel);
|
||
}
|
||
th, td {
|
||
border-bottom: 1px solid rgba(109, 75, 53, .65);
|
||
padding: 10px 12px;
|
||
vertical-align: top;
|
||
text-align: left;
|
||
font-size: 13px;
|
||
}
|
||
th {
|
||
color: var(--gold-2);
|
||
background: var(--panel-2);
|
||
font-weight: 700;
|
||
}
|
||
tr:last-child td { border-bottom: 0; }
|
||
|
||
.notes {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 14px;
|
||
}
|
||
.note {
|
||
border-left: 4px solid var(--gold);
|
||
background: rgba(36, 24, 21, .9);
|
||
padding: 12px 14px;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
.note strong {
|
||
color: var(--gold-2);
|
||
}
|
||
.callout {
|
||
margin: 14px 0;
|
||
border-left: 4px solid var(--green);
|
||
background: rgba(36, 24, 21, .9);
|
||
padding: 12px 14px;
|
||
border-radius: 0 8px 8px 0;
|
||
color: var(--muted);
|
||
}
|
||
.checklist {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 12px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.checklist li {
|
||
border: 1px solid rgba(242, 195, 75, .48);
|
||
border-radius: 8px;
|
||
background: rgba(48, 32, 26, .86);
|
||
padding: 12px 14px;
|
||
color: var(--muted);
|
||
}
|
||
.path-block {
|
||
white-space: pre;
|
||
overflow-x: auto;
|
||
border: 1px dashed var(--line);
|
||
border-radius: 8px;
|
||
background: rgba(0, 0, 0, .22);
|
||
padding: 12px;
|
||
color: var(--muted);
|
||
font-family: Consolas, Menlo, monospace;
|
||
font-size: 13px;
|
||
}
|
||
|
||
footer {
|
||
margin: 36px auto 28px;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
@keyframes title-pop {
|
||
0%, 8% { opacity: 0; transform: translateX(-50%) scale(.72); }
|
||
16%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
|
||
}
|
||
@keyframes board-rise {
|
||
0%, 18% { opacity: 0; transform: translateX(-50%) translateY(120px) scale(.86); }
|
||
28%, 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
|
||
}
|
||
@keyframes tray-rise {
|
||
0%, 20% { opacity: 0; transform: translateX(-50%) translateY(140px) rotateX(58deg) rotateZ(45deg); }
|
||
30%, 100% { opacity: 1; transform: translateX(-50%) translateY(0) rotateX(58deg) rotateZ(45deg); }
|
||
}
|
||
@keyframes dice-roll {
|
||
0%, 32% { opacity: 0; transform: translate(-170px, -16px) rotate(0deg); }
|
||
42% { opacity: 1; transform: translate(126px, 38px) rotate(420deg); }
|
||
52% { opacity: 1; transform: translate(-80px, 28px) rotate(780deg); }
|
||
62% { opacity: 1; transform: translate(36px, 16px) rotate(1080deg); }
|
||
72%, 100% { opacity: 0; transform: translate(0, 0) rotate(1080deg); }
|
||
}
|
||
@keyframes lock-one {
|
||
0%, 56% { opacity: 0; }
|
||
60%, 100% { opacity: 1; }
|
||
}
|
||
@keyframes lock-two {
|
||
0%, 64% { opacity: 0; }
|
||
68%, 100% { opacity: 1; }
|
||
}
|
||
@keyframes lock-three {
|
||
0%, 72% { opacity: 0; }
|
||
76%, 100% { opacity: 1; }
|
||
}
|
||
@keyframes reward-launch {
|
||
0%, 78% { opacity: 0; transform: translateX(-50%) translateY(70px) scale(.3); }
|
||
86% { opacity: 1; transform: translateX(-50%) translateY(-28px) scale(1.15); }
|
||
100% { opacity: 0; transform: translateX(-50%) translateY(-86px) scale(.86); }
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.grid-2, .grid-3, .collab-grid { grid-template-columns: 1fr; }
|
||
.section-title-row { display: block; }
|
||
.preview { min-height: 300px; }
|
||
.preview-tray { width: 240px; height: 240px; bottom: 34px; }
|
||
.preview-board { top: 126px; height: 78px; padding: 12px; gap: 10px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header id="top">
|
||
<h1>FishDice Lucky Dice 资产与配置交付清单</h1>
|
||
<p class="lede">
|
||
参考目标是桌面上的 Dig&Roll 双四叶草 Lucky Dice 流程拆解页。当前 FishDice demo core 已经足够承接后续开发：
|
||
双 Clover 触发 Lucky Dice、三格结果栏、rocket/thief 进入目标模式的逻辑已经跑通；现在需要美术和策划补齐完整表现、特殊结果、运营权重和短玩法规则。
|
||
</p>
|
||
<section class="summary" aria-label="handoff summary">
|
||
<div class="summary-item"><strong>Core 已够</strong><span>继续收外部输入，不继续扩文字 demo</span></div>
|
||
<div class="summary-item"><strong>3 格</strong><span>固定特殊骰结果栏是表现基准</span></div>
|
||
<div class="summary-item"><strong>x1 / x3 / x20</strong><span>倍率改变价值感，不改变结构</span></div>
|
||
<div class="summary-item"><strong>7.5-9s</strong><span>触发到转场的主要表现时长参考</span></div>
|
||
</section>
|
||
</header>
|
||
|
||
<main>
|
||
<nav class="nav">
|
||
<a href="#collab">协作看板</a>
|
||
<a href="#flow">核心链路</a>
|
||
<a href="#reference">竞品帧图</a>
|
||
<a href="#variants">变体对比</a>
|
||
<a href="#base-assets">基础素材</a>
|
||
<a href="#art">美术清单</a>
|
||
<a href="#design">策划配置</a>
|
||
<a href="#core">Core 实现</a>
|
||
<a href="#next">下一阶段</a>
|
||
</nav>
|
||
|
||
<section id="collab" class="collab-board" aria-label="collaboration blockers">
|
||
<h2>协作阻塞看板：这些不是程序 core 内部能补齐的内容</h2>
|
||
<div class="collab-grid">
|
||
<article class="owner-card">
|
||
<h3>美术同学 <span class="owner-tag art">需要交付</span></h3>
|
||
<ul>
|
||
<li>双四叶草触发：压暗、绿色四叶草爆发、标题强闪光。</li>
|
||
<li>基础 UI 套件：背景遮罩、标题字、倍率牌、三格槽、红色托盘、奖励容器。</li>
|
||
<li>骰子部件：普通骰体、2/3/4/5/6/Clover 面、Lucky 特殊骰体和五类特殊面。</li>
|
||
<li>Lucky Dice 三格结果栏、红色托盘、三颗特殊骰飞入和滚动。</li>
|
||
<li>逐格锁定、奖励飞出、彩带/粒子、白烟转场。</li>
|
||
<li>rocket / thief / chest / bomb / key 五类结果图标和对应命中特效。</li>
|
||
</ul>
|
||
</article>
|
||
<article class="owner-card">
|
||
<h3>策划同学 <span class="owner-tag design">需要交付</span></h3>
|
||
<ul>
|
||
<li>每个普通骰组合的行为说明：奖励、倍率、提示、是否触发 Lucky Dice。</li>
|
||
<li>chest / bomb / key 的完整玩法语义、奖励结算和失败/退出规则。</li>
|
||
<li>Slap Down / Treasure Heist 的完整短玩法规则。</li>
|
||
<li>活动期、新手期、冷却、保底、互斥、兜底等运营权重策略。</li>
|
||
</ul>
|
||
</article>
|
||
<article class="owner-card">
|
||
<h3>程序/联调 <span class="owner-tag dev">承接方式</span></h3>
|
||
<ul>
|
||
<li>当前 core 已能输出 Roll、规则、Lucky Dice 选择和目标模式结果。</li>
|
||
<li>优先把策划意图配置到现有 matcher/action 体系。</li>
|
||
<li>接入美术时间轴与资源，形成真实 Lucky Dice 表现层。</li>
|
||
<li>只有现有通用 action 无法表达时，才新增新的通用 executor。</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="preview" aria-label="animation rhythm preview">
|
||
<div class="preview-title">LUCKY DICE</div>
|
||
<div class="preview-board">
|
||
<div class="slot"></div>
|
||
<div class="slot"></div>
|
||
<div class="slot"></div>
|
||
</div>
|
||
<div class="preview-tray"></div>
|
||
<div class="die">1</div>
|
||
<div class="die">2</div>
|
||
<div class="die">3</div>
|
||
<div class="reward">ROCKET REWARD</div>
|
||
</section>
|
||
|
||
<section id="flow" class="section">
|
||
<h2>当前核心链路</h2>
|
||
<div class="grid-3">
|
||
<div class="panel"><h3>普通 Roll</h3><p><code>DiceRollService</code> 按配置生成普通骰，<code>ComboFactBuilder</code> 转成结构化组合事实。</p></div>
|
||
<div class="panel"><h3>规则与 action</h3><p><code>ComboRuleMatcher</code> 按优先级命中规则，<code>RollActionDispatcher</code> 按 action type 执行。</p></div>
|
||
<div class="panel"><h3>Lucky Dice</h3><p>双 Clover 触发候选筛选与权重随机，生成 3 格结果，再解析目标模式。</p></div>
|
||
</div>
|
||
<table>
|
||
<thead><tr><th>场景</th><th>当前配置结果</th><th>后续需要提供</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>数字 + 数字</td><td>普通奖励</td><td>真实奖励池、倍率、飞入表现。</td></tr>
|
||
<tr><td>数字 + Clover</td><td>普通奖励 + Clover bonus</td><td>bonus 数值、文案、特效、音效。</td></tr>
|
||
<tr><td>Clover + Clover</td><td>触发 Lucky Dice</td><td>完整双四叶草爆发、标题、托盘、三骰入场动画。</td></tr>
|
||
<tr><td>rocket</td><td><code>slap_down_normal</code></td><td>Slap Down 完整短玩法规则和表现。</td></tr>
|
||
<tr><td>thief</td><td><code>treasure_heist_normal</code></td><td>Treasure Heist 完整短玩法规则和表现。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="reference" class="section">
|
||
<h2>主流程帧图：双四叶草到 Slap Down</h2>
|
||
<div class="grid">
|
||
<figure><img src="frames/main_01_double_clover.jpg" alt="双四叶草落定"><figcaption>1. 双四叶草停在 DIG 按钮上方，仍保留地图状态和金币倍率。</figcaption></figure>
|
||
<figure><img src="frames/main_02_clover_burst.jpg" alt="四叶草粒子爆发"><figcaption>2. 背景压暗，绿色四叶草从中心向外爆发，先确认稀有触发。</figcaption></figure>
|
||
<figure><img src="frames/main_03_title_flash.jpg" alt="Lucky Dice 标题闪光"><figcaption>3. 标题用强黄光和两颗四叶草骰做入口识别。</figcaption></figure>
|
||
<figure><img src="frames/main_04_board_rise.jpg" alt="三格结果栏和托盘入场"><figcaption>4. 三格结果栏和红色托盘同时入场，顶部显示当前倍率。</figcaption></figure>
|
||
<figure><img src="frames/main_05_dice_enter.jpg" alt="三颗特殊骰飞入"><figcaption>5. 三颗特殊骰从屏幕边缘飞入，轨迹用金色粒子强调随机感。</figcaption></figure>
|
||
<figure><img src="frames/main_06_roll_mid.jpg" alt="骰子中段滚动"><figcaption>6. 骰子在托盘上滚动，结果栏暂时保持空位，悬念集中在三格。</figcaption></figure>
|
||
<figure><img src="frames/main_07_roll_settle.jpg" alt="骰子落稳"><figcaption>7. 骰子落稳，开始准备逐格点亮。</figcaption></figure>
|
||
<figure><img src="frames/main_08_first_lock.jpg" alt="第一格锁定"><figcaption>8. 第一个结果被金色垂线拉入左槽，槽位高亮。</figcaption></figure>
|
||
<figure><img src="frames/main_09_final_lock.jpg" alt="三个火箭结果锁定"><figcaption>9. 三格全部锁定为火箭，明确奖励类型。</figcaption></figure>
|
||
<figure><img src="frames/main_10_reward_launch.jpg" alt="火箭奖励飞出"><figcaption>10. 火箭奖励从托盘中心飞出并撒彩带，完成奖励兑现。</figcaption></figure>
|
||
<figure><img src="frames/main_11_transition_title.jpg" alt="Slap Down 转场标题"><figcaption>11. 白色烟尘转场，进入 <code>SLAP DOWN</code> 标题。</figcaption></figure>
|
||
<figure><img src="frames/main_12_target_mode.jpg" alt="Slap Down 玩法场景"><figcaption>12. 目标玩法落地到实验室场景，奖励动画没有停在结算面板。</figcaption></figure>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="variants" class="section">
|
||
<h2>变体对比</h2>
|
||
<table>
|
||
<thead><tr><th>来源</th><th>倍率 / 结果</th><th>流程差异</th><th>对 FishDice 的要求</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>新手1 44.0s - 58.0s</td><td>x1 / 三火箭 / Slap Down</td><td>地图挖掘自然触发，火箭结果可复用。</td><td>rocket 需要完整 Slap Down 内容和入口表现。</td></tr>
|
||
<tr><td>新手1 119.8s - 131.5s</td><td>x1 / 盗贼 / Treasure Heist</td><td>同一容器换结果图标和目标玩法，三格结构不变。</td><td>thief 需要完整 Treasure Heist 内容和入口表现。</td></tr>
|
||
<tr><td>新手2 147.0s - 158.0s</td><td>x3 / 三火箭</td><td>活动场景触发，背景不同但弹窗层级沿用。</td><td>触发源要可复用，不只绑定普通地图骰子。</td></tr>
|
||
<tr><td>新手2 444.0s - 455.0s</td><td>x20 / 盗贼 / Treasure Heist</td><td>从日常奖励弹窗叠出双四叶草。</td><td>运营活动和弹窗源也要能进入同一 Lucky Dice 表现层。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Slap Down 变体</h3>
|
||
<div class="grid">
|
||
<figure><img src="frames/variant_a_01_double_clover.jpg" alt="早期双四叶草"><figcaption>双四叶草落定。</figcaption></figure>
|
||
<figure><img src="frames/variant_a_02_board.jpg" alt="早期 Lucky Dice 入口"><figcaption>进入 Lucky Dice 入口。</figcaption></figure>
|
||
<figure><img src="frames/variant_a_03_locking.jpg" alt="早期火箭锁定"><figcaption>火箭结果逐格锁定。</figcaption></figure>
|
||
<figure><img src="frames/variant_a_04_complete.jpg" alt="早期火箭完成"><figcaption>三火箭完成。</figcaption></figure>
|
||
<figure><img src="frames/variant_a_05_slap_down.jpg" alt="早期 Slap Down"><figcaption>转入 Slap Down。</figcaption></figure>
|
||
</div>
|
||
|
||
<h3>Treasure Heist 与倍率变体</h3>
|
||
<div class="grid">
|
||
<figure><img src="frames/variant_b_01_clover_burst.jpg" alt="Treasure 变体双四叶草"><figcaption>Treasure 变体双四叶草落定。</figcaption></figure>
|
||
<figure><img src="frames/variant_b_03_locking.jpg" alt="Treasure 变体锁定"><figcaption>盗贼结果开始锁定。</figcaption></figure>
|
||
<figure><img src="frames/variant_b_05_transition.jpg" alt="Treasure Heist 转场"><figcaption>转入 Treasure Heist。</figcaption></figure>
|
||
<figure><img src="frames/variant_c_03_board.jpg" alt="x3 盘面"><figcaption>x3 三格盘面。</figcaption></figure>
|
||
<figure><img src="frames/variant_d_03_board.jpg" alt="x20 盘面"><figcaption>x20 三格盘面。</figcaption></figure>
|
||
<figure><img src="frames/variant_d_06_transition.jpg" alt="x20 Treasure Heist"><figcaption>x20 转入 Treasure Heist。</figcaption></figure>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="base-assets" class="section">
|
||
<div class="section-title-row">
|
||
<h2>基础素材对照清单</h2>
|
||
<span class="owner-tag art">美术/UI 阻塞输入</span>
|
||
</div>
|
||
<div class="callout">
|
||
这部分不是“完整动画”的大项，而是所有动画和界面都依赖的底层素材。可以按参考帧逐项对齐：先把基础 UI、骰子部件、图标和状态补齐，程序再把它们接入现有 core 输出。
|
||
</div>
|
||
<table class="blocking-table compare-table">
|
||
<thead><tr><th>分类</th><th>参考帧</th><th>参考里有什么</th><th>FishDice 需要提供</th><th>当前差距</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>普通骰面</td>
|
||
<td><code>main_01</code><br><code>variant_c_01</code></td>
|
||
<td>两颗 Clover 停在 DIG 按钮上方，仍保留地图、金币倍率和普通骰落点关系。</td>
|
||
<td>普通骰体、2/3/4/5/6/Clover 六类面、落定态、高亮态、禁用或遮罩态。</td>
|
||
<td><span class="gap-tag">缺正式骰面</span><span class="gap-tag">缺骰体材质</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>基础 UI 界面</td>
|
||
<td><code>main_02</code><br><code>main_03</code></td>
|
||
<td>触发后先压暗背景，再用 Lucky Dice 大标题、强黄光和两颗 Clover 做入口识别。</td>
|
||
<td>全屏 dim mask、标题字、标题光效、入口装饰、弹入/闪白/淡出时序。</td>
|
||
<td><span class="gap-tag">缺触发界面</span><span class="gap-tag">缺标题资源</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>结果栏 UI</td>
|
||
<td><code>main_04</code><br><code>variant_d_03</code></td>
|
||
<td>金边三格槽、顶部倍率 x1/x3/x20、空槽、锁定槽和高亮槽都在同一个结构里。</td>
|
||
<td>三格结果栏 prefab、倍率牌、空槽/滚动/锁定/完成四种状态、槽位高亮特效。</td>
|
||
<td><span class="gap-tag">core 有 slotCount</span><span class="gap-tag">缺 UI 资产</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>托盘/容器</td>
|
||
<td><code>main_04</code><br><code>main_06</code></td>
|
||
<td>红色托盘作为三颗 Lucky Dice 的滚动容器，带厚度、阴影和中心舞台感。</td>
|
||
<td>红色托盘底图或模型、托盘阴影、骰子落点参考、入场/抬升/停留动画。</td>
|
||
<td><span class="gap-tag">缺托盘</span><span class="gap-tag">缺落点规范</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Lucky 特殊骰</td>
|
||
<td><code>main_05</code><br><code>main_07</code></td>
|
||
<td>三颗特殊骰从屏幕边缘飞入，在托盘中滚动，最终停在可读面。</td>
|
||
<td>特殊骰体、特殊面贴图、飞入轨迹粒子、滚动帧、抖动帧、停稳帧。</td>
|
||
<td><span class="gap-tag">缺特殊骰体</span><span class="gap-tag">缺飞入轨迹</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>结果图标</td>
|
||
<td><code>main_09</code><br><code>variant_b_03</code></td>
|
||
<td>rocket/thief 图标进入三格槽后逐格锁定，图标决定后续目标玩法。</td>
|
||
<td>rocket、thief、chest、bomb、key 五类结果图标，含普通态、锁定态、飞出态。</td>
|
||
<td><span class="gap-tag">缺 chest/bomb/key</span><span class="gap-tag">缺状态图</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>奖励飞出</td>
|
||
<td><code>main_10</code><br><code>variant_b_04</code></td>
|
||
<td>结果从托盘中心飞出，同时出现彩带、金币和奖励强调。</td>
|
||
<td>奖励容器、飞出路径、彩带/金币粒子、命中特效、飞向目标入口的收束点。</td>
|
||
<td><span class="gap-tag">缺飞出资源</span><span class="gap-tag">缺路径点</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>白烟转场</td>
|
||
<td><code>main_11</code><br><code>variant_d_06</code></td>
|
||
<td>白烟遮挡旧界面，露出 Slap Down 或 Treasure Heist 的目标玩法标题。</td>
|
||
<td>白烟 VFX、目标玩法 title card、转场遮罩、进入玩法前后的保留/销毁规则。</td>
|
||
<td><span class="gap-tag">缺转场 VFX</span><span class="gap-tag">缺标题卡</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>目标玩法 UI</td>
|
||
<td><code>main_12</code><br><code>variant_a_05</code></td>
|
||
<td>转入实验室/目标玩法场景，不停留在 Lucky Dice 结算面板。</td>
|
||
<td>Slap Down、Treasure Heist、chest、bomb、key 对应玩法 UI、按钮、结算和返回入口。</td>
|
||
<td><span class="gap-tag">缺短玩法 UI</span><span class="gap-tag">缺规则定义</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="art" class="section">
|
||
<div class="section-title-row">
|
||
<h2>美术资产清单</h2>
|
||
<span class="owner-tag art">美术阻塞输入</span>
|
||
</div>
|
||
<div class="notes">
|
||
<div class="note"><strong>触发确认先于结果。</strong><br>双四叶草不是直接给奖励，而是先压暗、四叶草粒子爆发、标题闪光，告诉玩家稀有事件已发生。</div>
|
||
<div class="note"><strong>三格结构稳定。</strong><br>无论 x1、x3、x20，三颗特殊骰和三格锁定不变；倍率只改变价值感。</div>
|
||
<div class="note"><strong>结果强绑定下一玩法。</strong><br>三火箭进入 Slap Down，盗贼进入 Treasure Heist；奖励不是停在结算面板。</div>
|
||
</div>
|
||
|
||
<h3>必须提供</h3>
|
||
<table class="blocking-table">
|
||
<thead><tr><th>模块</th><th>资产</th><th>规格</th><th>命名建议</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>基础 UI</td><td>全屏背景压暗层</td><td>触发 Lucky Dice 时覆盖当前地图或活动界面</td><td><code>ui_lucky_dim_mask</code></td></tr>
|
||
<tr><td>基础 UI</td><td>倍率牌</td><td>x1/x3/x20，可扩展更多倍率</td><td><code>ui_lucky_multiplier_badge</code></td></tr>
|
||
<tr><td>普通骰子</td><td>数字骰面</td><td>2/3/4/5/6</td><td><code>dice_face_2</code> 到 <code>dice_face_6</code></td></tr>
|
||
<tr><td>普通骰子</td><td>基础骰体</td><td>普通 Roll 使用，需支持数字面和 Clover 面贴图</td><td><code>dice_body_normal</code></td></tr>
|
||
<tr><td>普通骰子</td><td>Clover 骰面</td><td>普通骰面中的特殊面</td><td><code>dice_face_clover</code></td></tr>
|
||
<tr><td>触发表现</td><td>绿色四叶草爆发</td><td>压暗背景 + 中心爆发 + 四叶草粒子</td><td><code>vfx_double_clover_burst</code></td></tr>
|
||
<tr><td>Lucky Dice</td><td>标题与强黄光</td><td>Lucky Dice 标题、闪光、两颗 Clover 标识</td><td><code>ui_lucky_dice_title</code></td></tr>
|
||
<tr><td>Lucky Dice</td><td>三格结果栏</td><td>固定 3 格，支持倍率显示</td><td><code>ui_lucky_result_board</code></td></tr>
|
||
<tr><td>Lucky Dice</td><td>红色托盘</td><td>托盘入场、骰子滚动承载</td><td><code>ui_lucky_dice_tray</code></td></tr>
|
||
<tr><td>Lucky Dice</td><td>特殊骰体</td><td>三颗 Lucky Dice 使用，需支持飞入、滚动、落稳</td><td><code>dice_body_lucky</code></td></tr>
|
||
<tr><td>Lucky Dice</td><td>特殊结果图标</td><td>rocket/thief/chest/bomb/key</td><td><code>lucky_result_rocket</code> 等</td></tr>
|
||
<tr><td>奖励表现</td><td>奖励飞出容器</td><td>结果从托盘中心飞出，支持金币/道具/玩法入口</td><td><code>ui_lucky_reward_flyout</code></td></tr>
|
||
<tr><td>转场</td><td>白烟转场</td><td>从结果奖励飞出到目标玩法标题</td><td><code>vfx_lucky_mode_transition</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="design" class="section">
|
||
<div class="section-title-row">
|
||
<h2>策划配置清单</h2>
|
||
<span class="owner-tag design">策划阻塞输入</span>
|
||
</div>
|
||
<table class="blocking-table">
|
||
<thead><tr><th>表/配置</th><th>当前值或需要提供</th><th>说明</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>DiceSetConfig</code></td><td><code>normal_main</code>：2 颗，面池 <code>2,3,4,5,6,clover</code></td><td>普通骰数量和面池必须来自配置。</td></tr>
|
||
<tr><td><code>ComboRuleConfig</code></td><td><code>clover_clover -> trigger_lucky_dice</code></td><td>双 Clover 的优先级要高于普通奖励。</td></tr>
|
||
<tr><td><code>LuckyDiceCandidateConfig</code></td><td>result、target、slot、weight、enabled、sourceFilter、default</td><td>现有 rocket/thief 只是默认样例。</td></tr>
|
||
<tr><td><code>TargetModeConfig</code></td><td><code>rocket -> slap_down_normal</code>，<code>thief -> treasure_heist_normal</code></td><td>chest/bomb/key 也需要对应目标模式。</td></tr>
|
||
<tr><td>完整结果玩法</td><td><code>chest/bomb/key</code> 的规则、奖励、失败/退出、表现需求</td><td>当前 core 能接候选，但语义还缺策划定义。</td></tr>
|
||
<tr><td>短玩法规则</td><td>Slap Down / Treasure Heist 的入口、胜负、操作、结算、回主循环</td><td>当前只解析到 modeKey，还不是完整短玩法。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>复杂运营权重策略</h3>
|
||
<div class="grid-3">
|
||
<div class="panel"><h3>活动期权重</h3><p>活动 ID、起止条件、哪些 <code>resultKey</code> 提权、权重变化值。</p></div>
|
||
<div class="panel"><h3>新手期策略</h3><p>第几次 Roll 固定结果、何时开放随机、教程模式如何映射。</p></div>
|
||
<div class="panel"><h3>冷却与保底</h3><p>冷却时间、次数限制、连续未命中特殊结果后的提权或强制命中。</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="core" class="section">
|
||
<h2>当前 Core 实现说明</h2>
|
||
<div class="grid-2">
|
||
<div class="path-block">LuckyDiceRuntimeFactory
|
||
-> DiceRollService
|
||
-> ComboRuleMatcher
|
||
-> RollActionDispatcher
|
||
-> LuckyDiceFlowService
|
||
-> TargetModeResolver</div>
|
||
<div class="panel">
|
||
<h3>实现边界</h3>
|
||
<p>外部调用 <code>LuckyDiceRollFlowService.Execute()</code> 得到完整 <code>RollFlowResult</code>。当前 Demo 使用文字模拟骰面和结果，没有接正式动画、音效或目标玩法场景。</p>
|
||
<p>程序侧仍优先把策划意图配置到现有 matcher/action 体系中，确实无法表达时才新增通用 executor。</p>
|
||
</div>
|
||
</div>
|
||
<div class="callout">当前 core 已够承载下一阶段开发。后续不是继续扩文字 demo，而是接入美术时序、真实资源、结果配置和短玩法内容。</div>
|
||
</section>
|
||
|
||
<section id="next" class="section">
|
||
<h2>下一阶段需要收齐</h2>
|
||
<ul class="checklist">
|
||
<li><span class="owner-tag art">美术</span> 基础 UI 套件：背景遮罩、Lucky Dice 标题、倍率牌、三格槽、红色托盘、奖励飞出容器、目标玩法标题卡。</li>
|
||
<li><span class="owner-tag art">美术</span> 骰子基础部件：普通骰体、特殊骰体、2/3/4/5/6/Clover 面、rocket/thief/chest/bomb/key 特殊面和锁定状态。</li>
|
||
<li><span class="owner-tag art">美术</span> 完整复刻竞品的托盘、骰子飞入、白烟、粒子爆发、逐格锁定、奖励飞出全套动画拆解与资源。</li>
|
||
<li><span class="owner-tag art">美术</span> rocket / thief / chest / bomb / key 的结果图标、命中特效、奖励飞出和目标玩法转场表现。</li>
|
||
<li><span class="owner-tag design">策划</span> <code>chest/bomb/key</code> 的完整玩法内容、入口配置、奖励结算和表现需求。</li>
|
||
<li><span class="owner-tag design">策划</span> 复杂运营权重策略，包括活动期、新手期、冷却、保底、互斥和兜底。</li>
|
||
<li><span class="owner-tag design">策划</span> Slap Down / Treasure Heist 的完整短玩法规则，而不仅是 <code>modeKey</code>。</li>
|
||
<li><span class="owner-tag design">策划</span> 每个普通骰组合的行为需求说明，包括奖励、倍率、提示、是否触发 Lucky Dice。</li>
|
||
<li><span class="owner-tag dev">程序/联调</span> 触发源复用要求：主地图骰子、活动场景、日常奖励弹窗都应能叠出同一 Lucky Dice 表现层。</li>
|
||
<li><span class="owner-tag dev">程序/联调</span> 将策划配置与美术时间轴接入现有 core，补必要的通用 executor 和表现层控制器。</li>
|
||
</ul>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
页面路径：<code>FishDice/Docs/Handoff/lucky-dice-assets-config-checklist.html</code>。参考帧图来自 <code>C:/Users/13999/Desktop/dig_roll_flow/frames</code>，已复制到当前 handoff 目录。
|
||
</footer>
|
||
</body>
|
||
</html>
|