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>铁翼突袭 · DESERT HAMMER</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root{--grn:#8effb4;--grn-d:rgba(94,255,158,.55);--amb:#ffb347;--red:#ff4b3a;--panel:rgba(6,13,9,.88);--line:#2f6b45;}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:'Share Tech Mono','Courier New',monospace;color:var(--grn);user-select:none}
canvas{display:block}
.hidden{display:none!important}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;text-shadow:0 0 6px rgba(94,255,158,.5)}
#vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(255,30,10,.55));opacity:0}
#dmgF{position:absolute;inset:0;background:rgba(255,40,20,.35);opacity:0}
#boostFx{position:absolute;inset:0;opacity:0;transition:opacity .35s;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,0) 0deg 4deg,rgba(190,225,255,.06) 4deg 5deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 28%,#000 78%);mask:radial-gradient(circle at 50% 50%,transparent 28%,#000 78%)}
#boostFx.on{opacity:1}
#xhair{position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%)}
#xhair svg{width:100%;height:100%;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#lock{position:absolute;width:52px;height:52px;transform:translate(-50%,-50%);display:none;text-align:center}
#lock .dia{width:38px;height:38px;margin:0 auto;border:2px solid var(--amb);transform:rotate(45deg);box-shadow:0 0 12px rgba(255,179,71,.6),inset 0 0 12px rgba(255,179,71,.3);animation:lp .7s ease-in-out infinite}
@keyframes lp{50%{transform:rotate(45deg) scale(1.16)}}
#lockTxt{margin-top:6px;font-size:12px;color:var(--amb);white-space:nowrap;letter-spacing:1px}
#warn{position:absolute;top:16%;left:50%;transform:translateX(-50%);padding:8px 26px;border:1px solid var(--red);color:#ffd7d2;background:rgba(60,5,2,.72);font-size:17px;letter-spacing:4px;display:none}
#warn.on{display:block;animation:blink .45s steps(2) infinite}
#stall{position:absolute;top:calc(16% + 52px);left:50%;transform:translateX(-50%);color:var(--amb);font-size:13px;letter-spacing:3px;display:none}
@keyframes blink{50%{opacity:.15}}
.hudbox{position:absolute;font-size:13px;letter-spacing:1px}
#scoreBox{top:16px;left:18px}
#scoreBox .big{font-family:Orbitron;font-size:30px;font-weight:800;color:#eafff0}
#feed{top:78px;left:18px;width:280px}
#feed div{margin-bottom:5px;padding:4px 10px;border-left:3px solid var(--amb);background:rgba(8,16,10,.6);font-size:12.5px;animation:fin .3s ease-out}
#feed b{color:var(--amb);float:right}
@keyframes fin{from{transform:translateX(-16px);opacity:0}}
#radarBox{top:16px;right:18px;text-align:center}
#radar{border-radius:50%;box-shadow:0 0 0 1px var(--line),0 0 18px rgba(94,255,158,.15)}
#tgt{margin-top:8px;font-size:13px}
#tgt b{color:var(--amb);font-family:Orbitron}
#tape{top:14px;left:50%;transform:translateX(-50%);width:280px;height:46px;overflow:hidden;border:1px solid rgba(94,255,158,.3);background:rgba(4,12,7,.5);-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
#tapeIn{position:absolute;top:0;left:0;height:100%;width:1200px}
.tick{position:absolute;top:0;width:1px;height:100%}
.tick i{position:absolute;top:5px;left:0;width:1px;height:8px;background:var(--grn-d)}
.tick.major i{height:13px;background:var(--grn)}
.tick b{position:absolute;top:22px;left:0;transform:translateX(-50%);font:600 11px Orbitron;color:var(--grn)}
#tape::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);border:6px solid transparent;border-bottom:8px solid var(--amb)}
#hdgTxt{top:64px;left:50%;transform:translateX(-50%);font-family:Orbitron;font-size:13px;color:var(--grn)}
.gauge{position:absolute;bottom:60px;width:64px;text-align:center}
#gSpd{left:26px}#gAlt{right:26px}
.gauge .bar{width:10px;height:130px;margin:0 auto;border:1px solid var(--grn-d);position:relative;background:rgba(4,12,7,.5)}
.gauge .fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,var(--amb),var(--grn))}
.gauge .num{font-family:Orbitron;font-size:22px;font-weight:800;color:#eafff0;margin-top:6px}
.gauge .lab{font-size:11px;color:var(--grn-d);letter-spacing:2px}
#thr{position:absolute;bottom:60px;right:104px;width:14px;height:130px;border:1px solid var(--grn-d);background:rgba(4,12,7,.5)}
#thrF{position:absolute;bottom:0;left:0;right:0;background:var(--amb)}
#thrL{position:absolute;bottom:196px;right:104px;font-size:10px;color:var(--grn-d);letter-spacing:1px}
#wBox{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:400px;text-align:center}
#hpBar{height:12px;border:1px solid var(--grn-d);background:rgba(4,12,7,.55);margin-bottom:8px;position:relative}
#hpF{height:100%;width:100%;background:var(--grn);transition:width .2s}
#hpBar.low #hpF{background:var(--red);animation:blink .5s steps(2) infinite}
#heatRow{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:6px;font-size:11px}
#heatBar{width:150px;height:7px;border:1px solid var(--grn-d)}#heatF{height:100%;width:0;background:var(--amb)}
#heatRow.hot #heatF{background:var(--red)}#heatRow.hot #heatTxt{color:var(--red);animation:blink .4s steps(2) infinite}
#wRow{display:flex;justify-content:center;gap:26px;font-size:14px}
#wRow b{font-family:Orbitron;color:#eafff0;font-size:17px}
#wRow .warn2{color:var(--red)}
/* ---------- 菜单 / 结算 ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:flex}
#menu{background:linear-gradient(105deg,rgba(3,7,5,.94) 0 36%,rgba(3,7,5,.62) 62%,rgba(3,7,5,.18))}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.scan::after{content:'';position:absolute;left:0;right:0;height:130px;background:linear-gradient(180deg,transparent,rgba(120,255,170,.07),transparent);animation:scanm 7s linear infinite}
@keyframes scanm{from{top:-150px}to{top:110%}}
.menu-grid{display:grid;grid-template-columns:minmax(430px,640px) minmax(300px,420px);gap:26px;padding:4vh 4vw;align-content:center;width:100%;max-width:1220px;margin:auto;position:relative}
.panel{background:var(--panel);border:1px solid var(--line);padding:30px 34px;.........完整代码请登录后点击上方下载按钮下载查看