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

代码语言：html
所属分类：其他
代码由mimo-2.6 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,viewport-fit=cover,user-scalable=no">
<title>EVENT HORIZON // 引力坍缩</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --void:#080B09; --panel:#121713; --ink:#E8EEE8; --muted:#9AA6A0;
  --orange:#FF6A2A; --glow:#FFB27A; --green:#B8E986; --yellow:#F1C85B;
  --line:rgba(255,255,255,.55); --line-dim:rgba(255,255,255,.22); --sel:rgba(255,106,42,.14);
  --display:'Oswald','Arial Narrow','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --body:'Inter',system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --inset:24px;
}
html,body{height:100%;width:100%;background:var(--void);color:var(--ink);font-family:var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font-family:var(--display);letter-spacing:.14em;color:var(--ink);background:rgba(8,11,9,.82);border:1px solid var(--line);border-radius:0;cursor:pointer;min-height:44px;padding:0 14px;font-size:11px;font-weight:600;text-transform:uppercase}
button:hover{background:var(--sel);border-color:var(--orange);color:var(--orange)}
button:active{transform:translateY(1px)}
.brk{
  background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
  linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
  linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
  linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));
  background-repeat:no-repeat;
  background-size:12px 1px,1px 12px,12px 1px,1px 12px,12px 1px,1px 12px,12px 1px,1px 12px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
}
.brk.dim{--line:var(--line-dim)}
.panel{background:rgba(8,11,9,.8);padding:12px}
.cap{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px}
.trow span{font-family:var(--display);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.trow b{font-family:var(--mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.trow b.hot{color:var(--orange)}
.trow i{font-family:var(--mono);font-size:10px;color:var(--muted);font-style:normal;margin-left:4px}

#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hudCanvas{position:absolute;inset:0;width:100%;height:100%}
#brand{position:absolute;left:var(--inset);top:12px;display:flex;align-items:baseline;gap:10px}
#brand .wm{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.18em;color:var(--orange);line-height:1;text-shadow:0 1px 6px rgba(0,0,0,.55)}
#brand .sub{font-family:var(--display);font-size:11px;letter-spacing:.24em;color:var(--muted)}
#objPanel{position:absolute;left:var(--inset);top:56px;width:284px}
#objPanel .obj{font-family:var(--display);font-size:17px;letter-spacing:.05em;margin-top:8px}
#objPanel .obj2{font-family:var(--body);font-size:13px;color:var(--muted);margin-top:4px}
#objPanel hr{border:0;border-top:1px solid var(--line-dim);margin:12px 0 0}
#progBar{height:6px;background:rgba(255,255,255,.14);margin-top:10px;position:relative;overflow:hidden}
#progBar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--orange);transition:width .25s linear}

#tapeWrap{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:6px 8px;background:rgba(8,11,9,.66)}
#tape{display:block;width:440px;height:30px}
#tapeTag{position:absolute;left:10px;top:-2px;font-family:var(--display);font-size:9px;letter-spacing:.18em;color:var(--muted)}

#timerBox{position:absolute;right:var(--inset);top:12px;padding:8px 14px;text-align:right}
#timer{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:500;line-height:1;display:block;margin-top:4px}
#topBtns{position:absolute;right:var(--inset);top:74px;display:flex;gap:8px;pointer-events:auto}
#topBtns button{min-width:76px}
#topBtns button b{color:var(--orange);font-family:var(--mono);letter-spacing:0;margin-left:4px}

#statPanel{position:absolute;left:var(--inset);bottom:var(--inset);width:284px}
#radBig{font-family:var(--mono);font-size:44px;font-weight:500;line-height:.95;font-variant-numeric:tabular-nums;margin-top:6px}
#radBig i{font-size:14px;color:var(--muted);font-style:normal;margin-left:4px}
#growBar{height:6px;background:rgba(255,255,255,.14);margin-top:10px;position:relative;overflow:hidden}
#growBar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--green);transition:width .2s linear}

#warPanel{position:absolute;right:var(--inset);bottom:var(--inset);width:268px;pointer-events:auto}
#mapWrap{margin-top:8px;padding:4px;background:rgba(255,255,255,.07);position:relative}
#map{display:block;width:100%;height:auto}
#comboBar{height:5px;background:rgba(255,255,255,.14);margin-top:8px;position:relative;overflow:hidden}
#comboBar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--orange)}
#warns{margin-top:10px;min-height:32px}
.warn{font-family:var(--display);font-size:11px;letter-spacing:.14em;color:var(--orange);margin-top:4px}
.warn::before{content:"▲ "}
.warn.ok{color:var(--muted)}
.warn.ok::before{content:"■ ";font-size:8px}
#pulseBtn{width:100%;margin-top:12px;border-color:var(--orange);color:var(--orange);height:50px;font-size:12px;position:relative;overflow:hidden}
#pulseBtn[disabled]{border-color:var(--line);color:var(--muted);cursor:default}
#pulseBtn u{position:absolute;left:0;bottom:0;height:3px;background:var(--orange);width:0}

#centerMsg{position:absolute;left:50%;top:33%;transform:translateX(-50%);text-align:center;opacity:0}
#centerMsg .big{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:.22em;color:var(--orange);border-top:1px solid var(--orange);border-bottom:1px solid var(--orange);padding:6px 18px;background:rgba(8,11,9,.7);animation:brkpop .26s cubic-bezier(.2,.9,.2,1)}
#centerMsg .sml{font-family:var(--display);font-size:12px;letter-spacing:.18em;margin-top:6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 14px;background:rgba(8,11,9,.7)}
@keyframes brkpop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
#flash{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,rgba(255,106,42,0) 46%,rgba(255,106,42,.7) 100%)}
#flash.hit{animation:hflash .32s linear}
@keyframes hflash{0%{opacity:.9}100%{opacity:0}}
#hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:var(--display);font-size:11px;letter-spacing:.14em;color:var(--muted);text-align:center;transition:opacity .6s;white-space:nowrap;background:rgba(8,11,9,.7);padding:5px 12px}
#hint span{color:var(--ink)}

.ov{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(8.........完整代码请登录后点击上方下载按钮下载查看