three实现三维反恐精英cs射击枪战游戏代码-html代码-BFW代码库

代码语言：html

所属分类：瀑布流

代码描述：three实现三维反恐精英cs射击枪战游戏代码

下面为部分代码预览，完整代码请点击下载或在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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --orange:#ff9a2d; --orange2:#ffc069; --hud:#ffa640;
  --panel:rgba(12,14,17,.88); --line:#2c333c; --red:#ff4136; --green:#8fd14f; --money:#9ccb4a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;
  font-family:'Rajdhani','Microsoft YaHei',sans-serif;color:#e8e4da;user-select:none;-webkit-user-select:none}
canvas{display:block}
#game{position:fixed;inset:0;z-index:0}
.hidden{display:none!important}

#scan{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
#vig{position:fixed;inset:0;z-index:11;pointer-events:none;
  box-shadow:inset 0 0 180px rgba(0,0,0,.55)}
#dmgvig{position:fixed;inset:0;z-index:12;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 140px rgba(255,30,20,.85);transition:opacity .5s}
#lowhp{position:fixed;inset:0;z-index:12;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 160px rgba(255,0,0,.7)}
#lowhp.on{animation:lp 1s ease-in-out infinite}
@keyframes lp{0%,100%{opacity:.12}50%{opacity:.45}}

