three实现三维地道战游击战打鬼子游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维地道战游击战打鬼子游戏代码，敌寇将分六路袭我赵家庄,意在焚毁村中粮仓。全村已挖成连环地道,设有六处出入口:水井、草垛、灶台、石磨、驴槽、暗堡,近前按 E 出入。地道内可休整疗伤、补充弹药,并携地雷布于要道。粮仓若失,全村皆殇。务死守之!

代码标签： 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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --red:#d84026; --red-d:#8e1f12; --gold:#e9b85a; --paper:#efe2c4;
  --ink:#12100c; --panel:rgba(18,14,9,.78); --line:rgba(233,184,90,.55);
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --body:'Noto Sans SC',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--body);color:var(--paper);user-select:none}
canvas#cv{position:fixed;inset:0;z-index:0;display:block}
.cut{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
#grain{position:fixed;inset:-60px;z-index:40;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.7"/></svg>');
  animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-16px,9px)}50%{transform:translate(9px,-14px)}75%{transform:translate(-7px,-11px)}100%{transform:translate(12px,8px)}}
#vig{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(8,4,2,.55) 100%)}
#dmg{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(190,20,10,.55) 100%)}
#fade{position:fixed;inset:0;z-index:60;background:#000;opacity:0;pointer-events:none;transition:opacity .3s}
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;display:none}
body.playing #hud{display:block}
#cross{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);transition:transform .12s}
#cross i{position:absolute;background:rgba(240,225,190,.95);box-shadow:0 0 3px rgba(0,0,0,.8)}
#cross i:nth-child(1){left:12px;top:0;width:2px;height:8px}
#cross i:nth-child(2){left:12px;bottom:0;width:2px;height:8px}
#cross i:nth-child(3){top:12px;left:0;height:2px;width:8px}
#cross i:nth-child(4){top:12px;right:0;height:2px;width:8px}
#hitmark{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%) rotate(45deg);opacity:0}
#hitmark b{position:absolute;background:#ff5a3c}
#hitmark b:nth-child(1){left:9px;top:-4px;width:2px;height:9px}
#hitmark b:nth-child(2){left:9px;bottom:-4px;width:2px;height:9px}
#hitmark b:nth-child(3){top:9px;left:-4px;height:2px;width:9px}
#hitmark b:nth-child(4){top:9px;right:-4px;height:2px;width:9px}
#hitmark.on{animation:hitpop .22s ease-out}
@keyframes hitpop{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1.5)}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.8)}}
#compass{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:280px;height:30px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
#cstrip{position:absolute;top:0;left:0;height:100%;width:4000px}
#cstrip span{position:absolute;top:0;font-family:var(--disp);color:var(--gold);font-size:15px;line-height:20px;transform:translateX(-50%)}
#cstrip span.t{width:1px;height:7px;background:rgba(233,184,90,.5);top:auto;bottom:2px}
#objline{position:absolute;top:50px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:2px;color:rgba(240,225,190,.85);
  background:rgba(18,14,9,.55);padding:4px 16px;border-bottom:2px solid var(--red)}
