HexTrails/labs/hex-video/index.html

<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HEX / Motion Lab 01</title><link rel="stylesheet" href="lab.css"></head>
<body>
<header class="lab-header"><a href="../../index.html">⬡ <b>HEX TRAILS</b></a><span>EXPERIMENTS / 001</span><a href="README.md">复刻笔记 ↗</a></header>
<main class="workspace">
<aside class="inspector">
<p class="eyebrow">UI & MOTION STUDY</p><h1>小六边形，<br>大满足感。</h1><p class="intro">基于 hex.mp4 的交互复刻。<br>单片糖果棋子、翻转离场与满屏庆祝。</p>
<div class="section-title">01 <span>场景</span></div>
<nav class="scenes" aria-label="场景"><button data-scene="map">关卡地图 <span>01</span></button><button data-scene="play" class="active">棋盘试玩 <span>02</span></button><button data-scene="win">胜利领奖 <span>03</span></button></nav>
<div class="section-title">02 <span>特效试验</span></div>
<div class="effect-grid"><button id="demo">▶ 自动演示</button><button id="confetti">✦ 彩纸喷发</button><button id="unlock">⟳ 解锁弹窗</button><button id="reset">↺ 重置棋盘</button></div>
<label class="range-label" for="speed">动画速度 <output id="speed-value">1.0×</output></label><input id="speed" type="range" min="0.25" max="1.5" step="0.25" value="1">
<label class="toggle"><input type="checkbox" id="tracks"> 显示本项目轨道</label>
<label class="toggle"><input type="checkbox" id="reference-toggle"> 并排查看视频参考</label>
<p id="status" class="status" role="status">点击棋子，沿箭头方向离场。</p>
<div class="footnote"><i></i> LIVE CANVAS · 零依赖<br><span>共享 HEX TRAILS 路线与碰撞模型</span></div>
</aside>
<section class="preview-area" aria-label="交互预览"><div class="preview-label"><span id="scene-label">02 / PLAY</span><span>416 × 960</span></div><div class="device-wrap"><div class="device" id="device">
<section id="play-scene" class="game-scene">
<div class="ice"></div><div class="game-hud"><div class="level-progress">关卡 <span id="level-number">2</span><div><b>1</b><i></i><b>2</b><i></i><b>3</b></div></div><div class="moves">操作<strong id="moves">18</strong></div><button class="settings" aria-label="打开设置">⚙</button></div>
<canvas id="board" width="832" height="1920" aria-label="六边形棋盘；可使用下方键盘棋子列表操作"></canvas>
<div id="tile-controls" aria-label="棋子操作"></div>
<div class="tools"><button id="hint"><span>♧</span><small>提示</small></button><button id="undo"><span>↶</span><small>撤销</small></button></div>
<p class="game-tip" id="game-tip">轻点箭头，清空棋盘</p>
</section>
<section id="map-scene" class="blue-scene" hidden><div class="pattern"></div><div class="map-hud"><div class="mascot">⬡</div><div class="pill coin-balance">🟡 <b>510</b></div><div class="pill">❤️ <small>已满</small></div><button class="settings" aria-label="打开设置">⚙</button></div><div class="map-line"></div><div class="map-nodes" id="map-nodes"></div><button id="start" class="green-button">开始游戏</button><div class="map-caption">HEX TRAILS</div></section>
<section id="win-scene" class="blue-scene" hidden><div class="pattern"></div><div class="pill win-balance coin-balance">🟡 <b>510</b></div><div class="win-title"><h2>你赢了！</h2><p>已完成第 <span id="completed-level">2</span> 关</p></div><div class="sunburst"></div><div id="treasure" class="treasure"></div><strong class="reward">10</strong><button id="collect" class="gold-button">收集</button></section>
<canvas id="fx" width="832" height="1920" aria-hidden="true"></canvas>
<dialog id="modal"><div class="modal-card"><h2 id="modal-title">新功能！</h2><h3 id="modal-subtitle">旋转器</h3><div id="modal-content"></div><button id="modal-close" class="green-button">太棒了！</button></div></dialog>
</div></div><div class="preview-footer"><span>交互原型 / 独立实验室</span><button id="rotate">底盘旋转 ↻</button></div></section>
<section id="reference" class="reference" hidden><div class="preview-label"><span>VIDEO REFERENCE</span><span id="reference-time">00:10</span></div><img id="reference-image" src="reference/play.jpg" alt="视频棋盘参考帧"><p>原始视频抽帧 · 仅作视觉比较</p></section>
</main><script type="module" src="lab.js"></script>
</body></html>