Toolbox/public/tools/greedy_snake/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>贪蛇出动</title>
<link rel="stylesheet" href="greedy_snake.css">
</head>
<body>
<div id="gs-root">
  <canvas id="gs-canvas"></canvas>

  <!-- 左上 HUD：金币 / 幸运星 / 击杀 -->
  <div id="gs-hud-stats" class="gs-hidden">
    <div class="gs-stat-row"><span class="gs-stat-label">金币：</span><span id="gs-stat-coins" class="gs-stat-value coins">0</span></div>
    <div class="gs-stat-row"><span class="gs-stat-label">幸运星：</span><span id="gs-stat-lucky" class="gs-stat-value lucky">0</span></div>
    <div class="gs-stat-row"><span class="gs-stat-label">击杀：</span><span id="gs-stat-kills" class="gs-stat-value kills">0</span></div>
  </div>

  <!-- 顶部进度：长度达到 N 进入宝藏屋 -->
  <div id="gs-hud-progress" class="gs-hidden">
    <div id="gs-progress-title">长度达到<span id="gs-progress-target">2000</span>进入宝藏屋</div>
    <div id="gs-progress-bar-wrap">
      <span id="gs-progress-flame">🔥</span>
      <div id="gs-progress-bar"><div id="gs-progress-fill"></div></div>
      <span id="gs-progress-text">0/2000</span>
    </div>
  </div>

  <!-- 右上排行榜 -->
  <div id="gs-hud-board" class="gs-hidden">
    <div id="gs-board-title">排行榜</div>
    <div id="gs-board-best">今日最佳</div>
    <div id="gs-board-best-row"><span class="gs-board-name best">🏅 <em id="gs-best-name">-</em></span><span class="gs-board-score best" id="gs-best-score">0</span></div>
    <div id="gs-board-list"></div>
  </div>

  <!-- 左下摇杆 -->
  <div id="gs-joystick" class="gs-hidden">
    <div id="gs-joystick-knob"></div>
  </div>

  <!-- 右下加速按钮 -->
  <button id="gs-boost" class="gs-hidden" aria-label="加速">
    <svg viewBox="0 0 24 24" width="46" height="46"><path d="M13 2 4.5 13.5 H11 L9.5 22 19 10 H12.5 Z" fill="#5b6472"/></svg>
  </button>

  <!-- 开局道具转盘 -->
  <div id="gs-roulette" class="gs-overlay">
    <div id="gs-roulette-title">请选择1个道具</div>
    <div id="gs-roulette-body">
      <div id="gs-slot-machine">
        <div class="gs-bulbs gs-bulbs-top"></div>
        <div class="gs-bulbs gs-bulbs-bottom"></div>
        <div class="gs-bulbs gs-bulbs-left"></div>
        <div class="gs-bulbs gs-bulbs-right"></div>
        <div id="gs-reels">
          <div class="gs-reel" data-idx="0"><div class="gs-reel-icon"></div></div>
          <div class="gs-reel" data-idx="1"><div class="gs-reel-icon"></div></div>
          <div class="gs-reel" data-idx="2"><div class="gs-reel-icon"></div></div>
        </div>
        <div id="gs-roulette-skip">不使用，直接开始</div>
      </div>
      <button id="gs-reroll"><span class="gs-gem">💎</span><span id="gs-reroll-text">20 换一换</span></button>
    </div>
  </div>

  <!-- 死亡复活面板 -->
  <div id="gs-revive" class="gs-overlay gs-hidden">
    <div id="gs-revive-panel">
      <button id="gs-revive-close" aria-label="关闭">×</button>
      <div id="gs-revive-title">复活，给<span id="gs-revive-killer">对手</span>一点教训</div>
      <div id="gs-revive-count-wrap"><div id="gs-revive-count-ring"></div><span id="gs-revive-count">5</span></div>
      <button id="gs-revive-btn">▶ 免费复活</button>
    </div>
  </div>

  <!-- 结算面板 -->
  <div id="gs-result" class="gs-overlay gs-hidden">
    <div id="gs-result-panel">
      <div id="gs-result-title">本局结算</div>
      <div class="gs-result-grid">
        <div class="gs-result-cell"><div class="gs-result-num" id="gs-result-score">0</div><div class="gs-result-label">本局长度</div></div>
        <div class="gs-result-cell"><div class="gs-result-num coins" id="gs-result-coins">0</div><div class="gs-result-label">本局金币</div></div>
        <div class="gs-result-cell"><div class="gs-result-num kills" id="gs-result-kills">0</div><div class="gs-result-label">击杀</div></div>
        <div class="gs-result-cell"><div class="gs-result-num lucky" id="gs-result-lucky">0</div><div class="gs-result-label">幸运星</div></div>
      </div>
      <div id="gs-result-best">历史最佳长度：<em id="gs-result-best-num">0</em></div>
      <div id="gs-result-btns">
        <button id="gs-result-again" class="gs-btn-primary">再来一局</button>
        <button id="gs-result-home" class="gs-btn-ghost">重选道具</button>
      </div>
    </div>
  </div>

  <!-- 竖屏提示 -->
  <div id="gs-rotate-tip"> 请旋转手机至横屏体验「贪蛇出动」</div>

  <!-- Toast / 交互详情弹窗（双模式） -->
  <div id="gs-toast" class="gs-hidden"></div>
  <div id="gs-dialog" class="gs-hidden">
    <div id="gs-dialog-box">
      <div id="gs-dialog-head"><span id="gs-dialog-title">交互详情</span><button id="gs-dialog-copy">复制</button><button id="gs-dialog-close">×</button></div>
      <pre id="gs-dialog-body"></pre>
    </div>
  </div>
</div>

<script src="js/config.js"></script>
<script src="js/utils.js"></script>
<script src="js/input.js"></script>
<script src="js/snake.js"></script>
<script src="js/ai.js"></script>
<script src="js/world.js"></script>
<script src="js/render.js"></script>
<script src="js/ui.js"></script>
<script src="js/main.js"></script>
</body>
</html>