three实现三维沙漠悬浮飞船驾驶游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：three实现三维沙漠悬浮飞船驾驶游戏代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>沙漠悬浮竞速 · DUNE RUNNER</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#140a10}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif}
canvas{display:block}

/* ===================== HUD 覆盖层 ===================== */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;color:#ffe9d2}
.panel{position:absolute;background:rgba(22,10,26,.45);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 14px;backdrop-filter:blur(3px);letter-spacing:1px}
#pLeft{top:18px;left:18px;min-width:190px}
#pRight{top:18px;right:18px;min-width:190px;text-align:right}
.big{font-size:30px;font-weight:700;color:#fff;text-shadow:0 0 14px rgba(255,110,220,.85);line-height:1.1}
.big .unit{font-size:12px;font-weight:400;opacity:.8;margin-left:4px;letter-spacing:2px}
.row{display:flex;justify-content:space-between;gap:16px;font-size:12px;opacity:.85;margin-top:5px}
#pHelp{bottom:18px;left:18px;font-size:12px;opacity:.85}
#pMute{bottom:18px;right:18px;font-size:12px;opacity:.85}
#pMute b{color:#ff9ae8}
#thrWrap{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:280px}
#thrLabel{text-align:center;font-size:11px;letter-spacing:6px;opacity:.7;margin-bottom:5px}
#thrBar{height:10px;border:1px solid rgba(255,255,255,.35);border-radius:6px;overflow:hidden;background:rgba(0,0,0,.35)}
#thrFill{height:100%;width:0%;background:linear-gradient(90deg,#ff4dff,#b06bff);box-shadow:0 0 12px rgba(255,80,255,.9)}

/* ===================== 准星（纯 CSS，屏幕中央） ===================== */
#crosshair{position:fixed;left:50%;top:50%;width:84px;height:84px;transform:translate(-50%,-50%);z-index:5;pointer-events:none;opacity:.92}
#crosshair .ring{position:absolute;inset:0;border:2px solid rgba(255,255,255,.55);border-radius:50%;box-shadow:0 0 14px rgba(255,160,255,.35),inset 0 0 14px rgba(255,160,255,.25)}
#crosshair .tick{position:absolute;background:rgba(255,255,255,.85);box-shadow:0 0 6px rgba(255,255,255,.6)}
#crosshair .t{left:50%;top:-3px;width:2px;height:13px;margin-left:-1px}
#crosshair .b{left:50%;bottom:-3px;width:2px;height:13px;margin-left:-1px}
#crosshair .l{top:50%;left:-3px;height:2px;width:13px;margin-top:-1px}
#crosshair .r{top:50%;right:-3px;height:2px;width:13px;margin-top:-1px}
#crosshair .dot{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9)}

/* ===================== 全屏氛围效果 ===================== */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at center,transparent 55%,rgba(26,7,32,.55) 100%)}
#flash{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;background:radial-gradient(circle,rgba(255,150,225,.85),rgba(255,70,120,.45))}

/* ===================== 开始界面 ===================== */
#start{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(16,7,22,.55);backdrop-filter:blur(2px);cursor:pointer;transition:opacity .6s}
#start.hidden{opacity:0;pointer-events:none}
#start h1{font-size:58px;letter-spacing:10px;font-weight:800;background:linear-gradient(90deg,#ffd29a,#ff5ad2 55%,#8a6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
#start .sub{margin-top:12px;color:#ffd9b8;letter-spacing:14px;font-size:16px}
#startControls{margin-top:34px;display:grid;grid-template-columns:auto auto;gap:9px 20px;font-size:13px;color:#f4d8c8;opacity:.92;letter-spacing:1px}
#startControls .k{color:#ffd27a;font-weight:700;text-align:right}
#startHint{margin-top:44px;font-size:17px;colo.........完整代码请登录后点击上方下载按钮下载查看