three实现三维坦克人机大战游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维坦克人机大战游戏代码

下面为部分代码预览，完整代码请点击下载或在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>钢铁洪流 · 坦克大战 3D</title>
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --khaki:#c9bd92; --amber:#e8a33d; --red:#d0492f; --green:#9fdc6a;
  --panel:rgba(22,26,15,.82); --line:#8a9060; --ink:#e6e2cd;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0d100a;user-select:none;
  font-family:'Rajdhani','Microsoft YaHei','PingFang SC',sans-serif;color:var(--ink)}
canvas{display:block;cursor:crosshair}
.hidden{display:none!important}

/* ---------- HUD ---------- */
#ui{position:fixed;inset:0;pointer-events:none;z-index:10}
body:not(.in-game) #ui{display:none}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(8,10,5,.55) 100%)}
#damageFlash{position:fixed;inset:0;pointer-events:none;z-index:11;opacity:0;transition:opacity .7s;
  box-shadow:inset 0 0 140px 60px rgba(200,40,20,.75)}
#damageFlash.on{opacity:1;transition:none}
#lowHp{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;
  box-shadow:inset 0 0 90px 24px rgba(200,40,20,.5)}
#lowHp.on{animation:lowPulse 1s ease-in-out infinite}
@keyframes lowPulse{0%,100%{opacity:.15}50%{opacity:.75}}

.panel{background:var(--panel);border:1px solid var(--line);padding:10px 16px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.label{font-size:11px;letter-spacing:.28em;color:#a8a884;text-transform:uppercase}
.big{font-family:'Black Ops One','Microsoft YaHei',sans-serif;font-size:26px;color:var(--ink);line-height:1}

#topbar{position:fixed;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start}
#topbar .panel{display:flex;gap:14px;align-items:baseline}
#scorePanel{flex-direction:row-reverse}
#scorePanel .big{color:var(--amber)}

#feed{position:fixed;right:16px;top:78px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.feedItem{font-weight:600;font-size:15px;letter-spacing:.05em;color:#cfd6b8;background:rgba(20,24,14,.75);
  border-right:3px solid var(--amber);padding:4px 12px;animation:feedIn .25s ease-out,feedOut .4s ease-in 2.8s forwards}
.feedItem.good{border-color:var(--green);color:#cfe8b0}
@keyframes feedIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes feedOut{to{transform:translateX(30px);opacity:0}}

#banner{position:fixed;top:20%;left:50%;transform:translate(-50%,-8px);text-align:center;
  opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
#banner.show{opacity:1;transform:translate(-50%,0)}
.b-main{font-family:'Black Ops One','Microsoft YaHei',sans-serif;font-size:clamp(38px,6vw,64px);
  letter-spacing:.15em;color:#efe9d2;text-shadow:0 3px 0 rgba(0,0,0,.7),0 0 30px rgba(232,163,61,.35)}
.b-sub{font-size:17px;letter-spacing:.5em;color:var(--amber);margin-top:4px}
.b-line{height:2px;background:linear-gradient(90deg,transparent,var(--amber),transparent);margin:8px auto;width:70%}

#bottombar{position:fixed;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:flex-end}
#hpBar{width:270px;height:15px;background:#10140a;border:1px solid #565c3c;margin:5px 0 2px;position:relative}
#hpFill{height:100%;width:100%;background:linear-gradient(90deg,#6f9a3f,#9ec25f);transition:width .25s}
#hpBar::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 25px,rgba(0,0,0,.4) 25px 27px)}
#hpRow{display:flex;justify-content:space-between;align-items:baseline}
#hpText{font-family:'Black Ops One',sans-serif;font-size:20px}
#reloadBar{width:270px;height:7px;background:#10140a;border:1px solid #565c3c;margin-top:4px}
#reloadFill{height:100%;width:100%;background:var(--amber)}
#reloadLabel{font-size:12px;letter-spacing:.3em;color:#a8a884}
#minimapWrap{padding:8px;position:relative}
#minimap{display:block;image-rendering:pixelated}
#compass{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;color:#a8a884}

#crosshair{position:fixed;left:50%;top:50%;width:0;height:0;z-index:12}
.ch-tick{position:absolute;background:#dfe6c0;box-shadow:0 0 4px rgba(0,0,0,.9);transition:opacity .15s}
.ch-t1{width:2px;height:11px;left:-1px;top:-20px}.ch-t2{width:2px;height:11px;left:-1px;top:9px}
.ch-t3{width:11px;height:2px;left:-20px;top:-1px}.ch-t4{width:11px;height:2px;left:9px;top:-1px}
#chDot{position:absolute;width:4px;height:4px;left:-2px;top:-2px;border-radius:50%;background:#ffd27a}
#crosshair.reload .ch-tick{opacity:.3}
#hitmarker{position:absolute;opacity:0}
#hitmarker span{position:absolute;width:2px;height:9px;background:#ff6a4a}
#hitmarker span:nth-child(1){transform:translate(-6px,-12px) rotate(45deg)}
#hitmarker span:nth-child(2){transform:translate(4px,-12px) rotate(-45deg)}
#hitmarker span:nth-child(3){transform:translate(-6px,3px) rotate(-45deg)}
#hitmarker span:nth-child(4){transform:translate(4px,3px) rotate(45deg)}
#hitmarker.show{animation:hm .2s ease-out}
@keyframes hm{0%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}

/* ---------- 菜单 / 结算 ---------- */
#menu,#gameover,#pauseOv{position:fixed;inset:0;z-index:20}
#menu{background:linear-gradient(100deg,rgba(9,12,6,.95) 0%,rgba(9,12,6,.85) 32%,rgba(9,12,6,.3) 66%,rgba(9,12,6,.06));
  animation:menuIn .8s ease-out}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
.menu-inner{position:absolute;left:6vw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;max-width:660px}
.overline{font-size:13px;letter-spacing:.42em;color:var(--amber);border-left:3px solid var(--amber);padding-left:12px;margin-bottom:18px}
.overline::after{content:'▌';animation:blink 1.1s steps(1) infinite;margin-left:6px}
@keyframes blink{50%{opacity:0}}
h1{font-family:'Black Ops One','Microsoft YaHei',sans-serif;font-weight:400;
  font-size:clamp(52px,8vw,96px);line-height:.95;color:#e4e6cf;text-shadow:0 5px 0 rgba(0,0,0,.55)}
h1 .en{display:block;font-size:.3em;letter-spacing:.5em;color:var(--amber);margin-top:10px}
.brief{margin:22px 0 26px;font-size:17px;font-weight:500;color:#c9c6.........完整代码请登录后点击上方下载按钮下载查看