cabinw
8026e4628d
- 玩法一 数字一笔：规则库、求解器、26 关、竖屏触摸 Web 原型、测试 - 玩法二 连连气球：连消畅玩版核心、Web 原型、Cocos 球槽组件与导出脚本 - 玩法三 六边一笔：规则库、求解器、10 关 + 转墙实验包、Web 原型、测试 - 产品文档、UI 设计规范、各玩法 GDD / HANDOFF - 文档移除全部外部参考作引用；删除玩法二 v0 旧稿
70 lines
3.2 KiB
HTML
70 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
|
/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="theme-color" content="#ffffff" />
|
|
<title>六边一笔</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 选关 -->
|
|
<section id="screen-select" class="screen">
|
|
<header class="select-header">
|
|
<div class="logo">
|
|
<span class="logo-hex"></span>
|
|
<span class="logo-hex on"></span>
|
|
<span class="logo-hex wall"></span>
|
|
</div>
|
|
<h1>六边一笔</h1>
|
|
<p class="sub">六边形上一笔走遍，条纹墙挡住那条路</p>
|
|
</header>
|
|
<div class="pack">
|
|
<div class="pack-title"><span id="pack-name">教学</span><span id="pack-progress" class="pack-progress"></span></div>
|
|
<div id="level-grid" class="level-grid"></div>
|
|
</div>
|
|
<button id="btn-continue" class="primary">继续</button>
|
|
<footer class="select-footer">
|
|
<button id="btn-sound" class="chip">音效</button>
|
|
<button id="btn-haptic" class="chip">振动</button>
|
|
<button id="btn-reset-progress" class="chip danger">重置进度</button>
|
|
</footer>
|
|
</section>
|
|
|
|
<!-- 对局 -->
|
|
<section id="screen-play" class="screen hidden">
|
|
<header class="topbar">
|
|
<button id="btn-back" class="icon" aria-label="返回选关">
|
|
<svg viewBox="0 0 24 24" width="26" height="26"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
<div id="level-title" class="level-title">1-1</div>
|
|
<div id="remaining" class="remaining"><span class="hex-dot"></span><span id="remaining-n">0</span></div>
|
|
</header>
|
|
<div id="caption" class="caption"></div>
|
|
<div id="board-wrap" class="board-wrap">
|
|
<canvas id="board"></canvas>
|
|
</div>
|
|
<footer class="bottombar">
|
|
<button id="btn-restart" class="action">
|
|
<svg viewBox="0 0 24 24" width="22" height="22"><path d="M4 12a8 8 0 1 0 2.5-5.8" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><path d="M4 4v5h5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span>重开</span>
|
|
</button>
|
|
<button id="btn-hint" class="action">
|
|
<svg viewBox="0 0 24 24" width="22" height="22"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1.1 2.2h5c.1-1 .5-1.7 1.1-2.2A6 6 0 0 0 12 3z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span>提示</span>
|
|
</button>
|
|
</footer>
|
|
<div id="toast" class="toast" role="status"></div>
|
|
</section>
|
|
</div>
|
|
<script src="dist/app.js"></script>
|
|
</body>
|
|
</html>
|