three实现三维黑洞吞噬城市网页游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：三维黑洞吞噬城市网页游戏

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>事件视界 · 吞噬城市</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&display=swap" rel="stylesheet">
<style>
:root{ --amber:#ffb15e; --ember:#ff7a33; --ink:#f0e7db; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0a090c;color:var(--ink);
  font-family:"Unbounded","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-user-select:none;user-select:none}
#game{position:fixed;inset:0}
canvas{display:block;touch-action:none}
.num{font-family:"Unbounded",monospace}

/* 电影暗角 */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 46%, transparent 50%, rgba(6,3,7,.6) 100%)}
#flash{position:fixed;inset:0;pointer-events:none;background:#ffdcb4;opacity:0;z-index:9}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .7s}
#hud.on{opacity:1}
#scorePanel{position:absolute;top:22px;left:24px}
#scorePanel .lbl{font-size:11px;letter-spacing:.4em;color:#c9a98c;margin-bottom:2px}
#score{font-size:34px;font-weight:900;color:#f7ecdc;text-shadow:0 2px 18px rgba(255,120,40,.35);line-height:1.1}
#scorePanel .sub{font-size:11px;color:#b99d84;margin-top:4px;letter-spacing:.12em}
#scorePanel .sub b{color:#ffd9a8;font-weight:700}
#comboWrap{margin-top:10px;display:none}
#comboWrap.on{display:block}
#comboNum{font-size:20px;font-weight:900;color:var(--ember)}
#comboWrap .cl{font-size:11px;color:#c9a98c;letter-spacing:.3em;margin-left:6px}
#comboBar{width:120px;height:3px;background:rgba(255,255,255,.12);margin-top:5px}
#comboBar i{display:block;height:100%;background:var(--ember);transform-origin:left;transform:scaleX(1)}
#timeWrap{position:absolute;top:20px;left:50%;transform:translateX(-50%);text-align:center;width:min(420px,56vw)}
#timeNum{font-size:22px;font-weight:700;color:#f2e5d2}
#timeBar{height:4px;background:rgba(255,255,255,.13);margin-top:6px}
#timeBar i{display:block;height:100%;background:var(--amber);transform-origin:left}
#statPanel{position:absolute;top:24px;right:24px;font-size:11px;color:#b99d84;letter-spacing:.14em;text-align:right;line-height:1.8}
#tip{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.2em;
  color:#e8cfae;background:rgba(14,9,8,.6);border:1px solid rgba(255,150,80,.25);padding:10px 22px;
  transition:opacity 1s;white-space:nowrap}
#tip.hide{opacity:0}
#toast{position:absolute;top:86px;left:50%;transform:translate(-50%,-8px);font-size:14px;letter-spacing:.24em;
  color:#ffd9a8;opacity:0;transition:all .4s}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* 浮动加分 */
.floater{position:fixed;transform:translate(-50%,-50%);font-weight:700;font-size:16px;color:#ffd9a8;
  text-shadow:0 2px 16px rgba(255,110,30,.6);pointer-events:none;z-index:6;animation:floatUp .95s ease-out forwards}
.floater.big{font-size:26px;color:#ffe9cf}
.floater .cx{color:var(--ember);font-size:.85em;margin-left:4px}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}
 12%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}
 100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}

/* 虚拟摇杆 */
#stick{position:fixed;width:112px;height:112px;border:1px solid rgba(255,170,100,.35);border-radius:50%;
  background:rgba(20,12,10,.25);display:none;z-index:7;pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;
  background:rgba(255,150,80,.5);transform:translate(-50%,-50%)}

/* ---------- 面板 ---------- */
.panel{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  background:rgba(8,5,8,.35);transition:opacity .5s}
.panel.off{opacity:0;pointer-events:none}
.card{width:min(92vw,520px);padding:44px 44px 38px;background:rgba(13,9,10,.82);
  border:1px solid rgba(255,150,80,.3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.eyebrow{font-size:10px;letter-spacing:.52em;color:#c98f5f;margin-bottom:14px}
.title{font-size:clamp(42px,9vw,64px);font-weight:900;letter-spacing:.1em;color:#f6ebda;line-height:1.15}
.rule{width:46px;height:3px;background:var(--ember);margin:18px 0 20px}
.desc{font-size:13px;line-height:2.1;color:#cbb39a;letter-spacing:.08em}
.desc em{font-style:normal;color:#ffd9a8}
.btn{display:block;width:100%;margin-top:28px;padding:16px 0 15px;border:none;cursor:pointer;
  background:var(--ember);color:#180d06;font-family:inherit;font-size:15px;font-weight:900;
  letter-spacing:.55em;text-indent:.55em;transition:background .2s,transform .1s}
.btn:hover{background:#ffab68}
.btn:active{transform:scale(.98)}
.best{margin-top:16px;font-size:11px;color:#8f7a68;letter-spacing:.2em;text-align:center}
#finalScore{font-size:52px;font-weight:900;color:#ffd9a8;margin:6px 0 4px}
#newBest{font-size:11px;letter-spacing:.3em;color:var(--ember);height:16px;margin-bottom:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-top:14px}
.grid2 .g{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,170,100,.18);
  padding-bottom:6px;font-size:13px}
.grid2 .g span{color:#b3947a}
.grid2 .g b{color:#f0e2cd;font-weight:700}
@media (max-width:600px){
  #score{font-size:26px} .car.........完整代码请登录后点击上方下载按钮下载查看