#crosshair{position:fixed;left:50%;top:50%;z-index:13;pointer-events:none;--g:6px}
#crosshair i{position:absolute;background:#41ff70;box-shadow:0 0 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.5)}
#crosshair .u{width:2px;height:9px;left:-1px;bottom:var(--g)}
#crosshair .d{width:2px;height:9px;left:-1px;top:var(--g)}
#crosshair .l{height:2px;width:9px;top:-1px;right:var(--g)}
#crosshair .r{height:2px;width:9px;top:-1px;left:var(--g)}
#hitm{position:absolute;width:22px;height:22px;left:-11px;top:-11px;opacity:0;transform:rotate(45deg);
  background:
   linear-gradient(#fff 0 0) 50% 0/2px 7px no-repeat,
   linear-gradient(#fff 0 0) 50% 100%/2px 7px no-repeat,
   linear-gradient(#fff 0 0) 0 50%/7px 2px no-repeat,
   linear-gradient(#fff 0 0) 100% 50%/7px 2px no-repeat}
#hitm.on{animation:hm .22s ease-out}
#hitm.hs{background:
   linear-gradient(#ff4136 0 0) 50% 0/2px 7px no-repeat,
   linear-gradient(#ff4136 0 0) 50% 100%/2px 7px no-repeat,
   linear-gradient(#ff4136 0 0) 0 50%/7px 2px no-repeat,
   linear-gradient(#ff4136 0 0) 100% 50%/7px 2px no-repeat}
@keyframes hm{0%{opacity:1;transform:rotate(45deg) scale(1.7)}100%{opacity:0;transform:rotate(45deg) scale(.7)}}

#dmgdir{position:fixed;left:50%;top:50%;width:230px;height:230px;z-index:12;pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--a,0deg));opacity:0;
  background:conic-gradient(from -22deg,rgba(255,55,35,.9) 0 44deg,transparent 44deg);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 61% 71%,transparent 72%);
          mask:radial-gradient(circle,transparent 60%,#000 61% 71%,transparent 72%)}
#dmgdir.on{animation:dd .7s ease-out}
@keyframes dd{0%{opacity:1}100%{opacity:0}}

#scope{position:fixed;inset:0;z-index:14;display:none;pointer-events:none}
#scope.on{display:block}
#scope::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,transparent 0 33.5%,#000 34.2%)}
#scope::after{content:'';position:absolute;inset:0;opacity:.9;background:
  linear-gradient(#000 0 0) 50% 0/1px 100% no-repeat,
  linear-gradient(#000 0 0) 0 50%/100% 1px no-repeat}
#scope .ring{position:absolute;left:50%;top:50%;width:67vmin;height:67vmin;
  transform:translate(-50%,-50%);border:2px solid #000;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.06) inset}

#hud{position:fixed;inset:0;z-index:15;pointer-events:none}
.digi{font-weight:700;letter-spacing:1px;color:var(--hud);text-shadow:0 0 8px rgba(255,140,30,.45),0 2px 3px #000}
#radar-wrap{position:absolute;left:18px;top:16px}
#radar{border:1px solid #3a4438;background:rgba(6,12,8,.8);box-shadow:0 0 0 3px rgba(0,0,0,.45)}
#money{margin-top:8px;font-size:26px;color:var(--money);font-weight:700;text-shadow:0 0 8px rgba(120,190,60,.4),0 2px 3px #000}
#moneypop{position:absolute;left:4px;top:170px;font-size:18px;font-weight:700;color:var(--money);opacity:0}
#moneypop.on{animation:mp 1.1s ease-out}
@keyframes mp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-26px)}}

#topbar{position:absolute;left:50%;top:14px;transform:translateX(-50%);text-align:center;
  background:var(--panel);border:1px solid var(--line);padding:6px 26px;min-width:250px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
#timer{font-size:34px;line-height:1}
#roundinfo{font-size:12px;letter-spacing:3px;color:#9aa5ad}
#score{font-size:13px;letter-spacing:2px;color:var(--orange2)}

#feed{position:absolute;right:18px;top:16px;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.fi{background:rgba(8,10,12,.82);border:1px solid var(--line);border-right:3px solid var(--orange);
  padding:4px 12px;font-size:14px;font-weight:600;white-space:nowrap;animation:fin .25s ease-out}
.fi .fk{color:var(--orange2)} .fi .fv{color:#ff8d80} .fi .fw{color:#9fb0ba;font-size:12px;margin:0 6px}
.fi .hs{color:var(--red);font-weight:700}
.fi.out{opacity:0;transform:translateX(20px);transition:.4s}
@keyframes fin{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

#healthbox{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);padding:10px 20px;
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px))}
#healthbox .ic{font-size:22px;color:var(--hud)} #healthbox .ic.sh{color:#7fb6d9}
#hp{font-size:40px;min-width:64px} #ap{font-size:40px;color:#9fd0ee;text-shadow:0 0 8px rgba(90,160,210,.4),0 2px 3px #000;min-width:56px}

#ammobox{position:absolute;right:18px;bottom:18px;text-align:right;background:var(--panel);
  border:1px solid var(--line);padding:10px 20px;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
#ammoName{font-size:14px;letter-spacing:3px;color:#9aa5ad}
#ammobox .row{display:flex;gap:8px;justify-content:flex-end;align-items:baseline}
#mag{font-size:46px} #res{font-size:24px;color:#b98a4e}
#wslot{font-size:12px;letter-spacing:2px;color:#6d7880}

#reloadbar{position:fixed;left:50%;bottom:24%;transform:translateX(-50%);width:220px;height:5px;
  background:rgba(0,0,0,.6);border:1px solid var(--line);z-index:15}
#reloadbar i{display:block;height:100%;width:0;background:var(--orange)}
#hint{position:fixed;left:50%;bottom:15%;transform:translateX(-50%);z-index:15;font-size:15px;
  letter-spacing:2px;color:#cfd6da;background:rgba(0,0,0,.5);padding:6px 18px;opacity:0;transition:opacity .6s}
#hint.on{opacity:.9}

#announce{position:fixed;left:0;right:0;top:26%;text-align:center;z-index:16;pointer-events:none}
#ann-main{font-family:'Black Ops One','Microsoft YaHei',sans-serif;font-size:58px;color:var(--orange);
  text-shadow:0 0 24px rgba(255,140,30,.5),0 4px 0 #3a2408;opacity:0;letter-spacing:4px}
#ann-sub{font-size:19px;letter-spacing:4px;color:#e8e4da;margin-top:6px;opacity:0}
#announce.show #ann-main{animation:an 2s ease-out}
#announce.show #ann-sub{animation:an 2s ease-out .1s}
@keyframes an{0%{opacity:0;transform:scale(1.6)}12%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0}}

.overlay{position:fixed;inset:0;z-index:40;display:flex}
.panel{background:var(--panel);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.7)}
.btn{display:block;width:100%;text-align:left;background:none;border:none;border-left:3px solid transparent;
  color:#cfd6da;font-family:inherit;font-size:19px;font-weight:600;letter-spacing:3px;
  padding:12px 22px;cursor:pointer;transition:.15s}
.btn:hover{color:var(--orange);border-left-color:var(--orange);background:rgba(255,154,45,.07);transform:trans.........完整代码请登录后点击上方下载按钮下载查看