模仿王者荣耀英雄联盟游戏代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由glm-5.3-flash ai生成，可能有错误，仅供参考：点击查看提示词
代码描述：模仿王者荣耀英雄联盟游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>峡谷争锋 · RIFT CLASH</title>
<style>
:root{
  --gold:#c8aa6e; --gold2:#f0e6d2; --goldD:#785a28; --blue:#4aa3e8; --red:#e8554d;
  --hp:#2ecc5b; --mp:#3f8ee8; --xp:#a86ee8; --warn:#e0483a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0a0f1a;color:#e8e4d8;
  font-family:'Trebuchet MS','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#stage{position:fixed;inset:0;z-index:0}
#stage canvas{display:block;touch-action:none}
#stage.dead{filter:grayscale(.7) brightness(.72)}
.hidden{display:none!important}
body.atkcursor{cursor:crosshair}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0c1420}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8a6d3b,#5a4a28);border-radius:4px;border:2px solid #0c1420}
::-webkit-scrollbar-thumb:hover{background:#c8aa6e}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;background:rgba(4,8,14,.55)}
.panel{background:linear-gradient(180deg,#101a2a,#0a1220);border:1px solid var(--goldD);
  box-shadow:0 0 0 1px rgba(200,170,110,.22),0 14px 44px rgba(0,0,0,.65);padding:18px;border-radius:6px}
.panel.small{max-width:92vw;max-height:90vh;overflow:auto}
.btn{display:inline-block;background:linear-gradient(180deg,#1a2434,#101a28);border:1px solid var(--goldD);
  color:var(--gold2);padding:8px 18px;font-size:14px;border-radius:4px;cursor:pointer;letter-spacing:1px}
.btn:hover{border-color:var(--gold);box-shadow:0 0 10px rgba(200,170,110,.35)}
.btn.big{font-size:18px;padding:12px 40px}
.btn.sm{padding:4px 10px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
h1,h2,h3,h4{color:var(--gold);letter-spacing:2px}
.hint{font-size:11px;color:#8a8676;line-height:1.7}

/* ---------- loading / error ---------- */
#loading,#err{z-index:110;background:#0a0f1a}
#loading .panel,#err .panel{text-align:center;min-width:300px}
#loading p{margin-top:10px;color:#b8b2a0}

/* ---------- top bar ---------- */
#topbar{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:12px;
  padding:5px 16px;background:linear-gradient(180deg,rgba(8,14,24,.95),rgba(8,14,24,.78));
  border:1px solid var(--goldD);border-top:none;border-radius:0 0 8px 8px;font-size:14px}
#topbar .tbScore{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:700}
#topbar .tbScore.blue{color:var(--blue)} #topbar .tbScore.red{color:var(--red)}
#tMid{display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:86px}
#tTime{font-size:16px;font-weight:700;color:var(--gold2)}
#tWave{font-size:10px;color:#9a9484}
#tTow{font-size:12px;color:#b8b2a0}
.tbBtn{background:#101a28;border:1px solid var(--goldD);color:var(--gold2);font-size:12px;padding:3px 10px;border-radius:4px;cursor:pointer}
.tbBtn:hover{border-color:var(--gold)}

/* ---------- bottom HUD ---------- */
#bottombar{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);z-index:20;
  background:linear-gradient(180deg,rgba(10,16,26,.94),rgba(6,10,18,.96));border:1px solid var(--goldD);
  border-radius:8px;padding:6px 10px 8px;box-shadow:0 0 0 1px rgba(200,170,110,.18),0 8px 30px rgba(0,0,0,.5)}
#xpWrap{width:100%;height:4px;background:#141c28;border-radius:2px;margin-bottom:5px;overflow:hidden}
#xpFill{height:100%;width:0%;background:linear-gradient(90deg,#7c4fd8,#b088f0)}
#bbRow{display:flex;align-items:flex-start;gap:10px}
#portraitWrap{position:relative;width:74px;height:74px}
#portraitCv{width:72px;height:72px;border:2px solid var(--goldD);border-radius:6px;background:#0c1420}
#lvlBadge{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;
  background:#141c28;border:2px solid var(--gold);color:var(--gold2);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
#midCol{width:322px}
.bar{position:relative;width:100%;height:17px;background:#10161f;border:1px solid #34342c;border-radius:3px;overflow:hidden;margin:3px 0}
.bar>div{position:absolute;left:0;top:0;bottom:0;width:50%;transition:width .12s}
.hpBar>div{background:linear-gradient(180deg,#42e06e,#1d9c46)}
.mpBar>div{background:linear-gradient(180deg,#4f9be8,#2a5fa8)}
.bar span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:16px;color:#fff;text-shadow:0 1px 2px #000}
#skillRow{display:flex;align-items:flex-start;margin-top:4px}
.skill{position:relative;width:44px;height:44px;border:1px solid #6a5630;border-radius:4px;background:#0d1520;margin-right:6px;flex:none}
.skill canvas{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);border-radius:3px}
.skill .cdMask{position:absolute;inset:0;border-radius:4px;pointer-events:none}
.skill .cdSec{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}
.skill .skKey{position:absolute;left:3px;top:1px;font-size:10px;color:var(--gold);text-shadow:0 1px 1px #000;pointer-events:none}
.skill .skPips{position:absolute;bottom:2px;left:3px;display:flex;gap:2px;pointer-events:none}
.skill .skPips i{width:5px;height:3px;background:#3a4a5a;border-radius:1px;display:block}
.skill .skPips i.on{background:var(--gold)}
.skill .skPlus{position:absolute;right:-5px;top:-5px;width:17px;height:17px;border-radius:50%;background:#14301c;
  border:1px solid var(--gold);color:var(--gold2);font-size:13px;line-height:15px;text-align:center;cursor:pointer;padding:0;z-index:2}
.skill .skPlus:hover{background:#245a2c}
.skill.nomana canvas{filter:grayscale(.55) brightness(.72)}
.skill.ready{box-shadow:0 0 7px rgba(200,170,110,.55)}
.skill.shake{animation:skShake .25s}
@keyframes skShake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
#rightCol{width:236px}
#itemRow{display:flex;flex-wrap:wrap;width:240px;float:left}
.islot{width:34px;height:34px;border:1px dashed #4a4230;border-radius:4px;background:#0c1420;position:relative;margin:2px;cursor:pointer}
.islot.filled{border:1px solid var(--goldD);border-radius:4px}
.islot .g{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border-radius:3px}
#statRow{clear:both;padding-top:3px;font-size:12px;color:#cfc9b8;line-height:1.6}
#statRow b{color:var(--gold);font-size:14px}
#statRow .sr{margin-right:10px;white-space:nowrap}
#statRow .sr.ad{color:#f0d8a0}#statRow .sr.ap{color:#b088f0}#statRow .sr.ms{color:#8fd0f0}

/* ---------- minimap ---------- */
#minimapWrap{position:fixed;right:12px;bottom:12px;z-index:20;border:2px solid var(--goldD);border-radius:6px;
  background:#0a0f18;box-shadow:0 0 0 1px rgba(200,170,110,.2),0 6px 24px rgba(0,0,0,.55);overflow:hidden}
#minimap{display:block;width:200px;height:200px;cursor:pointer}

/* ---------- announce / damage texts / castbar ---------- */
#announce{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:25;text-align:center;pointer-events:none}
.toast{background:rgba(6,10,18,.85);border:1px solid var(--goldD);padding:4px 16px;margin:3px auto;border-radius:3px;
  font-size:14px;color:var(--gold2);text-shadow:0 1px 2px #000;width:max-content;max-width:80vw;
  animation:toastIn .25s ease-out,toastOut .6s ease-in 3.2s forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px)}}
#dmgLayer{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.dmg{position:absolute;left:0;top:0;font-size:14px;font-weight:700;text-shadow:0 1px 2px #000,#0 0 6px #000;pointer-events:none;will-change:transform,opacity}
#castbar{position:fixed;bottom:118px;left:50%;transform:translateX(-50%);z-index:22;width:280px;height:24px;
  border:1px solid var(--gold);border-radius:4px;background:rgba(8,12,20,.85);overflow:hidden}
#castFill{height:100%;width:0%;background:linear-gradient(90deg,#2a6ad8,#6ab0f0)}
#castText{position:absolute;inset:0;text-align:center;font-size:12px;line-height:23px;color:#fff;text-shadow:0 1px 2px #000}

/* ---------- death overlay ---------- */
#deathOv{position:fixed;inset:0;z-index:24;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(60,8,8,.25),rgba(10,4,4,.55))}
#deathBox{text-align:center}
#deathNum{font-size:72px;font-weight:700;color:var(--warn);text-shadow:0 0 24px rgba(224,72,58,.6)}
#deathBox>div:last-child{font-size:15px;color:#d8c8b8;letter-spacing:4px}

/* ---------- touch UI ---------- */
#touchUI{position:fixed;right:224px;bottom:16px;z-index:26;display:none;flex-direction:column;align-items:center}
body.touch #touchUI{display:flex}
.tbtn{position:relative;width:50px;height:50px;border-radius:50%;border:2px solid var(--goldD);background:rgba(10,16,26,.82);
  color:var(--gold2);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:5px 0;touch-action:none}
.tbtn:active{background:rgba(40,60,90,.9)}
.tbtn .tplus{position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;background:#14301c;
  border:1px solid var(--gold);color:var(--gold2);font-size:12px;line-height:16px}
.tbtn .tcd{position:absolute;inset:0;border-radius:50%;pointer-events:none}
#tcLeft{position:fixed;left:14px;bottom:16px;z-index:26;display:none;flex-direction:column}
body.touch #tcLeft{display:flex}

/* ---------- shop ---------- */
#shopOv{align-items:center;justify-content:center}
#shopBox{width:min(680px,94vw);max-height:88vh;display:flex;flex-direction:column}
#shopHead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
#shopHead h3{flex:1}
#shopGold{color:var(--gold);font-size:16px;font-weight:700}
#shopNote{font-size:12px;color:var(--warn);min-height:16px;margin-bottom:4px}
#shopTabs{display:flex;gap:6px;margin-bottom:8px}
.stab{padding:4px 14px;border:1px solid #4a4230;border-radius:4px;background:#0d1520;color:#b8b2a0;font-size:13px;cursor:pointer}
.stab.on{border-color:var(--gold);color:var(--gold2);background:#1a2434}
#shopGrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px;padding-right:4px}
.scard{border:1px solid #3a3a30;border-radius:5px;background:#0d1520;padding:8px;display:flex;gap:8px}
.scard .sico{width:40px;height:40px;flex:none;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;border:1px solid #5a4a28}
.scard .sinfo{flex:1;min-width:0}
.scard .sname{font-size:13px;color:var(--gold2)}
.scard .sstat{font-size:11px;color:#9ab090;margin:2px 0;line-height:1.4}
.scard .sbuy{margin-top:3px}
#shopOwned{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;min-height:40px}
.oitem{border:1px solid var(--goldD);border-radius:4px;padding:4px 8px;font-size:12px;background:#101a28;color:var(--gold2);cursor:pointer}
.oitem:hover{border-color:var(--warn);color:#ffb0a0}
#shopBox h4{margin-top:8px;font-size:12px;color:#9a9484}

/* ---------- scoreboard ---------- */
#scoreOv{pointer-events:none;background:transparent;align-items:center}
#scoreBox{min-width:min(620px,94vw);max-height:86vh;overflow:auto}
#scoreBody table{border-collapse:collapse;width:100%;font-size:13px}
#scoreBody th{color:#9a9484;font-weight:400;text-align:left;padding:3px 8px;border-bottom:1px solid #3a3a30;font-size:11px}
#scoreBody td{padding:4px 8px;border-bottom:1px solid #222a38;color:#d8d2c0}
#scoreBody tr.me td{background:rgba(200,170,110,.08)}
#scoreBody .tname{font-weight:700}
#scoreBody .tblue{color:var(--blue)} #scoreBody .tred{color:var(--red)}
#scoreBody .ig{display:inline-block;width:18px;height:18px;border-radius:3px;border:1px solid #5a4a28;text-align:center;line-height:17px;font-size:11px;margin-right:2px}

/* ---------- pause / end ---------- */
#pauseOv .panel,#endOv .panel{min-width:320px}
.optRow{display:flex;align-items:center;gap:12px;margin:12px 0}
.optRow label{width:56px;color:#b8b2a0;font-size:13px}
.optRow input[type=range]{flex:1;accent-color:var(--gold)}
.optRow select{flex:1;background:#0d1520;color:var(--gold2);border:1px solid var(--goldD);padding:5px;border-radius:4px}
.pauseBtns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
#endTitle{font-size:34px;text-align:center;margin-bottom:8px}
#endTitle.win{color:var(--gold);text-shadow:0 0 18px rgba(200,170,110,.6)}
#endTitle.lose{color:var(--warn);text-shadow:0 0 18px rgba(224,72,58,.5)}
#endStats{font-size:14px;color:#d8d2c0;line-height:1.9;margin:8px 0}
#endStats b{color:var(--gold)}
#endBest{font-size:12px;color:#9a9484;text-align:center;margin-bottom:6px}

/* ---------- menu ---------- */
#menuOv{background:radial-gradient(ellipse at 50% 30%,rgba(20,40,70,.5),rgba(4,8,14,.88))}
#menuBox{width:min(860px,96vw);max-height:94vh;overflow-y:auto;text-align:center;padding:22px 16px}
#menuBox h1{font-size:42px;letter-spacing:8px;text-shadow:0 0 24px rgba(200,170,110,.45)}
#menuBox h1 span{display:block;font-size:15px;letter-spacing:12px;color:#9a9484;margin-top:4px}
#menuBox .sub{color:#9a9484;font-size:13px;margin:8px 0 16px}
#heroCards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.hcard{width:236px;border:1px solid #4a4230;background:linear-gradient(180deg,#121c2c,#0b1320);padding:12px;border-radius:6px;cursor:pointer;text-align:left;transition:border-color .15s}
.hcard:hover{border-color:var(--goldD)}
.hcard.sel{border-color:var(--gold);box-shadow:0 0 16px rgba(200,170,110,.35)}
.hcard .hname{font-size:19px;font-weight:700;color:var(--gold2)}
.hcard .hrole{font-size:12px;color:#9a9484;margin-bottom:8px}
.hcard .hcv{width:56px;height:56px;border:2px solid var(--goldD);border-radius:6px;float:right;margin-left:8px}
.hcard .sb{height:6px;background:#1a2230;border-radius:3px;margin:4px 0;overflow:hidden}
.hcard .sb i{display:block;height:100%;border-radius:3px}
.hcard .sbl{font-size:10px;color:#8a8676;display:flex;justify-content:space-between}
.hcard .msRow{display:flex;gap:6px;font-size:11px;color:#b8b2a0;margin:3px 0;clear:both}
.hcard .msRow b{color:var(--gold);flex:none;width:14px}
.hcard .msRow span{color:#9a9484}
#menuOpts{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.optGroup{display:flex;align-items:center;gap:10px}
.optGroup label{color:#b8b2a0;font-size:14px}
#diffSeg{display:flex;border:1px solid var(--goldD);border-radius:4px;overflow:hidden}
#diffSeg button{background:#0d1520;border:none;color:#9a9484;padding:8px 20px;font-size:14px;cursor:pointer;border-right:1px solid #3a3a30}
#diffSeg button:last-child{border-right:none}
#diffSeg button.on{background:#2a3a54;color:var(--gold2)}
#bestLine{font-size:13px;color:#9a9484;margin-bottom:10px}
#menuHint{font-size:11px;color:#6a665a;line-height:1.8;border-top:1px solid #222a38;padding-top:10px}

/* ---------- narrow screens ---------- */
@media (max-width:900px){
  #bottombar{transform:translateX(-50%) scale(.72);transform-origin:bottom center;bottom:-6px}
  #minimap{width:140px;height:140px}
  #minimapWrap{right:8px;bottom:8px}
  #topbar{font-size:12px;gap:8px;padding:4px 10px}
  #topbar .tbScore{font-size:15px}
  #touchUI{right:8px;bottom:160px}
  #tcLeft{bottom:150px}
  .toast{font-size:12px}
  #castbar{bottom:86px;width:220px}
  #deathNum{font-size:52px}
  #menuBox h1{font-size:30px}
}
@media (max-width:560px){
  #tTow{display:none}
  #topbar{gap:4px;padding:3px 6px;max-width:97vw;font-size:11px}
  #topbar .tbScore{font-size:13px;gap:3px}
  #topbar .tbScore span{white-space:nowrap}
  #topbar .tbScore span[style]{font-size:9px!important}
  #tMid{min-width:64px}
  #tTime{font-size:13px}
  #tWave{font-size:8px}
  #topbar .tbBtn{white-space:nowrap;padding:2px 5px;font-size:10px}
  #bottombar{bottom:0}
  #minimapWrap{bottom:84px;right:6px}
  #touchUI{bottom:230px;right:6px}
  #tcLeft{bottom:220px}
  #announce{top:56px;width:92vw}
  #castbar{bottom:96px}
}
@media (max-width:520px){
  #bottombar{transform:translateX(-50%) scale(.58)}
  #topbar .tbBtn{padding:2px 6px;font-size:11px}
  #topbar .tbScore{font-size:13px}
}
</style>
</head>
<body>
<div id="stage"></div>

<div id="loading" class="overlay"><div class="panel"><h2>峡谷争锋</h2><p>正在加载 Three.js 引擎（首次需访问 CDN）…</p></div></div>
<div id="err" class="overlay hidden"><div class="panel"><h2>加载失败</h2><p id="errMsg" class="hint">资源加载失败，请检查网络后刷新重试。</p><p style="margin-top:12px"><button class="btn" onclick="location.reload()">重新加载</button></p></div></div>

<div id="hud" class="hidden">
  <div id="topbar">
    <div class="tbScore blue"><span id="tKB">0</span><span style="font-size:11px">击杀</span></div>
    <div id="tMid"><span id="tTime">00:00</span><span id="tWave">首波 15s</span></div>
    <div class="tbScore red&quo.........完整代码请登录后点击上方下载按钮下载查看