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

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

代码语言：html

所属分类：其他

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

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>黑洞吞噬城市 · 限时挑战</title>
<style>
  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;height:100%;overflow:hidden;
    background:#05070d;color:#dfe7ff;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    user-select:none;-webkit-user-select:none;touch-action:none;
  }
  canvas{display:block;}

  /* ---------- 左上状态 ---------- */
  #hud{
    position:fixed;top:16px;left:16px;z-index:10;
    display:flex;flex-direction:column;gap:8px;
    pointer-events:none;
  }
  .stat{
    display:flex;align-items:center;gap:10px;
    padding:8px 15px;
    background:rgba(12,16,28,.66);
    border:1px solid rgba(120,160,255,.22);
    border-radius:11px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    font-size:13px;letter-spacing:.5px;
    box-shadow:0 4px 22px rgba(0,0,0,.5);
  }
  .stat span{color:#8fa3c8;font-size:12px;}
  .stat b{
    font-size:16px;font-weight:700;color:#ffb066;
    font-variant-numeric:tabular-nums;min-width:44px;text-align:right;
    text-shadow:0 0 12px rgba(255,150,60,.7);
  }

  /* ---------- 顶部计时 + 进度 ---------- */
  #topbar{
    position:fixed;top:16px;left:50%;transform:translateX(-50%);
    z-index:10;display:flex;flex-direction:column;align-items:center;gap:7px;
    pointer-events:none;
  }
  #timer{
    font-size:34px;font-weight:800;letter-spacing:3px;
    font-variant-numeric:tabular-nums;
    color:#e8f0ff;
    text-shadow:0 0 22px rgba(120,180,255,.55);
    transition:color .25s, text-shadow .25s;
    line-height:1;
  }
  #timer.warn{
    color:#ff5a6e;
    text-shadow:0 0 26px rgba(255,60,90,.9);
    animation:pulse .85s infinite;
  }
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}
  #progressWrap{
    width:210px;height:6px;border-radius:999px;
    background:rgba(255,255,255,.10);
    overflow:hidden;
    border:1px solid rgba(120,160,255,.16);
  }
  #progressFill{
    height:100%;width:0%;border-radius:999px;
    background:linear-gradient(90deg,#ff9a3c,#ff4fa3,#8a5cff);
    transition:width .18s linear;
    box-shadow:0 0 14px rgba(255,120,60,.65);
  }
  #goalText{
    font-size:11px;color:#7b8cab;letter-spacing:1.4px;
  }

  /* ---------- 右上标题 ---------- */
  #title{
    position:fixed;top:16px;right:16px;z-index:10;text-align:right;
    pointer-events:none;
  }
  #title h1{
    margin:0;font-size:15px;font-weight:800;letter-spacing:3px;
    background:linear-gradient(90deg,#ff9a3c,#ff4fa3,#8a5cff);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  #title p{margin:5px 0 0;font-size:10.5px;color:#6d7d9c;letter-spacing:1.2px;}

  /* ---------- 底部提示 ---------- */
  #hint{
    position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:10;
    padding:9px 20px;border-radius:999px;
    background:rgba(12,16,28,.66);
    border:1px solid rgba(120,160,255,.22);
    font-size:12px;color:.........完整代码请登录后点击上方下载按钮下载查看