three做个微观生态缸三维游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-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">
<title>微观生态缸 · Terrarium No.7</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{--ink:#e6e1d3;--dim:#9b968a;--acc:#a9c48a;--amb:#d9a441;--line:rgba(230,225,211,.15);--panel:rgba(11,13,10,.62)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#06070a;font-family:'Noto Serif SC',serif;color:var(--ink)}
canvas{display:block}
#ui{position:fixed;inset:0;pointer-events:none;z-index:10}
header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px}
.brand .no{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.35em;color:var(--dim)}
.brand h1{font-size:22px;font-weight:900;letter-spacing:.12em;margin:4px 0 3px}
.brand .sub{font-size:11.5px;color:var(--dim);letter-spacing:.15em}
.brand .sub b{color:var(--acc);font-weight:600}
.env{display:flex;flex-direction:column;gap:7px;background:var(--panel);border:1px solid var(--line);padding:12px 16px;backdrop-filter:blur(8px);pointer-events:auto}
.env .cap{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;color:var(--dim)}
.meter,.stat{display:flex;align-items:center;gap:8px;font-size:11px}
.meter label,.stat label{width:34px;color:var(--dim);letter-spacing:.1em}
.meter .bar{width:110px;height:3px;background:rgba(255,255,255,.08)}
.meter .bar i{display:block;height:100%;background:var(--acc);transition:width .4s}
.meter.mlight .bar i{background:var(--amb)}
.meter b,.stat b{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11px;width:26px;text-align:right}
#list{position:absolute;left:20px;bottom:96px;width:206px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(8px);pointer-events:auto;padding:10px 12px}
#list .cap{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.28em;color:var(--dim);margin-bottom:8px}
.row{display:flex;align-items:center;gap:6px;font-size:11px;padding:4px 0;border-top:1px dotted rgba(255,255,255,.07)}
.row .nm{flex:1;letter-spacing:.05em;white-space:nowrap}
.row .st{font-size:10px;color:var(--dim)}
.row .st.bloom{color:var(--amb)}
.row .st.wilt{color:#c4815a}
.row .bars{width:52px;display:flex;flex-direction:column;gap:2px}
.row .bars span{display:block;height:2px;background:rgba(255,255,255,.08);position:relative}
.row .bars i,.row .bars em{position:absolute;left:0;top:0;height:100%;display:block}
.row .bars i{background:var(--acc)}
.row .bars em{background:var(--amb);opacity:.8}
footer{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:auto}
.dock{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(8px);padding:8px}
.dock .sep{width:1px;background:var(--line);margin:2px 4px}
footer button{pointer-events:auto;background:none;border:1px solid transparent;color:var(--dim);width:52px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-family:inherit;font-size:10.5px;letter-spacing:.1em;transition:all .2s}
footer button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
footer button:hover{color:var(--ink)}
footer button.on{color:var(--acc);border-color:rgba(169,196,138,.5)}
footer button.warn.on{color:var(--amb);border-color:rgba(217,164,65,.5)}
#chips{display:flex;gap:6px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--dim);font-family:inherit;font-size:10.5px;letter-spacing:.08em;padding:5px 10px;cursor:pointer;backdrop-filter:blur(8px)}
.chip.on{color:var(--acc);border-color:rgba(169,196,138,.5)}
.chip.lock{opacity:.35;cursor:not-allowed}
#toast{position:absolute;top:70px;left:50%;transform:translate(-50%,-8px);background:var(--panel);border:1px solid var(--line);padding:8px 18px;font-size:12px;letter-spacing:.12em;opacity:0;transition:all .35s;backdrop-filter:blur(8px)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#tip{position:absolute;display:none;background:var(--panel);border:1px solid var(--line);padding:10px 13px;font-size:11px;line-height:1.8;backdrop-filter:blur(8px);max-width:210px;pointer-events:none;z-index:20}
#tip .t{color:var(--acc);font-weight:600;letter-spacing:.1em}
#tip .h{color:var(--amb)}
#tip .hint{color:var(--dim);font-size:10px}
#intro{position:fixed;inset:0;z-index:30;background:radial-gradient(ellipse at 50% 42%,rgba(14,18,14,.82),rgba(4,5,7,.97));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity .8s;gap:18px}
#intro.off{opacity:0;pointer-events:none}
#intro .no{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.5em;color:var(--dim)}
#intro h1{font-size:44px;font-weight:900;letter-spacing:.28em;margin-right:-.28em}
#intro .desc{font-size:13px;color:var(--dim);letter-spacing:.2em}
#intro ul{list-style:none;font-size:12px;color:var(--dim);line-height:2.1;letter-spacing:.1em}
#intro ul b{color:var(--acc);font-weight:600}
#intro button{margin-top:12px;background:none;border:1px solid rgba(169,196,138,.55);color:var(--acc);font-family:inherit;font-size:14px;letter-spacing:.4em;padding:12px 40px 12px 44px;cursor:pointer;transition:all .3s}
#intro button:hover{background:rgba(169,196,138,.12);letter-spacing:.5em}
@media(max-width:760px){#list{display:none}.env{transform:scale(.9);transform-origin:top right}}
</style>
</head>
<body>
<div id="ui">
  <header>
    <div class="brand">
      <div class="no">FIELD NOTES · No.7</div>
      <h1>微观生态缸</h1>
      <div class="sub"><b id="wxWord">晴空</b> · <span id="dayWord">清晨</span> · GLASS RAINFOREST</div>
    </div>
    <div class="env">
      <div class="cap">ENVIRONMENT · 缸内环境</div>
      <div class="meter"><label>湿度</label><div class="bar"><i id="mMoist"></i></div><b id="vMoist">55</b></div>
      <div class="meter mlight"><label>光照</label><div class="bar"><i id="mLight"></i></div><b id="vLight">70</b></div>
      <div class="stat"><label>孢子</label><b id="vSpore" style="width:auto">3</b></div>
      <div class="stat"><label>指数</label><b id="vIndex" style="width:auto">0.0</b></div>
    </div>
  </header>
  <aside id="list"><div class="cap">SPECIMENS · 培育个体</div><div id="rows"></div></aside>
  <footer>
    <div id="chips"></div>
    <div class="dock">
      <button data-wx="sunny" class="on"><svg viewBox="0 0 24 24">.........完整代码请登录后点击上方下载按钮下载查看