three实现三维cs反恐精英经典游戏代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由qwen-4 ai生成，可能有错误，仅供参考：点击查看提示词
代码描述：三维cs反恐精英经典游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="theme-color" content="#171a10">
<title>反恐行动 · TACTICAL STRIKE</title>
<style>
:root{
  --sand:#d8b56a; --sand2:#b98d4f; --sand3:#8a6c34;
  --olive:#12140c; --olive2:#1c2013; --panel:rgba(16,18,10,.9);
  --green:#8a9a4b; --ct:#4fa3ff; --t:#ff9a3c; --red:#ff4d4d;
  --ok:#57d977; --warn:#ffc23d; --ink:#efe6cf; --dim:#a89e83;
}
*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--sand3) #14160d}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#14160d;border-left:1px solid #2c2f1e}
::-webkit-scrollbar-thumb{background:linear-gradient(#caa25a,#8a6c34);border:2px solid #14160d;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#e2bd72}
html,body{width:100%;height:100%;overflow:hidden;background:#0d0f08;color:var(--ink);
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0}
#app canvas{display:block;width:100%;height:100%}
.hidden{display:none!important}
.mono{font-family:Consolas,"Courier New",monospace}
/* ---------- ambient layers ---------- */
#grain{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.06;mix-blend-mode:overlay}
#vign{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(8,8,4,.55) 100%)}
/* ---------- generic UI ---------- */
.panel{background:var(--panel);border:1px solid rgba(216,181,106,.35);box-shadow:0 18px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.5);backdrop-filter:blur(8px);position:relative}
.panel::before,.panel::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none}
.panel::before{top:-1px;left:-1px;border-top:2px solid var(--sand);border-left:2px solid var(--sand)}
.panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--sand);border-right:2px solid var(--sand)}
.btn{cursor:pointer;border:1px solid rgba(216,181,106,.5);color:var(--ink);background:linear-gradient(180deg,#2a2d1b,#1a1d10);
  padding:10px 18px;font-size:15px;font-weight:700;letter-spacing:.12em;transition:.15s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{background:linear-gradient(180deg,#3a3d24,#242715);border-color:var(--sand);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#f0a24a,#c96a1e);color:#1d1206;border-color:#ffd9a0;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{background:linear-gradient(180deg,#ffb45e,#e07c28)}
.btn.danger{border-color:rgba(255,77,77,.6)}
.btn:disabled{opacity:.4;cursor:not-allowed}
select,input[type=range]{accent-color:var(--t)}
select{background:#1a1d10;color:var(--ink);border:1px solid rgba(216,181,106,.4);padding:6px 8px;font-size:14px}
.setrow{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim)}
.setrow label{min-width:64px;letter-spacing:.1em}
.setrow input[type=range]{flex:1;height:4px}
.setrow .val{min-width:36px;text-align:right;color:var(--sand)}
/* ---------- top bar ---------- */
#topbar{position:fixed;top:10px;right:12px;z-index:40;display:flex;gap:8px}
#topbar .tbtn{cursor:pointer;background:rgba(14,16,9,.8);border:1px solid rgba(216,181,106,.4);color:var(--sand);
  padding:6px 12px;font-size:13px;font-weight:700;letter-spacing:.08em;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#topbar .tbtn:hover{color:#fff;border-color:var(--sand)}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;font-family:Consolas,"Microsoft YaHei",monospace}
.hudp{background:linear-gradient(180deg,rgba(14,16,8,.78),rgba(14,16,8,.6));border:1px solid rgba(216,181,106,.3);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#hudTL{position:absolute;top:12px;left:12px}
#radarWrap{width:158px;height:158px;position:relative}
#radar{width:158px;height:158px;display:block}
#fps{font-size:10px;color:rgba(216,181,106,.55);margin-top:3px;letter-spacing:.15em}
#hudTC{position:absolute;top:10px;left:50%;transform:translateX(-50%);text-align:center}
#scorebar{display:flex;align-items:center;gap:10px;justify-content:center;padding:6px 16px}
.teamchip{font-weight:800;font-size:20px;padding:2px 12px;letter-spacing:.05em}
.teamchip.ct{color:var(--ct);border-bottom:2px solid var(--ct)}
.teamchip.t{color:var(--t);border-bottom:2px solid var(--t)}
#timerBox{min-width:96px}
#timerLabel{font-size:10px;color:var(--dim);letter-spacing:.25em}
#timerVal{font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
#timerVal.bomb{color:var(--red);animation:blink .5s steps(2) infinite}
#roundNum{font-size:10px;color:var(--sand);letter-spacing:.35em;margin-top:2px}
#pips{display:flex;gap:8px;justify-content:center;margin-top:4px}
.pipset{display:flex;gap:3px}
.pip{width:10px;height:4px;background:rgba(255,255,255,.15)}
.pip.on.ct{background:var(--ct)}.pip.on.t{background:var(--t)}
@keyframes blink{50%{opacity:.35}}
#hudTR{position:absolute;top:52px;right:12px;display:flex;flex-direction:column;gap:4px;align-items:flex-end;max-width:46vw}
.kf{background:rgba(12,14,7,.8);border:1px solid rgba(216,181,106,.25);padding:4px 10px;font-size:13px;display:flex;gap:7px;align-items:center;animation:kfin .2s ease-out}
.kf .n{font-weight:700}.kf .n.ct{color:var(--ct)}.kf .n.t{color:var(--t)}
.kf .wi{color:var(--sand);display:flex}.kf .wi svg{width:30px;height:13px}
.kf .hs{color:var(--warn);font-weight:800}
.kf.fade{opacity:0;transition:opacity .6s}
@keyframes kfin{from{transform:translateX(30px);opacity:0}}
#hudBL{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:6px}
#vitals{display:flex;gap:10px;padding:8px 14px;align-items:center}
.vital{display:flex;align-items:center;gap:7px}
.vital .ic{font-size:17px}
.vital .num{font-size:26px;font-weight:800;min-width:44px}
#hpVal{color:#ff8f6b}#armorVal{color:var(--ct)}
.vbar{width:70px;height:5px;background:rgba(255,255,255,.12)}
.vbar i{display:block;height:100%;transition:width .2s}
#hpFill{background:linear-gradient(90deg,#ff6a4d,#ffb35c)}
#armorFill{background:linear-gradient(90deg,#2f7fd6,#7cc4ff)}
#moneyRow{padding:5px 14px;font-size:19px;font-weight:800;color:var(--ok);letter-spacing:.05em;width:max-content}
#moneyRow.bump{animation:bump .4s}
@keyframes bump{30%{transform:scale(1.12);color:#c6ffd9}}
#radiofeed{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--warn);max-width:340px}
#radiofeed div{background:rgba(12,14,7,.65);padding:3px 8px;border-left:2px solid var(--warn);animation:kfin .2s}
#hudBR{position:absolute;right:12px;bottom:12px;text-align:right}
#weapBox{padding:8px 16px;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
#weaponName{font-size:13px;color:var(--sand);letter-spacing:.2em;display:flex;gap:8px;align-items:center}
#weaponName svg{width:38px;height:16px}
#ammoRow{font-size:30px;font-weight:800;line-height:1}
#ammoMag.low{color:var(--red)}
#ammoRes{font-size:17px;color:var(--dim)}
#kitTag{font-size:11px;color:var(--ok);letter-spacing:.15em}
/* crosshair */
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0;--g:8px}
#crosshair span{position:absolute;background:#7dff8a;box-shadow:0 0 3px rgba(0,0,0,.9)}
#chT{width:2px;height:9px;left:-1px;top:calc(-9px - var(--g))}
#chB{width:2px;height:9px;left:-1px;top:var(--g)}
#chL{height:2px;width:9px;top:-1px;left:calc(-9px - var(--g))}
#chR{height:2px;width:9px;top:-1px;left:var(--g)}
#chDot{width:2px;height:2px;left:-1px;top:-1px;opacity:.8}
#hitmarker{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}
#hitmarker span{position:absolute;width:2px;height:10px;background:#fff;box-shadow:0 0 4px #000}
#hitmarker span:nth-child(1){transform:translate(-8px,-14px) rotate(45deg)}
#hitmarker span:nth-child(2){transform:translate(6px,-14px) rotate(-45deg)}
#hitmarker span:nth-child(3){transform:translate(-8px,4px) rotate(-45deg)}
#hitmarker span:nth-child(4){transform:translate(6px,4px) rotate(45deg)}
#hitmarker.show{animation:hm .22s ease-out}
#hitmarker.kill span{background:var(--red)}
#hitmarker.head span{background:var(--warn)}
@keyframes hm{0%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(.8)}}
#dmgVignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(200,20,10,.75) 100%);opacity:0}
#dmgDirs{position:absolute;left:50%;top:50%;width:0;height:0}
.dmgdir{position:absolute;left:-70px;top:-70px;width:140px;height:140px;border-radius:50%;border-top:4px solid rgba(255,60,40,.95);opacity:0}
.dmgdir.show{animation:dd 1s ease-out}
@keyframes dd{0%{opacity:1}100%{opacity:0}}
#killBanner{position:absolute;left:50%;bottom:23%;transform:translateX(-50%);padding:6px 20px;font-size:16px;font-weight:800;color:var(--warn);opacity:0;letter-spacing:.1em}
#killBanner.show{animation:kb 1.6s ease-out}
@keyframes kb{0%{opacity:0;transform:translateX(-50%) translateY(12px)}12%{opacity:1;transform:translateX(-50%)}80%{opacity:1}100%{opacity:0}}
#alertBanner{position:absolute;left:50%;top:19%;transform:translateX(-50%);padding:8px 24px;font-size:17px;font-weight:800;color:var(--red);border-color:rgba(255,77,77,.5);opacity:0;letter-spacing:.15em}
#alertBanner.show{animation:ab 3s ease-out}
@keyframes ab{0%{opacity:0;transform:translateX(-50%) scale(.85)}10%{opacity:1;transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}
#progressWrap{position:absolute;left:50%;top:58%;transform:translateX(-50%);width:280px;padding:10px 14px;text-align:center}
#progressLabel{font-size:13px;letter-spacing:.15em;margin-bottom:6px;color:var(--ok)}
#progressWrap.plant #progressLabel{color:var(--t)}
#progressBar{height:8px;background:rgba(255,255,255,.12);border:1px solid rgba(216,181,106,.3)}
#progressFill{height:100%;width:0;background:linear-gradient(90deg,#3d9c58,#7dffa0)}
#progressWrap.plant #progressFill{background:linear-gradient(90deg,#c96a1e,#ffb45c)}
#interactHint,#buyHint,#spectateNote{position:absolute;left:50%;transform:translateX(-50%);padding:7px 18px;font-size:14px;letter-spacing:.12em}
#interactHint{bottom:31%;color:var(--ok)}
#buyHint{top:15%;color:var(--warn);animation:blink 1.2s steps(2) infinite}
#spectateNote{top:15%;color:var(--red)}
/* round banner */
#roundBanner{position:fixed;left:50%;top:30%;transform:translate(-50%,-50%) scale(.8);z-index:15;text-align:center;padding:22px 60px;opacity:0;pointer-events:none;transition:.25s}
#roundBanner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#rbTitle{font-size:42px;font-weight:900;letter-spacing:.25em;text-shadow:0 3px 14px rgba(0,0,0,.8)}
#roundBanner.ct #rbTitle{color:var(--ct)}#roundBanner.t #rbTitle{color:var(--t)}
#rbSub{font-size:15px;color:var(--ink);margin-top:8px;letter-spacing:.1em}
#rbMoney{font-size:15px;color:var(--ok);margin-top:4px;font-weight:700}
/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(6,7,3,.55);backdrop-filter:blur(4px)}
/* buy */
#buyMenu .panel{width:min(720px,94vw);max-height:88vh;display:flex;flex-direction:column;padding:20px 22px}
.buyhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.buyhead h2{font-size:20px;letter-spacing:.3em;color:var(--sand)}
#buyMoney{font-size:22px;font-weight:800;color:var(--ok)}
#buyGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;overflow-y:auto;padding:4px}
.buycard{cursor:pointer;border:1px solid rgba(216,181,106,.3);background:linear-gradient(180deg,#1e2113,#14160c);padding:12px;position:relative;transition:.15s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.buycard:hover{border-color:var(--t);background:linear-gradient(180deg,#2a2d18,#1a1d10)}
.buycard .key{position:absolute;top:8px;right:10px;font-size:11px;color:var(--dim);border:1px solid rgba(216,181,106,.35);padding:1px 6px}
.buycard .bic{color:var(--sand);height:30px;display:flex;align-items:center}
.buycard .bic svg{width:64px;height:26px}
.buycard h3{font-size:15px;margin:6px 0 3px}
.buycard .desc{font-size:11px;color:var(--dim);min-height:26px}
.buycard .price{font-size:16px;font-weight:800;color:var(--ok);margin-top:5px}
.buycard.owned{opacity:.55}.buycard.owned .price{color:var(--ct)}
.buycard.poor .price{color:var(--red)}
.buycard.poor{opacity:.6}
#buyNote{font-size:12px;color:var(--dim);margin-top:10px;text-align:center;letter-spacing:.1em}
/* scoreboard */
#scoreboard{z-index:35;background:rgba(6,7,3,.4)}
#scoreboard .panel{width:min(560px,92vw);padding:18px 22px;max-height:80vh;overflow-y:auto}
#sbScore{text-align:center;font-size:26px;font-weight:900;letter-spacing:.2em;margin-bottom:12px}
#scoreboard table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:12px}
#scoreboard th{font-size:11px;color:var(--dim);letter-spacing:.15em;text-align:left;padding:4px 8px;border-bottom:1px solid rgba(216,181,106,.3)}
#scoreboard td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.05)}
#scoreboard tr.dead td{opacity:.4}
.sbteam{font-size:13px;font-weight:800;letter-spacing:.2em;padding:4px 0}
.sbteam.ct{color:var(--ct)}.sbteam.t{color:var(--t)}
/* pause */
#pauseMenu .panel{width:min(420px,92vw);padding:26px 28px;max-height:90vh;overflow-y:auto}
#pauseMenu h2{font-size:24px;letter-spacing:.35em;color:var(--sand);text-align:center;margin-bottom:6px}
#pauseMenu .sub{font-size:12px;color:var(--dim);text-align:center;margin-bottom:18px}
#pauseMenu .btn{width:100%;margin-bottom:8px}
#pauseMenu .sets{margin:14px 0;display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(216,181,106,.2);border-bottom:1px solid rgba(216,181,106,.2);padding:14px 0}
/* match end */
#matchEnd .panel{width:min(520px,94vw);padding:28px 30px;text-align:center;max-height:92vh;overflow-y:auto}
#meTitle{font-size:34px;font-weight:900;letter-spacing:.2em;margin-bottom:4px}
#meTitle.win{color:var(--ok)}#meTitle.lose{color:var(--red)}
#meScore{font-size:22px;font-weight:800;margin-bottom:16px}
#meStats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(216,181,106,.2);padding:10px 4px}
.stat .v{font-size:21px;font-weight:800;color:var(--sand)}
.stat .k{font-size:10px;color:var(--dim);letter-spacing:.15em;margin-top:3px}
#meBest{font-size:13px;color:var(--warn);margin-bottom:16px;min-height:18px}
#matchEnd .btn{margin:0 5px}
/* ---------- start menu ---------- */
#menu{position:fixed;inset:0;z-index:60;display:flex;background:linear-gradient(100deg,rgba(8,9,4,.92) 0%,rgba(8,9,4,.75) 42%,rgba(8,9,4,.25) 100%)}
#menuPanel{width:min(620px,100vw);height:100%;overflow-y:auto;padding:4vh 40px 30px;display:flex;flex-direction:column;gap:16px}
.badge{font-size:11px;letter-spacing:.4em;color:var(--t);border:1px solid rgba(255,154,60,.4);width:max-content;padding:4px 12px}
#titleCN{font-size:clamp(44px,7vw,72px);font-weight:900;line-height:1.05;letter-spacing:.06em;
  background:linear-gradient(180deg,#ffe9bd,#e8a54e 55%,#a8642a);-webkit-ba.........完整代码请登录后点击上方下载按钮下载查看