js+css实现声呐探测移动避雷游戏代码-html代码-BFW代码库

js+css实现声呐探测移动避雷游戏代码

代码语言：html

所属分类：游戏

代码描述：js+css实现声呐探测移动避雷游戏代码，玩法：在黑暗的迷宫中，你只能看到周围一格，通过发射声呐（Sonar）探测墙壁和出口的位置，用最少的步数和声呐次数找到出口！

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  
<style>
:root {
      --bg: #02030a;
      --panel: #050816;
      --accent: #00e5ff;
      --accent-soft: #00bcd4;
      --danger: #ff4b9f;
      --gold: #ffd86b;
      --text-main: #f4f7ff;
      --text-soft: #9aa2c2;
      --grid-gap: clamp(1px, 0.5vw, 3px);
      --maze-size: 13;
      --cell-size: calc((min(85vw, 85vh, 500px) - var(--grid-gap) * (var(--maze-size) - 1)) / var(--maze-size));
      --game-padding: clamp(10px, 3vw, 18px);
      --border-radius-lg: clamp(12px, 3vw, 20px);
      --border-radius-md: clamp(8px, 2vw, 14px);
      --font-size-title: clamp(14px, 4vw, 16px);
      --font-size-base: clamp(11px, 3vw, 13px);
      --font-size-small: clamp(9px, 2.5vw, 11px);
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      touch-action: manipulation;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at top, #11172a 0, #02030a 55%, #000 100%);
      color: var(--text-main);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

    .game {
      position: relative;
      width: min(95vw, 720px);
      max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
      max-height: calc(100dvh - 20px);
      background: radial-gradient(circle at top left, #10152a 0, var(--panel) 50%, #02030a 100%);
      border-radius: var(--border-radius-lg);
      box-shadow:
        0 clamp(15px, 5vw, 30px) clamp(40px, 10vw, 80px) rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 229, 255, 0.18);
      padding: var(--game-padding);
      display: flex;
      flex-direction: column;
      gap: clamp(8px, 2vw, 12px);
      overflow: hidden;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: clamp(4px, 2vw, 8px);
      font-size: var(--font-size-small);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-soft);
      flex-wrap: wrap;
    }

    .title {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .title-main {
      font-size: var(--font-size-title);
      font-weight: 600;
      letter-spacing: 0.16em;
      color: var(--accent);
      text-shadow:
        0 0 10px rgba(0, 229, 255, 0.6),
        0 0 24px rgba(0, 229, 255, 0.3);
      position: relative;
    }

    .title-main::after {
      content: "▌";
      mar.........完整代码请登录后点击上方下载按钮下载查看