three做个三维塔克大战游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由qwen-3.8-max 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>钢铁丛林 · 树林坦克大战</title>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#e9e6d6; --dim:#9aa08a; --amber:#f0a53c; --amber2:#ffc97a;
  --red:#e04a38; --green:#9dbb56; --panel:rgba(13,18,9,.8); --line:#5d6c3d;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0c110a;color:var(--ink);
  font-family:'Rajdhani','Microsoft YaHei',sans-serif;user-select:none}
body.playing{cursor:none}
.disp{font-family:'ZCOOL QingKe HuangYou','Microsoft YaHei',sans-serif;font-weight:400}
.hidden{display:none!important}
.cut{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;transition:opacity .5s}
#topbar{position:absolute;top:18px;left:18px;display:flex;gap:26px;padding:10px 22px;
  background:var(--panel);border:1px solid var(--line)}
.stat{display:flex;flex-direction:column;align-items:center;min-width:64px}
.stat .lbl{font-size:11px;letter-spacing:.4em;color:var(--dim)}
.stat b{font-size:30px;line-height:1.1;color:var(--amber2)}
#status{position:absolute;left:18px;bottom:20px;padding:14px 20px;background:var(--panel);border:1px solid var(--line)}
#status .row{display:flex;align-items:center;gap:10px;margin:5px 0}
#status .lbl{font-size:12px;letter-spacing:.35em;color:var(--dim);width:38px}
.bar{width:200px;height:11px;background:#161d10;border:1px solid var(--line);position:relative}
.bar i{display:block;height:100%;transition:width .12s}
#hpFill{background:linear-gradient(90deg,#6f9c3a,#a8cf5e);width:100%}
#hpFill.low{background:linear-gradient(90deg,#b33a28,#ff7a54);animation:pulse .6s infinite alternate}
@keyframes pulse{to{filter:brightness(1.6)}}
#rlFill{background:linear-gradient(90deg,#8a6420,#f0a53c);width:100%}
#status b{font-size:14px;width:44px;text-align:right;color:var(--amber2)}
#mapWrap{position:absolute;right:18px;bottom:20px;padding:10px 10px 4px;background:var(--panel);border:1px solid var(--line)}
#minimap{display:block;background:#0b110a}
.mapLbl{text-align:center;font-size:11px;letter-spacing:.5em;color:var(--dim);padding:5px 0 3px}

/* ---------- 准星 ---------- */
#ch{position:fixed;left:0;top:0;z-index:30;pointer-events:none}
#ch .ring{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border:1.5px solid rgba(233,230,214,.9);
  border-radius:50%;transition:transform .1s,border-color .1s}
#ch .dot{position:absolute;left:-2px;top:-2px;width:4px;height:4px;background:var(--amber);border-radius:50%}
#ch .tick{position:absolute;background:rgba(233,230,214,.85)}
#ch .t1{left:-1px;top:-27px;width:2px;height:8px}
#ch .t2{left:-1px;top:19px;width:2px;height:8px}
#ch .t3{left:-27px;top:-1px;width:8px;height:2px}
#ch .t4{left:19px;top:-1px;width:8px;height:2px}
#ch.hot .ring{border-color:var(--red);transform:scale(1.28)}
#ch.hot .dot,#ch.hot .tick{background:var(--red)}
#hitmark{position:fixed;z-index:31;width:22px;height:22px;pointer-events:none;opacity:0}
#hitmark::before,#hitmark::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:22px;background:var(--amber2)}
#hitmark::before{transform:translate(-50%,-50%) rotate(45deg)}
#hitmark::after{transform:translate(-50%,-50%) rotate(-45deg)}
#hitmark.on{animation:hm .22s ease-out}
@keyframes hm{0%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(.6)}}

/* ---------- 特效层 ---------- */
#vig{position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 56%,rgba(6,10,4,.55) 100%)}
#damage{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(190,32,18,.6) 100%)}
#popups{position:fixed;inset:0;z-index:25;pointer-events:none}
.pop{position:absolute;transform:translate(-50%,0);font-family:'ZCOOL QingKe HuangYou';font-size:24px;
  color:var(--amber2);text-shadow:0 2px 6px rgba(0,0,0,.7);animation:popUp .95s ease-out forwards;white-space:nowrap}
.pop.red{color:#ff8a70}
@keyframes popUp{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-52px)}}
#banner{position:fixed;top:16%;left:50%;transform:translateX(-50%);text-align:center;z-index:20;
  pointer-events:none;opacity:0;white-space:nowrap}
#banner b{display:block;position:relative;font-size:56px;letter-spacing:.3em;color:var(--ink);
  text-shadow:0 3px 16px rgba(0,0,0,.7)}
#banner b::before,#banner b::after{content:'';position:absolute;top:50%;width:130px;height:2px}
#banner b::before{right:calc(100% + 26px);background:linear-gradient(90deg,transparent,var(--amber))}
#banner b::after{left:calc(100% + 26px);background:linear-gradient(90deg,var(--amber),transparent)}
#banner span{display:block;margin-top:8px;font-size:15px;letter-spacing:.6em;color:var(--amber)}
#banner.show{animation:bn 2.6s ease forwards}
@keyframes bn{0%{opacity:0;transform:translateX(-50%) translateY(16px)}12%{opacity:1;transform:translateX(-50%)}
  78%{opacity:1}100%{opacity:0;transform:translateX(-50%)}}

/* ---------- 开始 / 结束 / 暂停 ---------- */
#startScreen,#overScreen{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1100.........完整代码请登录后点击上方下载按钮下载查看