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 rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#151009; --paper:#e9dcc0; --gold:#c8a45d; --gold-hi:#eec87e;
  --red:#b23a2c; --red-hi:#e05540; --blue:#31556e;
  --disp:'Ma Shan Zheng','KaiTi','STKaiti',serif;
  --body:'Noto Serif SC','SongTi SC','SimSun',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0d0b08;font-family:var(--body);color:var(--paper);user-select:none}
canvas{display:block}
#scene{position:fixed;inset:0;cursor:crosshair}
#vig{position:fixed;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at center,transparent 52%,rgba(8,5,3,.6) 100%)}
.hide{display:none!important}
/* ---------- panels ---------- */
.panel{background:linear-gradient(165deg,rgba(40,30,19,.94),rgba(20,15,10,.96));
  border:1px solid rgba(200,164,93,.35);border-radius:6px;
  box-shadow:0 10px 40px rgba(0,0,0,.55),inset 0 0 30px rgba(0,0,0,.4);position:relative}
.panel::before,.panel::after{content:'';position:absolute;width:14px;height:14px;border:0 solid var(--gold)}
.panel::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.panel::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
/* ---------- top bar ---------- */
#topbar{position:fixed;top:0;left:0;right:0;z-index:12;display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;background:linear-gradient(180deg,rgba(12,9,6,.88),rgba(12,9,6,.4) 70%,transparent);pointer-events:none}
#topbar>*{pointer-events:auto}
.brand{display:flex;align-items:baseline;gap:14px}
.brand h1{font-family:var(--disp);font-weight:400;font-size:30px;color:var(--gold-hi);letter-spacing:4px;text-shadow:0 2px 16px rgba(0,0,0,.8)}
#phaseTag{font-size:12px;letter-spacing:3px;color:#1d160e;background:linear-gradient(#e6c47c,#b98d45);padding:3px 10px;border-radius:2px;font-weight:600}
#roundTag{font-size:12px;color:#b99c63;letter-spacing:2px}
#force{display:flex;align-items:center;gap:8px;width:min(400px,36vw)}
.f-lab{font-family:var(--disp);font-size:18px}
.f-track{flex:1;height:10px;background:#274a63;border:1px solid rgba(200,164,93,.4);border-radius:2px;overflow:hidden}
#forceFill{height:100%;width:50%;background:linear-gradient(90deg,#7e241a,#e05540);transition:width .3s}
.f-num{font-size:12px;color:#c9b98d;width:34px;text-align:center}
.icon-btn{width:36px;height:36px;background:rgba(24,17,11,.8);border:1px solid rgba(200,164,93,.45);color:var(--gold-hi);
  font-family:var(--disp);font-size:17px;cursor:pointer;border-radius:4px;transition:.18s;margin-left:8px}
.icon-btn:hover{background:#3a2b18;transform:translateY(-2px);box-shadow:0 4px 14px rgba(200,164,93,.25)}
/* ---------- deploy panel ---------- */
#deployPanel{position:fixed;left:16px;bottom:16px;z-index:12;padding:14px 16px}
.dp-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.dp-head h2{font-family:var(--disp);font-weight:400;font-size:22px;color:var(--gold-hi);letter-spacing:3px}
#budgetVal{font-size:13px;color:#e5d5ae}
#budgetVal b{color:#ffb56b;font-size:18px;font-family:var(--disp)}
#cards{display:flex;gap:10px}
.card{width:80px;padding:12px 6px 9px;text-align:center;border:1px solid rgba(200,164,93,.3);background:rgba(15,11,8,.6);
  cursor:pointer;transition:.18s;position:relative;border-radius:4px}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.card.sel{border-color:var(--gold-hi);background:linear-gradient(rgba(178,58,44,.4),rgba(178,58,44,.12));
  box-shadow:0 0 18px rgba(224,85,64,.35);transform:translateY(-4px)}
.card.poor{opacity:.38;filter:grayscale(.7)}
.c-char{font-family:var(--disp);font-size:36px;color:#e8cf9a;line-height:1.1}
.card.sel .c-char{color:#ffb56b}
.c-name{font-size:12px;letter-spacing:3px;margin-top:2px}
.c-beat{font-size:10px;color:#b99c63;margin-top:3px}
.c-cost{position:absolute;top:-8px;right:-8px;background:#8e2b20;border:1px solid #d8a05a;color:#f4e3bd;font-size:11px;
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600}
.dp-hint{margin-top:11px;font-size:11px;color:#8f7c55;letter-spacing:1px}
/* ---------- command panel ---------- */
#cmdPanel{position:fixed;right:16px;bottom:16px;z-index:12;padding:16px 18px;text-align:center;min-width:210px}
.btn-war{font-family:var(--disp);font-size:30px;letter-spacing:10px;text-indent:10px;padding:9px 26px;
  background:linear-gradient(160deg,#b23a2c,#7e241a);color:#f7e7c3;border:1px solid #e0a25e;border-radius:4px;cursor:pointer;
  box-shadow:0 6px 20px rgba(178,58,44,.4),inset 0 0 14px rgba(255,200,120,.15);transition:.2s}
.btn-war:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 28px rgba(224,85,64,.55);filter:brightness(1.12)}
.btn-war:disabled{opacity:.4;filter:grayscale(.8);cursor:not-allowed}
.btn-war.small{font-size:21px;letter-spacing:6px;text-indent:6px;padding:7px 20px}
.btn-row{display:flex;gap:8px;justify-content:center;margin-top:10px}
.btn-sm{flex:1;font-family:var(--body);font-size:13px;letter-spacing:2px;padding:7px 0;background:rgba(24,17,11,.85);
  border:1px solid rgba(200,164,93,.45);color:#dcc48e;cursor:pointer;border-radius:3px;transition:.16s}
.btn-sm:hover{background:#3a2b18;color:var(--gold-hi)}
#cmdInfo{margin-top:10px;font-size:12px;color:#a08c5f;letter-spacing:1px}
/* ---------- feed ---------- */
#feed{position:fixed;top:66px;right:16px;z-index:11;display:flex;flex-direction:column;gap:6px;width:270px.........完整代码请登录后点击上方下载按钮下载查看