cabinw
8026e4628d
- 玩法一 数字一笔：规则库、求解器、26 关、竖屏触摸 Web 原型、测试 - 玩法二 连连气球：连消畅玩版核心、Web 原型、Cocos 球槽组件与导出脚本 - 玩法三 六边一笔：规则库、求解器、10 关 + 转墙实验包、Web 原型、测试 - 产品文档、UI 设计规范、各玩法 GDD / HANDOFF - 文档移除全部外部参考作引用；删除玩法二 v0 旧稿
62 lines
5.9 KiB
HTML
62 lines
5.9 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
|
<meta name="theme-color" content="#f3f9ff">
|
|
<meta name="description" content="连连气球：顺号连，同号也能连。自动连消、彩虹双倍、明亮气球，轻轻一划一直玩。">
|
|
<title>连连气球 · POP & LINK</title>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='27' rx='22' ry='26' fill='%2379bafa'/%3E%3Cpath d='m32 50-5 8h10Z' fill='%2362a7eb'/%3E%3Cellipse cx='24' cy='14' rx='7' ry='3' fill='white'/%3E%3C/svg%3E">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<svg class="symbols" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><symbol id="i-balloon" viewBox="0 0 24 24"><ellipse cx="12" cy="9" rx="6.5" ry="8"/><path d="m12 17-2 3h4l-2-3M12 20c-4 2 3 2 0 4M9 5l-1 2"/></symbol><symbol id="i-star" viewBox="0 0 24 24"><path d="m12 3 2.8 5.8 6.4.9-4.6 4.5 1.1 6.3-5.7-3-5.7 3 1.1-6.3-4.6-4.5 6.4-.9Z"/></symbol>
|
|
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M12 21V11M12 14C3 15 3 7 3 5c6 0 10 3 9 9ZM12 10c0-6 4-8 9-8 0 6-3 10-9 10"/></symbol>
|
|
<symbol id="i-grid" viewBox="0 0 24 24"><rect x="4" y="4" width="6" height="6" rx="2"/><rect x="14" y="4" width="6" height="6" rx="2"/><rect x="4" y="14" width="6" height="6" rx="2"/><rect x="14" y="14" width="6" height="6" rx="2"/></symbol>
|
|
<symbol id="i-sound" viewBox="0 0 24 24"><path d="m11 5-5 4H3v6h3l5 4V5ZM15 8c3 2 3 6 0 8M18 5c5 4 5 10 0 14"/></symbol>
|
|
<symbol id="i-muted" viewBox="0 0 24 24"><path d="m11 5-5 4H3v6h3l5 4V5ZM16 9l5 6m0-6-5 6"/></symbol>
|
|
<symbol id="i-help" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 9a3 3 0 0 1 6 0c0 2-3 2-3 5M12 17h.01"/></symbol>
|
|
<symbol id="i-undo" viewBox="0 0 24 24"><path d="m8 4-5 5 5 5M3 9h11a6 6 0 0 1 0 12h-3"/></symbol>
|
|
<symbol id="i-hint" viewBox="0 0 24 24"><path d="M8 16c0-3-3-3-3-7a7 7 0 0 1 14 0c0 4-3 4-3 7H8ZM9 20h6M10 23h4M10 11l2 2 2-2M12 13v3"/></symbol>
|
|
<symbol id="i-shuffle" viewBox="0 0 24 24"><path d="M3 6h3c5 0 6 12 11 12h4m-4-4 4 4-4 4M3 18h3c2 0 4-3 6-6s3-6 5-6h4m-4-4 4 4-4 4"/></symbol>
|
|
<symbol id="i-restart" viewBox="0 0 24 24"><path d="M4 9a8 8 0 1 1 0 7M4 3v6h6"/></symbol>
|
|
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M4 12h16m-6-6 6 6-6 6"/></symbol>
|
|
<symbol id="i-close" viewBox="0 0 24 24"><path d="m6 6 12 12M6 18 18 6"/></symbol>
|
|
<symbol id="i-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
|
|
</defs></svg>
|
|
<aside class="desktop-note" aria-hidden="true"><div class="floating-balloon b-one">1</div><div class="floating-balloon b-two">2</div><div class="floating-balloon b-three">3</div><p>POP. LINK. REPEAT.</p><h2>轻轻一划，<br>快乐就连起来了。</h2><span>让数字长大，让心情放飞。</span></aside>
|
|
<main class="app" id="app">
|
|
<header class="brand-bar">
|
|
<div class="brand"><span class="brand-mark"><svg><use href="#i-balloon"/></svg></span><div><h1>连连气球</h1><span>POP & LINK</span></div></div>
|
|
<div class="header-actions"><button class="icon-button" id="sound" aria-label="关闭音效"><svg><use href="#i-sound"/></svg></button><button class="icon-button" id="help" aria-label="玩法说明"><svg><use href="#i-help"/></svg></button></div>
|
|
</header>
|
|
<section class="scoreboard" aria-label="本局成绩">
|
|
<div class="score-main"><span class="eyebrow">本局得分</span><strong id="score">0</strong><span class="best-line">最佳 <b id="best-score">0</b></span></div>
|
|
<button class="collection" id="records" aria-label="查看放飞记录"><span class="best-balloon" id="peak">4</span><span>最大气球</span></button>
|
|
</section>
|
|
<section class="flow-bar" aria-label="补给和双倍能量">
|
|
<div class="fever-block"><div class="fever-label"><span id="fever-label">彩虹能量</span><b id="fever-count">0 / 10</b></div><div class="fever-track" role="progressbar" id="fever-meter" aria-label="彩虹能量" aria-valuemin="0" aria-valuemax="10" aria-valuenow="0"><i id="fever-fill"></i></div></div>
|
|
<div class="upcoming"><span>接下来</span><div id="queue" aria-label="接下来掉落的数字"></div></div>
|
|
</section>
|
|
<section class="stage" id="stage" aria-label="气球游乐场">
|
|
<canvas id="board" aria-label="按住气球，连接至少三个连续数字或三个相同数字，再松手。新球会自动接着合成。" role="img"></canvas>
|
|
<div class="welcome" id="welcome"><span>1 · 2 · 3 <i>或</i> 2 · 2 · 2</span><p>顺号连，同号也能连</p></div>
|
|
<div class="combo-banner" id="combo-banner" aria-live="polite"></div>
|
|
<div class="toast" id="toast" role="status" aria-live="polite"></div>
|
|
<span class="stage-caption" id="stage-caption">合成 10，放飞一颗快乐</span>
|
|
</section>
|
|
<div class="chain-preview" id="chain-preview" aria-live="polite">连起 3 颗，看看能接出几连消</div>
|
|
<nav class="tools" aria-label="游戏工具">
|
|
<button id="undo" disabled><svg><use href="#i-undo"/></svg><span>撤一步</span></button>
|
|
<button id="hint" class="hint-button"><svg><use href="#i-hint"/></svg><span>找一串</span></button>
|
|
<button id="shuffle"><svg><use href="#i-shuffle"/></svg><span>吹口气</span></button>
|
|
<button id="restart"><svg><use href="#i-restart"/></svg><span>新一局</span></button>
|
|
</nav>
|
|
<footer class="game-footer"><span id="footer-text">不计时，不限步，开心一直连。</span><span id="flight-count">已放飞 0 颗</span></footer>
|
|
</main>
|
|
<div class="modal-backdrop" id="modal" hidden><section class="sheet" id="sheet" role="dialog" aria-modal="true" aria-labelledby="sheet-title" tabindex="-1"></section></div>
|
|
<noscript>请启用 JavaScript 来玩连连气球。</noscript>
|
|
<script src="dist/app.js"></script>
|
|
</body>
|
|
</html>
|