three实现三维海上游艇驾驶游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维海上游艇驾驶游戏代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>三维游艇竞速 - 修复版</title>
<style>
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #87ceeb;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    user-select: none;
    -webkit-user-select: none;
  }
  canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    touch-action: none;
  }
  #hud {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
  }
  .panel {
    position: absolute;
    background: rgba(0, 20, 40, .35);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    padding: 10px 14px;
    backdrop-filter: blur(4px);
  }
  #stats {
    left: 14px;
    top: 14px;
    font-size: 15px;
    line-height: 1.55;
    min-width: 210px;
  }
  #stats b {
    font-size: 26px;
  }
  #minimapPanel {
    right: 14px;
    top: 14px;
    padding: 8px;
  }
  #minimap {
    display: block;
    border-radius: 10px;
    background: rgba(2,20,38,.55);
  }
  #message {
    position: absolute;
    left: 50%;
    top: 18%;
    transform: translateX(-50%);
    font-size: 58px;
    font-weight: 900;
    opacity: 0;
    transition: opacity .18s;
    white-space: nowrap;
  }
  #hint {
    left: 14px;
    bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
    opacity: .9;
    max-width: 460px;
  }
  #touch {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    display: none;
  }
  .tbtn {
    position: absolute;
    bottom: 26px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: 2px solid rgba(255,255,255,.38);
    color: #fff;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none;
    backdrop-filter: blur(3px);
  }
  #tLeft { left: 24px; }
  #tRight { left: 128px; }
  #tBrake { right: 128px; }
  #tGas { right: 24px; }
  #overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 28%, rgba(9,52,84,.52), rgba(0,8,18,.9));
  }
  .card {
    width: min(92vw, 720px);
    color: #fff;
    background: rgba(0, 25, 45, .74);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 22px;
    padding: 30px 36px;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
    text-align: center;
  }
  .card h1 {
    margin: 0 0 12px;
    font-size: 44px;
  }
  .card p {
    line-height: 1.75;
    color: #d9ecff;
    font-size: 16px;
  }
  .card button {
    margin-top: 18px;
    padding: 14px 46px;
    font-size: 22px;
    font-weight: bold;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(90deg, #19c3ff, #0077ff);
    box-shadow: 0 10px 28px rgba(0,120,255,.35);
  }
  .hidden { display: none !important; }
  @media (pointer: coarse) {
    #touch { display: block; }
    #hint { display: none; }
  }
</style>
</head>
<body>

<div id="hud">
  <div id="stats" class="panel">
    <div>速度 <b id="speed">0</b> km/h</div>
    <div>名次 <span id="rank">1/3</span></div>
    <div>圈数 <span id="lap">1/3</span></div>
    <div>时间 <span id="time">00:00.000</span></div>
    <div>最佳圈 <span id="best">--</span></div>
    <div>下一目标 <span id="cp">1/6</span></div>
  </div>

  <div id="minimapPanel" class="panel">
    <canvas id="minimap" width="190" height="190"></canvas>
  </div>

  <div id="message"></div>

  <div id="hint" class="panel">
    W / ↑ 加速 &nbsp;|&nbsp; S / ↓ 刹车/倒车 &nbsp;|&nbsp; A / ← 左转 &nbsp;|&nbsp; D / → 右转<br>
    C 切换镜头 &nbsp;|&nbsp; M 声音开关 &nbsp;|&nbsp; R 重新开始<br>
    按顺序通过黄色光柱检查点，绕标 3 圈。可以撞击 AI 船抢位！
  </div>
</div>

<div id="touch">
  <div id="tLeft" class="tbtn">◀</div>
  <div id="tRight" class="tbtn">▶</div>
  <div id="tBrake" class="tbtn">▼</div>
  <div id="tGas" class="tbtn">▲</div>
</div>

<div id="overlay">
  <div class="card">
    <h1 id="overlayTitle">三维游艇竞速</h1>
    <p id="overlayText">
      驾驶游艇与 2 艘 AI 同场竞速。<br>
      按顺序穿过检查点光柱，绕标 3 圈完成比赛。<br>
      W / ↑ 加速，S / ↓ 刹车/倒车，A / ← 左转，D / → 右转。<br>
      可以撞击其他游艇，利用碰撞超车。<br>
      C 切换镜头，M 声音开关，R 重新开始。<br>
      （需要联网加载 Three.js）
    </p>
    <button id="startBtn">开始比赛</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function () {
  if (typeof THREE === "undefined") {
    document.body.innerHTML = '<div style="color:#fff;background:#062033;height:100vh;display:flex;align-items:center;justify-content:center;font-size:22px;padding:24px;text-align:center;">Three.js 加载失败，请检查网络后刷新。</div>';
    return;
  }

  // =========================
  // 配置
  // =========================
  con.........完整代码请登录后点击上方下载按钮下载查看