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>艾泽拉斯战记 · 三维即时策略</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>⚔️</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700;900&family=Cinzel:wght@600;800&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#e0b34c; --gold-d:#8a6a26; --gold-l:#ffe9a8;
  --panel:#181310; --line:#5c4a22;
  --ally:#58b6ff; --enemy:#ff6355;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none}
body{font-family:'Noto Serif SC','Songti SC',serif;color:#e8dcc0}
#app{position:fixed;inset:0}
#app canvas{display:block;cursor:crosshair}

.panel{
  background:linear-gradient(160deg,rgba(32,25,16,.94),rgba(15,11,8,.95));
  border:1px solid var(--line);
  box-shadow:0 0 0 1px #000, inset 0 0 0 1px rgba(224,179,76,.16), 0 6px 22px rgba(0,0,0,.55);
  position:relative;
}
.panel::before,.panel::after{content:'';position:absolute;width:9px;height:9px;border:2px solid var(--gold);pointer-events:none}
.panel::before{left:-3px;top:-3px;border-right:0;border-bottom:0}
.panel::after{right:-3px;bottom:-3px;border-left:0;border-top:0}

#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud .panel,#hud button{pointer-events:auto}

#topbar{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.chips{display:flex;gap:8px;padding:7px 10px}
.chip{display:flex;align-items:center;gap:7px;padding:3px 12px;border-left:1px solid rgba(224,179,76,.25);white-space:nowrap}
.chip:first-child{border-left:0}
.chip .ico{font-size:15px;filter:drop-shadow(0 0 4px rgba(224,179,76,.6))}
.chip .v{font-family:Cinzel,'Noto Serif SC',serif;font-weight:800;font-size:17px;color:var(--gold-l);letter-spacing:1px}
.chip .l{font-size:11px;opacity:.65;letter-spacing:2px}
#waveBox .v{color:#ffb35c}
.iconbtn{width:38px;height:38px;background:linear-gradient(160deg,#2b2113,#14100a);border:1px solid var(--line);color:var(--gold);font-size:17px;cursor:pointer;transition:.15s;box-shadow:inset 0 0 0 1px rgba(224,179,76,.15)}
.iconbtn:hover{border-color:var(--gold);box-shadow:0 0 12px rgba(224,179,76,.45),inset 0 0 0 1px rgba(224,179,76,.3);transform:translateY(-1px)}

#mmWrap{position:absolute;left:12px;bottom:12px;padding:8px}
#minimap{display:block;width:172px;height:172px;background:#0b1420;border:1px solid #000;cursor:pointer}
#mmLabel{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:4px;color:var(--gold);background:#14100a;padding:0 8px;border:1px solid var(--line)}
#log{position:absolute;left:12px;bottom:206px;width:280px;display:flex;flex-direction:column-reverse;gap:3px;pointer-events:none}
.logitem{font-size:12px;padding:4px 9px;background:rgba(10,8,5,.72);border-left:3px solid var(--gold);color:#e8dcc0;animation:logfade 7s forwards}
.logitem.bad{border-left-color:var(--enemy);color:#ffc9c2}
.logitem.good{border-left-color:#6fdc6f;color:#d2ffd0}
@keyframes logfade{0%{opacity:0;transform:translateX(-14px)}6%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

#card{position:absolute;right:12px;bottom:12px;width:332px;padding:10px 12px 12px}
#cardHead{font-family:'Ma Shan Zheng',serif;font-size:19px;color:var(--gold);letter-spacing:3px;border-bottom:1px solid rgba(224,179,76,.3);padding-bottom:5px;margin-bottom:7px;display:flex;justify-content:space-between;align-items:baseline}
#selinfo{font-size:11px;color:#cbbf9d;letter-spacing:0;font-family:'Noto Serif SC'}
#cardSec{font-size:11px;letter-spacing:3px;color:#9d8c5e;margin:8px 0 5px}
.btnrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cbtn{position:relative;height:64px;background:linear-gradient(160deg,#2e2414,#171106);border:1px solid var(--line);color:#e8dcc0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:.13s;overflow:hidden}
.cbtn .g{font-family:'Ma Shan Zheng',serif;font-size:24px;line-height:1;color:var(--gold-l);text-shadow:0 0 8px rgba(224,179,76,.55)}
.cbtn .n{font-size:11px;letter-spacing:1px}
.cbtn .c{font-family:Cinzel;font-size:10px;color:var(--gold);opacity:.9}
.cbtn:hover{border-color:var(--gold);box-shadow:0 0 14px rgba(224,179,76,.4),inset 0 0 10px rgba(224,179,76,.15);transform:translateY(-2px)}
.cbtn:active{transform:translateY(0)}
.cbtn.off{filter:grayscale(.9) brightness(.6);cursor:not-allowed}
.cbtn.active{border-color:#ffd76a;box-shadow:0 0 16px rgba(255,215,106,.7),inset 0 0 12px rgba(255,215,106,.3)}
.cbtn .cd{position:absolute;left:0;top:0;width:100%;height:0%;background:rgba(0,0,0,.68);pointer-events:none;transition:height .1s linear}
.cbtn .key{position:absolute;top:2px;right:4px;font-family:Cinzel;font-size:9px;color:#8d7c50}

#dmg{position:fixed;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.dnum{position:absolute;font-family:Cinzel,'Noto Serif SC',serif;font-weight:800;font-size:15px;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.6);animation:rise .95s ease-out forwards;will-change:transform,opacity;white-space:nowrap}
.dnum.hit{color:#ffd76a}.dnum.hurt{color:#ff7a6b}.dnum.heal{color:#7dffa0}.dnum.gold{color:#ffe08a;font-size:13px}
.dnum.big{font-size:24px}
@keyframes rise{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}12%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}
#announce{position:fixed;top:20%;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;z-index:9;opacity:0}
#announce.show{animation:ann 3s ease forwards}
#annT{font-family:'Ma Shan Zheng',serif;font-size:56px;color:var(--gold-l);letter-spacing:10px;text-shadow:0 0 24px rgba(224,179,76,.75),0 3px 4px #000}
#annS{font-size:14px;letter-spacing:6px;color:#e8dcc0;margin-top:4px;text-shadow:0 1px 3px #000}
@keyframes ann{0%{opacity:0;transform:translateX(-50%) scale(.8)}12%{opacity:1;transform:translateX(-50%) scale(1.04)}20%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
#tip{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:2px;color:#ffe9a8;background:rgba(10,8,5,.7);border:1px solid rgba(224,179,76,.4);padding:6px 18px;z-index:6;transition:opacity 1s;pointer-events:none}

#selbox{position:fixed;border:1px solid #ffd76a;background:rgba(255,215,106,.1);z-index:4;display:none;pointer-events:none;box-shadow:0 0 8px rgba(255,215,106,.35) inset}

.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,rgba(20,14,6,.45),rgba(5,3,1,.88));backdrop-filter:blur(2px)}
.frame{max-width:760px;width:92%;padding:40px 52px;text-align:center}
.kicker{font-size:12px;letter-spacing:8px;color:#b39a5d;margin-bottom:10px}
h1.title{font-family:'Ma Shan Zheng',serif;font-size:74px;line-height:1.1;color:var(--gold);letter-spacing:8px;text-sha.........完整代码请登录后点击上方下载按钮下载查看