#tl{position:absolute;top:14px;left:14px;width:250px;background:var(--panel);border:1px solid var(--line);padding:12px 14px}
#tl .wv{font-family:var(--disp);font-size:26px;color:var(--gold);line-height:1}
#tl .wv small{font-size:13px;color:var(--paper);opacity:.8;margin-left:8px;letter-spacing:1px}
#tl .row{display:flex;justify-content:space-between;font-size:12px;margin-top:8px;letter-spacing:1px}
.bar{height:10px;background:#241c12;border:1px solid rgba(233,184,90,.35);margin-top:3px;position:relative;overflow:hidden}
.bar i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#b8842e,#e9b85a)}
#gbar i{background:linear-gradient(90deg,#8e1f12,#d84026)}
#gbar.hit{animation:gflash .3s}
@keyframes gflash{50%{box-shadow:0 0 12px #ff4020}}
#mm{position:absolute;top:14px;right:14px;border:1px solid var(--line);background:rgba(12,10,6,.85)}
#mmlabel{position:absolute;top:250px;right:14px;font-size:11px;letter-spacing:3px;color:rgba(233,184,90,.7);text-align:right;width:232px}
#legend{position:absolute;top:266px;right:14px;width:232px;display:flex;flex-wrap:wrap;gap:3px 10px;font-size:11px;color:rgba(240,225,190,.8)}
#legend span{display:inline-flex;align-items:center;gap:4px}
#legend i{width:8px;height:8px;display:inline-block;border-radius:50%}
#hpwrap{position:absolute;left:16px;bottom:16px;width:270px}
#hpwrap .tt{font-family:var(--disp);font-size:16px;letter-spacing:2px;color:var(--paper);display:flex;align-items:center;gap:8px}
#hpwrap .tt em{color:var(--red);font-style:normal;font-size:18px}
#hpbar{height:14px;margin-top:5px;background:#241c12;border:1px solid var(--line);overflow:hidden}
#hpFill{height:100%;width:100%;background:linear-gradient(90deg,#8e1f12,#e05a36);transition:width .15s}
#regen{font-size:11px;color:#9fd08a;letter-spacing:2px;margin-top:4px;opacity:0;transition:opacity .3s}
#regen.on{opacity:1}
#slots{position:absolute;right:16px;bottom:16px;display:flex;gap:10px}
.slot{width:86px;background:var(--panel);border:1px solid var(--line);padding:8px 10px;text-align:center;transition:all .15s}
.slot.on{border-color:var(--red);box-shadow:0 0 10px rgba(216,64,38,.5);background:rgba(80,20,10,.75)}
.slot kbd{font-family:var(--disp);color:var(--gold);font-size:12px}
.slot .nm{font-family:var(--disp);font-size:17px;margin-top:2px}
.slot .ct{font-size:12px;color:rgba(240,225,190,.85)}
#prompt{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);font-size:15px;letter-spacing:2px;
  background:rgba(18,14,9,.85);border:1px solid var(--line);padding:8px 20px;display:none}
#prompt kbd{font-family:var(--disp);background:#2a241a;border:1px solid var(--gold);color:var(--gold);padding:1px 8px;margin-right:8px}
#toast{position:absolute;bottom:170px;left:50%;transform:translateX(-50%);max-width:560px;text-align:center;font-size:14px;letter-spacing:1px;
  color:var(--paper);background:rgba(120,25,12,.55);border-left:3px solid var(--gold);border-right:3px solid var(--gold);padding:8px 18px;opacity:0;transition:opacity .4s}
#killfeed{position:absolute;left:16px;top:40%;font-size:13px;letter-spacing:1px}
#killfeed div{background:rgba(18,14,9,.6);border-left:3px solid var(--red);padding:3px 10px;margin-top:4px;animation:kfin .3s}
@keyframes kfin{from{transform:translateX(-16px);opacity:0}}
#banner{position:absolute;top:26%;left:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;pointer-events:none}
#banner h2{font-family:var(--disp);font-size:58px;color:#ff5a3c;letter-spacing:10px;
  text-shadow:3px 3px 0 #4a0d05,0 0 26px rgba(216,64,38,.6)}
#banner p{font-size:15px;letter-spacing:6px;color:var(--gold);margin-top:6px}
#banner.show{animation:ban 2.4s ease}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
#title{position:fixed;inset:0;z-index:50;overflow:hidden;
  background:radial-gradient(1200px 700px at 30% 20%,#3a140d 0%,#1a0a06 55%,#0b0503 100%)}
#rays{position:absolute;left:-40%;top:-80%;width:180%;height:260%;opacity:.16;
  background:repeating-conic-gradient(from 0deg,#e9b85a 0deg 5deg,transparent 5deg 14deg);
  animation:spin 110s linear infinite;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 62%);
  mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 62%)}
@keyframes spin{to{tran.........完整代码请登录后点击上方下载按钮下载查看