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

代码语言：html
所属分类：其他
代码由glm-5.3-flash ai生成，可能有错误，仅供参考：点击查看提示词
代码描述：三维塔克大战游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>丛林铁蹄 · 3D 坦克遭遇战</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Rajdhani:wght@500;700&display=swap" rel="stylesheet">
<style>
  :root{ --gold:#d9b96a; --amber:#e8c877; --paper:#cfd6c0; --red:#e14b33; --ink:rgba(9,12,7,.72); }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ width:100%; height:100%; overflow:hidden; background:#0b0e09; }
  body{ font-family:'Rajdhani','ZCOOL QingKe HuangYou',sans-serif; color:var(--paper); }
  body.playing{ cursor:none; }
  canvas#game{ position:fixed; inset:0; display:block; }

  /* ---------- 通用面板 ---------- */
  .panel{ position:relative; background:linear-gradient(160deg, var(--ink), rgba(9,12,7,.5));
    border:1px solid rgba(217,185,106,.28);
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
    padding:10px 16px; backdrop-filter:blur(2px); }
  .tag{ font-size:11px; letter-spacing:3px; color:var(--gold); opacity:.85; }

  /* ---------- 屏幕质感 ---------- */
  #vig{ position:fixed; inset:0; pointer-events:none; z-index:3;
    background:radial-gradient(ellipse at center, transparent 58%, rgba(5,8,4,.5) 100%); }
  #scan{ position:fixed; inset:0; pointer-events:none; z-index:3; opacity:.10;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px); }
  #dmg{ position:fixed; inset:0; pointer-events:none; z-index:4; opacity:0;
    background:radial-gradient(ellipse at center, transparent 42%, rgba(190,26,10,.62) 100%); }

  /* ---------- HUD ---------- */
  #hud{ position:fixed; inset:0; pointer-events:none; z-index:5; display:none; }
  #topL{ position:absolute; top:18px; left:18px; display:flex; gap:26px; }
  #topL .cell b{ display:block; font-size:26px; color:var(--amber); line-height:1; font-weight:700; }
  #topL .cell span{ font-size:11px; letter-spacing:3px; color:var(--gold); opacity:.8; }

  #mapWrap{ position:absolute; top:18px; right:18px; padding:8px; }
  #mm{ display:block; image-rendering:pixelated; }
  #mapWrap .tag{ display:block; margin-top:6px; text-align:center; }

  /* 血条 */
  #bl{ position:absolute; left:22px; bottom:22px; width:280px; }
  #bl .row{ display:flex; justify-content:space-between; align-items:baseline; }
  #hpNum{ font-size:22px; font-weight:700; color:var(--amber); }
  #hpBar{ margin-top:5px; height:13px; border:1px solid rgba(217,185,106,.4); padding:2px; }
  #hpFill{ height:100%; width:100%; transition:width .18s;
    background:repeating-linear-gradient(90deg,#8fb35a 0 14px,#7aa04c 14px 16px); }
  #hpFill.low{ background:repeating-linear-gradient(90deg,#d9603a 0 14px,#c24e2c 14px 16px); }
  #hpFill.mid{ background:repeating-linear-gradient(90deg,#d9b34a 0 14px,#c2a03c 14px 16px); }

  /* 准星 */
  #ch{ position:absolute; left:50%; top:50%; width:0; height:0; }
  .chl{ position:absolute; background:rgba(232,200,119,.92); box-shadow:0 0 3px rgba(0,0,0,.8); }
  .chl.v{ width:2px; height:11px; left:-1px; } .chl.h{ height:2px; width:11px; top:-1px; }
  .chl.t{ top:-19px; } .chl.b{ top:8px; } .chl.l{ left:-19px; } .chl.r{ left:8px; }
  .chd{ position:absolute; width:3px; height:3px; left:-1.5px; top:-1.5px; background:var(--amber); border-radius:50%; }
  #ring{ position:absolute; left:-23px; top:-23px; width:46px; height:46px; border-radius:50%;
    background:conic-gradient(rgba(232,200,119,.95) calc(var(--p)*1%), rgba(30,34,24,.35) 0);
    -webkit-mask:radial-gradient(circle, transparent 60%, #000 62%);
    mask:radial-gradient(circle, transparent 60%, #000 62%); }
  #rdy{ position:absolute; top:34px; left:50%; transform:translateX(-50%); font-size:12px; letter-spacing:3px; white-space:nowrap; }
  #rdy.ok{ color:#9fd06a; } #rdy.load{ color:var(--gold); }

  /* 锁定框 */
  #lockbox{ position:absolute; left:0; top:0; display:none; pointer-events:none; z-index:6; }
  #lockbox i{ position:absolute; width:13px; height:13px; border:2px solid #ff6a4a;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
  #lockbox i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; }
  #lockbox i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; }
  #lockbox i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; }
  #lockbox i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; }
  #lockbox span{ position:absolute; left:50%; bottom:-20px; transform:translateX(-50%);
    font-size:11px; letter-spacing:3px; color:#ff8a6a; white-space:nowrap; text-shadow:0 1px 3px #000; }
  #lockbox.on i{ border-color:#a5e06a; }
  #lockbox.on span{ color:#cdefa0; }

  #hm{ position:absolute; left:50%; top:50%; width:0; height:0; opacity:0; }
  #hm i{ position:absolute; width:2px; height:10px; background:#ff5a3c; box-shadow:0 0 4px #000; }
  #hm i:nth-child(1){ transform:translate(-9px,-13px) rotate(-45deg); }
  #hm i:nth-child(2){ transform:translate(7px,-13px) rotate(45deg); }
  #hm i:nth-child(3){ transform:translate(-9px,3px) rotate(45deg); }
  #hm i:nth-child(4){ transform:translate(7px,3px) rotate(-45deg); }

  #killmsg{ position:absolute; left:50%; top:calc(50% + 66px); transform:translateX(-50%);
    font-size:17px; letter-spacing:6px; color:var(--amber); text-shadow:0 1px 4px #000; opacity:0; }
  #killmsg.show{ animation:km 1.4s ease forwards; }
  @keyframes km{ 0%{opacity:0; transform:translateX(-50%) translateY(6px);} 15%{opacity:1; transform:translateX(-50%);}
    75%{opacity:1;} 100%{opacity:0;} }

  /* 波次横幅 */
  #banner{ position:absolute; left:0; right:0; top:30%; text-align:center; opacity:0; pointer-events:none; }
  #bMain{ font-family:'ZCOOL QingKe HuangYou'; font-size:52px; letter-spacing:14px; color:var(--amber); text-shadow:0 2px 14px rgba(0,0,0,.85); }
  #bSub{ font-size:14px; letter-spacing:8px; color:var(--paper); opacity:.85; margin-top:4px; }
  #banner.show{ animation:bn 3.4s ease forwards; }
  @keyframes bn{ 0%{opacity:0; filter:blur(6px); transform:scale(1.06);} 12%{opacity:1; filter:blur(0); transform:scale(1);}
    78%{opacity:1;} 100%{opacity:0;} }

  #guide{ position:absolute; left:50%; bottom:78px; transform:translateX(-50%); display:flex; gap:14px; opacity:0; transition:opacity .6s; }
  #guide.show{ opacity:1; }
  #guide span{ font-size:12px; letter-spacing:2px; padding:5px 12px; border:1px solid rgba(217,185,106,.35); background:rgba(9,12,7,.6); color:var(--paper); }
  #guide b{ color:var(--amber); font-weight:700; }

  /* ---------- 菜单 / 结算 / 暂停 ---------- */
  .screen{ position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; flex-direction:column; }
  #menu{ background:linear-gradient(180deg, rgba(6,9,5,.35), rgba(6,9,5,.78)); }
  #menu h1{ font-family:'ZCOOL QingKe HuangYou'; font-size:84px; letter-spacing:20px; color:var(--amber);
    text-shadow:0 3px 22px rgba(0,0,0,.9); font-weight:400; }
  #menu .sub{ font-size:15px; letter-spacing:10px; color:var(--paper); opacity:.9; margin:6px 0 34px; }
  .btn{ pointer-events:auto; cursor:pointer; font-family:'Rajdhani'; font-size:20px; font-weight:700; letter-spacing:8px;
    color:var(--amber); background:rgba(9,12,7,.55); border:1px solid rgba(217,185,106,.55); padding:14px 52px 14px 60px;
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); transition:.18s; }
  .btn:hover{ background:var(--amber); color:#141708; }
  #menu .keys{ margin-top:34px; display:flex; gap:12px; }
  #menu .keys span{ font-size:12px; letter-spacing:2px; padding:6px 14px; border:1px solid rgba(217,185,106,.3); color:var(--paper); background:rgba(9,12,7,.5); }
  #menu .keys b{ color:var(--amber); }
  #menu .tip{ margin-top:22px; font-s.........完整代码请登录后点击上方下载按钮下载查看