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">
<title>猎地行动 · 武装直升机突袭</title>
<style>
:root{
  --amber:#ffb42e; --amber2:#ffd67a; --red:#ff3b30; --grn:#9acd5a;
  --panel:rgba(18,24,12,.82); --line:#7c8b4d;
  --disp:"Arial Black","Microsoft YaHei",sans-serif;
  --mono:Consolas,"Courier New",monospace;
  --body:"Microsoft YaHei","PingFang SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0f08;font-family:var(--body);user-select:none}
canvas#c{position:fixed;inset:0;display:block}
body.playing{cursor:none}
#scan{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.16;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 1px,transparent 1px 3px)}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;display:none;color:var(--amber2)}
body.playing #hud,body.over #hud{display:block}
.panel{background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  padding:10px 14px}
.lbl{font-size:11px;letter-spacing:3px;color:#9aa86b}
.val{font-family:var(--mono);font-weight:bold}
#tl{position:absolute;top:16px;left:16px;min-width:250px}
#hpBar{height:14px;background:#1a2110;border:1px solid var(--line);margin:5px 0 8px}
#hpFill{height:100%;width:100%;background:linear-gradient(90deg,#7fae3f,#a8d05a);transition:width .15s}
#hpFill.mid{background:linear-gradient(90deg,#c9972a,#ffb42e)}
#hpFill.low{background:linear-gradient(90deg,#b02418,#ff5a3c);animation:blink .5s infinite alternate}
.row{display:flex;justify-content:space-between;font-size:13px;margin-top:3px}
#tr{position:absolute;top:16px;right:16px;text-align:right;min-width:190px}
#score{font-size:26px;font-family:var(--mono);color:var(--amber);text-shadow:0 0 12px rgba(255,180,46,.5)}
#bl{position:absolute;bottom:16px;left:16px;font-family:var(--mono);font-size:13px;line-height:1.7}
#hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:1px;color:rgba(255,214,122,.75);background:rgba(10,14,6,.5);
  padding:5px 16px;border:1px solid rgba(124,139,77,.4)}
#radar{position:absolute;bottom:16px;right:16px;width:158px;height:158px;
  border-radius:50%;border:2px solid var(--line);background:rgba(8,14,6,.7);
  box-shadow:0 0 18px rgba(0,0,0,.6),inset 0 0 30px rgba(20,40,10,.8)}
/* 警告 */
#warn{position:absolute;top:13%;left:50%;transform:translateX(-50%);
  font-family:var(--disp);font-size:26px;letter-spacing:6px;color:var(--red);
  text-shadow:0 0 18px rgba(255,59,48,.8);display:none;text-align:center;white-space:nowrap}
#warn.on{display:block;animation:blink .35s infinite alternate}
#warn small{display:block;font-family:var(--body);font-size:13px;letter-spacing:3px;color:var(--amber2);margin-top:4px}
@keyframes blink{from{opacity:1}to{opacity:.35}}
#banner{position:absolute;top:26%;left:50%;transform:translateX(-50%);text-align:center;
  font-family:var(--disp);pointer-events:none;opacity:0;white-space:nowrap}
#banner.show{animation:ban 2.8s ease forwards}
#banner .b1{font-size:44px;letter-spacing:12px;color:var(--amber);text-shadow:0 0 24px rgba(255,180,46,.6)}
#banner .b2{font-size:14px;letter-spacing:5px;color:#cfd8a8;margin-top:8px}
@keyframes ban{0%{opacity:0;transform:translateX(-50%) translateY(24px)}12%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0}}
/* 准星 */
#cross{position:fixed;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:12;pointer-events:none;display:none}
body.playing #cross{display:block}
#cross .ring{position:absolute;inset:0;border:1.5px solid rgba(255,214,122,.9);border-radius:50%}
#cross .dot{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:var(--amber2)}
#cross i{position:absolute;background:rgba(255,214,122,.9)}
#cross i:nth-child(3){left:50%;top:-9px;width:2px;height:9px;margin-left:-1px}
#cross i:nth-child(4){left:50%;bottom:-9px;width:2px;height:9px;margin-left:-1px}
#cross i:nth-child(5){top:50%;left:-9px;height:2px;width:9px;margin-top:-1px}
#cross i:nth-child(6){top:50%;right:-9px;height:2px;width:9px;margin-top:-1px}
#cross.hot .ring{border-color:var(--red);box-shadow:0 0 10px rgba(255,59,48,.8)}
#cross.hot .dot{background:var(--red)}
#cross.hot{transform:scale(1.25)}
#vign{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(150,12,0,.62) 100%)}
#pops{position:fixed;inset:0;pointer-events:none;z-index:11}
.pop{position:absolute;font-family:var(--mono);font-weight:bold;font-size:16px;
  color:var(--amber);text-shadow:0 0 8px rgba(0,0,0,.8);transform:translate(-50%,-50%);white-space:nowrap}
/* ---------- 菜单 / 结算 ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:none}
.overlay.show{display:flex;align-items:center}
#menu{background:linear-gradient(100deg,rgba(6,9,4,.94) 0%,rgba(6,9,4,.86) 42%,rgba(6,9,4,.25) 72%,transparent 100%);cursor:default}
.card{margin-left:7vw;max-width:560px;padding:42px 48px 38px;background:rgba(14,19,9,.68);
  border-left:4px solid var(--amber);position:relative}
.card .tag{font-size:11px;letter-spacing:6px;color:#9aa86b;margin-bottom:10px}
h1{font-family:var(--disp);font-size:76px;line-height:1.02;letter-spacing:10px;color:#e9efd4;
  text-shadow:4px 4px 0 rgba(255,180,46,.35),0 0 34px rgba(255,180,46,.18)}
h1 span{display:block;font-size:20px;letter-spacing:14px;color:var(--amber);margin-top:6px}
.brief{margin:22px 0 18px;font-size:14px;line-height:1.9;color:#c9d3a6;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:14px 0}
.brief b{col.........完整代码请登录后点击上方下载按钮下载查看