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>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#d8b45a; --gold-hi:#f3d98c; --gold-dk:#8a6a2a; --line:#6b5426;
  --panel:#1c130b; --red:#e04040; --blue:#4fa8ff; --green:#5fce5f;
  --fd:'Ma Shan Zheng',serif; --fb:'Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0705;font-family:var(--fb);color:#e8dcc0}
#app{position:fixed;inset:0}
#cv{position:absolute;inset:0;display:block}
.hidden{display:none!important}
.brush{font-family:var(--fd);font-weight:400}
.panel{position:relative;background:linear-gradient(180deg,#2a1d11,#170f08 60%,#20150c);
  border:1px solid var(--line);
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,215,140,.12),0 4px 16px rgba(0,0,0,.55)}
.panel::before,.panel::after{content:"";position:absolute;width:7px;height:7px;background:var(--gold);
  transform:rotate(45deg);box-shadow:0 0 4px #000}
.panel::before{top:-4px;left:-4px}.panel::after{bottom:-4px;right:-4px}
/* ---------- 3D 血条 / 飘字 ---------- */
#bars,#floaters{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#bars{z-index:5}#floaters{z-index:6}
.ubar{position:absolute;left:0;top:0;pointer-events:none;filter:drop-shadow(0 1px 2px #000)}
.ubar .ubg{height:6px;background:rgba(0,0,0,.75);border:1px solid #000;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.ubar i{display:block;height:100%;width:100%}
.ubar.ally i{background:linear-gradient(180deg,#8fe08f,#2f9e2f 60%,#1d6e1d)}
.ubar.enemy i{background:linear-gradient(180deg,#ff8a7a,#c22525 60%,#7e1010)}
.ubar.hero .ubg{box-shadow:0 0 0 1px var(--gold-dk);height:7px}
.ubar .utx{position:absolute;left:50%;top:-13px;transform:translateX(-50%);font-size:10px;font-weight:700;
  color:#fff;text-shadow:1px 1px 1px #000;white-space:nowrap}
.ft{position:absolute;pointer-events:none;font-weight:900;font-size:15px;color:#fff;
  text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,0 0 6px #000;white-space:nowrap}
.ft span{display:inline-block;animation:ftUp 1.05s ease-out forwards}
.ft.dmg{color:#ffd23e}.ft.hurt{color:#ff5a4a}.ft.heal{color:#6fe06f}
.ft.gold{color:#ffe08a;font-size:13px}.ft.xp{color:#7fd4ff;font-size:12px}
.ft.crit{font-size:22px;color:#ff9d2e}.ft.miss{color:#bbb;font-size:12px}
@keyframes ftUp{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:1;transform:translateY(-8px) scale(1.18)}
  100%{transform:translateY(-54px) scale(1);opacity:0}}
/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none}
#hud .ui-block{pointer-events:auto}
#top-left{position:absolute;top:12px;left:12px;padding:8px 16px 10px;min-width:170px}
#wave-num{font-size:30px;color:var(--gold-hi);line-height:1;text-shadow:2px 2px 0 #3a2008}
#wave-status{font-size:12px;color:#cdb87f;margin-top:3px}
#game-time{font-size:12px;color:#9a8a66;margin-top:2px;letter-spacing:1px}
#announce{position:absolute;top:15%;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;width:100%}
#announce .big{font-family:var(--fd);font-size:60px;color:var(--gold-hi);
  text-shadow:0 0 2px #000,3px 3px 0 #5a2410,0 0 34px rgba(255,170,60,.55);animation:annIn 2.6s forwards}
#announce .sub{font-size:16px;color:#ffe9b8;text-shadow:1px 1px 2px #000;margin-top:4px;animation:annIn 2.6s forwards}
#announce.bad .big{color:#ff6a52;text-shadow:0 0 2px #000,3px 3px 0 #40100a,0 0 34px rgba(255,60,40,.5)}
@keyframes annIn{0%{transform:scale(1.9);opacity:0}12%{transform:scale(1);opacity:1}78%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
#target-frame{position:absolute;top:64px;left:50%;transform:translateX(-50%);width:320px;padding:8px 12px;display:flex;align-items:center;gap:10px}
#tf-name{font-family:var(--fd);font-size:19px;color:#ff9d8a;white-space:nowrap}
#tf-lv{font-size:11px;color:#caa24a}
#tf-bar{flex:1;height:12px;background:#120a06;border:1px solid #000;box-shadow:0 0 0 1px var(--line)}
#tf-bar i{display:block;height:100%;background:linear-gradient(180deg,#ff7a6a,#c22525 60%,#7e1010);transition:width .12s}
#top-right{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#res-row{display:flex;gap:8px}
.res{padding:5px 12px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.res b{color:var(--gold-hi);font-size:16px}
.res .ico{width:12px;height:12px;border-radius:50%;display:inline-block}
#mm-wrap{padding:5px}
#minimap{display:block;width:158px;height:158px;border-radius:50%;border:2px solid var(--gold-dk);
  box-shadow:0 0 0 1px #000,inset 0 0 18px #000;cursor:pointer;background:#0d140d}
#btn-row{display:flex;gap:6px}
.sq-btn{width:32px;height:32px;font-size:15px;color:var(--gold-hi);background:linear-gradient(180deg,#332413,#1a110a);
  border:1px solid var(--line);cursor:pointer;box-shadow:0 0 0 1px #000;transition:.15s}
.sq-btn:hover{border-color:var(--gold-hi);box-shadow:0 0 10px rgba(255,210,110,.4)}
.sq-btn.off{color:#665;text-decoration:line-through}
#log{position:absolute;left:14px;bottom:14px;width:262px;max-height:200px;overflow:hidden;font-size:12px;line-height:1.55;
  pointer-events:none;mask-image:linear-gradient(180deg,transparent,#000 30%)}
#log div{text-shadow:1px 1px 1px #000;animation:logIn .25s}
@keyframes logIn{from{transform:translateX(-10px);opacity:0}to{transform:none;opacity:1}}
.l-dmg{color:#ffd23e}.l-hurt{color:#ff8a7a}.l-heal{color:#6fe06f}.l-sys{color:#9fd0ff}.l-gold{color:#ffe08a}.l-wave{color:#f0a04a}
/* 英雄面板 */
#hero-frame{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:12px;align-items:flex-end;padding:10px 16px 12px}
#portrait{width:66px;height:66px;border-radius:50%;border:2px solid var(--gold);overflow:hidden;flex:none;
  box-shadow:0 0 0 2px #000,0 0 14px rgba(255,200,90,.35);background:#10141c}
#portrait svg{width:100%;height:100%}
#hf-bars{width:225px;display:flex;flex-direction:column;gap:4px}
.hbar{height:17px;border:1px solid #000;box-shadow:0 0 0 1px var(--line),inset 0 2px 3px rgba(0,0,0,.8);background:#120a06;position:relative}
.hbar i{display:block;height:100%;transition:width .15s}
.hbar.hp i{background:linear-gradient(180deg,#ff6a5a,#c22525 55%,#8f1414);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.hbar.mp{height:13px}.hbar.mp i{background:linear-gradient(180deg,#6aa8ff,#2a5fc0 55%,#173a80);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.hbar span{position:absolute;inset:0;text-align:center;font-size:11px;font-weight:700;color:#fff;
  text-shadow:1px 1px 1px #000;line-height:17px;letter-spacing:.5px}
.hbar.mp span{line-height:13px;font-size:10px}
#xp-wrap{display:flex;align-items:center;gap:6px}
#lvl-chip{font-family:var(--fd);font-size:17px;color:var(--gold-hi);text-shadow:1px 1px 0 #000}
#xp-bar{flex:1;height:5px;background:#0d0805;border:1px solid #000;box-shadow:0 0 0 1px #4a3a1c}
#xp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a6a2a,#f3d98c)}
#skills{display:flex;gap:8px;align-items:flex-end}
.skill{width:56px;height:56px;border:2px solid var(--gold-dk);position:relative;cursor:pointer;flex:none;
  background:radial-gradient(circle at 35% 28%,#3d2e1a,#17100a 72%);
  box-shadow:inset 0 0 0 1px #000,0 2px 8px rgba(0,0,0,.7);transition:.15s}
.skill:hover{border-color:var(--gold-hi);transform:translateY(-3px);box-shadow:0 0 14px rgba(255,210,110,.55),inset 0 0 0 1px #000}
.skill svg{width:100%;height:100%;padding:7px}
.skill .key{position:absolute;left:3px;top:0;font-size:11px;font-weight:900;color:var(--gold-hi);text-shadow:1px 1px 1px #000}
.skill .cost{position:absolute;right:3px;bottom:0;font-size:10px;font-weight:700;color:#6aa8ff;text-shadow:1px 1px 1px #000}
.skill .cd{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:20px;font-weight:900;color:#fff;text-shadow:1px 1px 2px #000}
.skill.noma{filter:grayscale(.7) brightness(.65)}
.skill .tip{display:none;position:absolute;bottom:66px;left:50%;transform:translateX(-50%);width:190px;padding:8px 10px;
  background:linear-gradient(180deg,#241a10,#150e08);border:1px solid var(--line);box-shadow:0 4px 14px #000c;z-index:30;
  font-size:12px;color:#d8c8a0;line-height:1.5;text-align:left;cursor:default}
.skill .tip b{color:var(--gold-hi);font-size:13px}
.skill:hover .tip{display:block}
#buffs{display:flex;gap:4px;min-height:26px;margin-top:2px}
.buff{width:24px;height:24px;border:1px solid var(--gold-dk);background:#1a110a;font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 0 1px #000}
.buff em{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-size:9px;font-style:normal;color:#fff;text-shadow:1px 1px 1px #000}
#hero-dead{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,4,2,.72);
  font-family:var(--fd);font-size:22px;color:#ff8a7a;text-shadow:2px 2px 0 #000}
/* 召唤面板 */
#summon-panel{position:absolute;right:12px;bottom:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#summon-panel .tit{font-family:var(--fd);font-size:17px;color:var(--gold-hi);letter-spacing:2px}
#summon-btns{display:flex;gap:8px}
.summon{width:62px;padding:6px 4px 5px;border:2px solid var(--gold-dk);background:radial-gradient(circle at 40% 30%,#33261a,#150e08 75%);
  cursor:pointer;text-align:center;transition:.15s;box-shadow:inset 0 0 0 1px #000}
.summon:hover{border-color:var(--gold-hi);transform:translateY(-3px);box-shadow:0 0 12px rgba(255,210,110,.5)}
.summon .nm{font-size:12px;font-weight:700;color:#e8dcc0}
.summon .hot{font-size:10px;color:#9a8a66}
.summon .cost{font-size:11px;font-weight:900;color:var(--gold-hi);margin-top:2px}
.summon.dis{filter:grayscale(.8) brightness(.55);cursor:default;transform:none!important;box-shadow:none!important}
#supply-tx{font-size:11px;color:#b8a678}
#gc-hint{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);padding:6px 18px;font-size:14px;
  color:#bfe6ff;background:rgba(10,16,24,.85);border:1px solid #2a5a8a;box-shadow:0 0 0 1px #000;display:none}
/* ---------- 开始界面 ---------- */
#start{position:absolute;inset:0;z-index:20;
  background:radial-gradien.........完整代码请登录后点击上方下载按钮下载查看