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

代码语言：html
所属分类：其他
代码由qwen-4 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,viewport-fit=cover">
<title>峡谷争锋 · RIFT CLASH</title>
<style>
:root{
  --blue:#2e7dff;--blue2:#4aa3ff;--red:#ff3b4e;--gold:#ffc94d;--gold2:#c89b3c;
  --xp:#b06cff;--hp:#3ddc68;--mp:#3fa9f5;--warn:#ff4040;
  --bg:#070d1a;--panel:rgba(9,16,32,.94);--panel2:rgba(14,24,46,.96);
  --line:#7a5c2e;--line2:#2a3d5f;--txt:#dfe8f5;--dim:#8fa3c0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#0a1428;border-radius:4px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold2),#3a5a8f);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold),var(--blue2))}
canvas{display:block}
#stage{position:fixed;inset:0}
#gl{position:absolute;inset:0;width:100%;height:100%}
#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(2,6,14,.55) 100%);transition:box-shadow .3s}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;outline:none;color:var(--txt)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 12px 40px rgba(0,0,0,.6),inset 0 0 30px rgba(46,125,255,.05)}
.gbtn{background:linear-gradient(180deg,#1a2c4e,#0e1a33);border:1px solid var(--gold2);border-radius:6px;
  padding:8px 18px;font-weight:700;letter-spacing:2px;color:var(--gold);transition:.15s}
.gbtn:hover{box-shadow:0 0 14px rgba(255,201,77,.45);border-color:var(--gold);transform:translateY(-1px)}
.gbtn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.bbtn{background:linear-gradient(180deg,#12305e,#0a1c3a);border:1px solid var(--blue);border-radius:6px;
  padding:8px 18px;font-weight:700;letter-spacing:2px;color:#cfe4ff;transition:.15s}
.bbtn:hover{box-shadow:0 0 14px rgba(74,163,255,.5)}
#loading,#cdnError{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;gap:18px;
  align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#101d3a,#05080f 75%)}
.loadTitle{font-size:34px;font-weight:900;letter-spacing:8px;background:linear-gradient(90deg,var(--gold),#fff,var(--blue2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.spinner{width:46px;height:46px;border-radius:50%;border:3px solid #1d3358;border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#cdnError{display:none}
.errBox{max-width:420px;text-align:center;padding:28px;line-height:1.8}
#menu{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 120%,rgba(46,125,255,.16),transparent 60%),
             radial-gradient(ellipse at 50% -20%,rgba(255,59,78,.12),transparent 55%),rgba(4,8,16,.72);
  backdrop-filter:blur(2px);overflow:auto}
.menuInner{width:min(980px,96vw);padding:26px 10px;text-align:center}
.gameTitle{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:10px;
  background:linear-gradient(90deg,var(--gold) 10%,#fff5d8 40%,var(--blue2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(255,201,77,.15);animation:titleGlow 4s ease-in-out infinite}
@keyframes titleGlow{50%{filter:brightness(1.25)}}
.gameSub{letter-spacing:12px;color:var(--dim);margin:6px 0 20px;font-size:13px}
.cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hcard{width:280px;padding:16px;text-align:left;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.hcard:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(0,0,0,.7),0 0 22px rgba(74,163,255,.25)}
.hcard.sel{border-color:var(--gold);box-shadow:0 0 26px rgba(255,201,77,.4)}
.hcard.sel::after{content:"已选择";position:absolute;top:10px;right:10px;font-size:11px;color:#081018;
  background:var(--gold);padding:2px 8px;border-radius:10px;font-weight:800}
.hcard .pt{width:100%;height:130px;border-radius:6px;margin-bottom:10px;border:1px solid var(--line2);object-fit:cover}
.hname{font-size:21px;font-weight:900;letter-spacing:3px}
.hrole{font-size:12px;color:var(--gold);letter-spacing:2px;margin:2px 0 8px}
.hskill{font-size:12px;color:var(--dim);line-height:1.65}
.hskill b{color:var(--txt)}
.diffRow{display:flex;gap:10px;justify-content:center;margin:20px 0 14px}
.diffBtn{padding:8px 26px;border-radius:20px;border:1px solid var(--line2);background:#0d1830;color:var(--dim);font-weight:700;letter-spacing:2px;transition:.15s}
.diffBtn.sel{border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px rgba(255,201,77,.35)}
#startBtn{font-size:18px;padding:12px 60px;margin-top:6px}
.bestLine{margin-top:14px;font-size:12px;color:var(--dim);letter-spacing:1px}
.helpFoot{margin-top:14px;font-size:11px;color:#5c7092;line-height:1.8}
#topbar{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:14px;
  padding:6px 18px;border-radius:0 0 12px 12px;border-top:none;font-size:14px}
.tbScore{font-weight:900;font-size:18px;min-width:26px;text-align:center}
.tbBlue{color:var(--blue2)}.tbRed{color:var(--red)}
#timeTxt{font-weight:800;letter-spacing:1px;color:var(--gold);min-width:52px;text-align:center}
.tbTowers{font-size:11px;color:var(--dim)}
.iconBtn{width:32px;height:32px;border-radius:6px;background:#0d1a33;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.iconBtn:hover{border-color:var(--gold2);box-shadow:0 0 8px rgba(255,201,77,.3)}
.iconBtn svg{width:18px;height:18px;fill:var(--dim)}
.iconBtn:hover svg{fill:var(--gold)}
#announce{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:35;pointer-events:none;
  font-size:20px;font-weight:900;letter-spacing:4px;color:var(--gold);text-shadow:0 2px 10px #000;
  opacity:0;transition:opacity .3s;text-align:center;max-width:80vw}
#killfeed{position:fixed;top:56px;right:230px;z-index:35;pointer-events:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.kfItem{background:rgba(8,14,28,.85);border:1px solid var(--line2);border-radius:5px;padding:3px 10px;font-size:12px;animation:kfIn .25s ease-out}
@keyframes kfIn{from{transform:translateX(30px);opacity:0}}
#hud{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:flex-end;gap:10px;
  padding:10px 14px;max-width:97vw}
.portraitWrap{position:relative;width:64px;height:64px;flex:none}
#portrait{width:64px;height:64px;border-radius:8px;border:2px solid var(--gold2)}
#lvlBadge{position:absolute;bottom:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:#0a1428;
  border:2px solid var(--gold);color:var(--gold);font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.barsWrap{display:flex;flex-direction:column;gap:4px;width:170px;flex:none}
.bar{position:relative;height:15px;background:#0a1220;border:1px solid #20304e;border-radius:3px;overflow:hidden}
.bar.mp{height:11px}
.barFill{position:absolute;inset:0;transform-origin:left;transition:transform .12s}
#hpFill{background:linear-gradient(180deg,#5ff08a,#23b34e)}
#mpFill{background:linear-gradient(180deg,#6cc4ff,#1f7fd6)}
.barTxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
  color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.5px}
#brushTag{font-size:10px;color:#9fe8b0;letter-spacing:2px;height:12px}
.skillsWrap{display:flex;gap:6px}
.skill{position:relative;width:54px;height:54px;border-radius:7px;border:1px solid var(--line2);background:#0a1428 center/cover;cursor:pointer;flex:none}
.skill .key{position:absolute;left:3px;top:2px;font-size:10px;font-weight:900;color:#fff;text-shadow:0 1px 2px #000;z-index:3}
.skill .cdmask{position:absolute;inset:0;border-radius:6px;z-index:2;pointer-events:none}
.skill .cdtxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#fff;text-shadow:0 1px 3px #000;z-index:3;pointer-events:none}
.skill .plus{position:absolute;top:-8px;right:-8px;width:19px;height:19px;border-radius:50%;background:var(--gold);color:#081018;
  font-size:14px;font-weight:900;z-index:4;display:flex;align-items:center;justify-content:center;border:1px solid #fff3;
  box-shadow:0 0 8px rgba(255,201,77,.7);animation:plusPulse 1.2s infinite}
@keyframes plusPulse{50%{box-shadow:0 0 14px rgba(255,201,77,1)}}
.skill.locked{filter:grayscale(1) brightness(.45)}
.skill.nomana::after{content:"";position:absolute;inset:0;background:rgba(30,80,200,.45);border-radius:6px;z-index:1}
.skill .rank{position:absolute;bottom:2px;right:4px;font-size:9px;color:var(--gold);z-index:3;font-weight:800}
.sumsWrap{display:flex;flex-direction:column;gap:5px}
.sum{position:relative;width:40px;height:40px;border-radius:6px;border:1px solid var(--line2);background:#0a1428 center/cover;cursor:pointer}
.sum .key{position:absolute;left:2px;top:1px;font-size:9px;font-weight:900;color:#fff;text-shadow:0 1px 2px #000;z-index:3}
.sum .cdmask{position:absolute;inset:0;border-radius:5px;z-index:2;pointer-events:none}
.sum .cdtxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;z-index:3;pointer-events:none;text-shadow:0 1px 2px #000}
.itemsWrap{display:grid;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(2,32px);gap:4px}
.islot{width:32px;height:32px;border-radius:5px;border:1px solid #22365a;background:#0a1428 center/cover}
.islot.filled{border-color:var(--gold2)}
.statsWrap{display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:74px}
.goldTxt{color:var(--gold);font-weight:900;font-size:15px}
.kdaTxt{color:var(--txt);font-weight:700}
.csTxt{color:var(--dim)}
#minimapWrap{position:fixed;right:12px;bottom:12px;z-index:25;padding:5px;border-radius:8px}
#minimap{width:200px;height:200px;border-radius:5px;cursor:pointer}
#touchExtras{position:fixed;left:10px;bottom:120px;z-index:32;display:none;flex-direction:column;gap:8px}
.tbtn{width:44px;height:44px;border-radius:50%;background:rgba(12,22,44,.9);border:1px solid var(--gold2);
  color:var(--gold);font-weight:900;font-size:15px}
.tbtn.on{background:var(--gold);color:#081018}
body.touch #touchExtras{display:flex}
#deathOv{position:fixed;inset:0;z-index:40;pointer-events:none;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(120,10,20,.28),rgba(60,4,10,.62))}
#deathOv .dTitle{font-size:30px;font-weight:900;letter-spacing:8px;color:#ff8090;text-shadow:0 0 20px #f00}
#deathT{font-size:52px;font-weight:900;color:#fff}
#shop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;width:min(880px,95vw);height:min(560px,88vh);
  display:flex;flex-direction:column;padding:16px}
.shopHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.shopTitle{font-size:18px;font-weight:900;letter-spacing:4px;color:var(--gold)}
#shopGold{color:var(--gold);font-weight:900;font-size:16px}
#shopNote{font-size:11px;color:var(--warn);margin-left:10px}
.shopBody{display:flex;gap:12px;flex:1;min-height:0}
.shopCats{display:flex;flex-direction:column;gap:6px;width:92px;flex:none}
.catBtn{padding:9px 6px;border-radius:6px;background:#0d1830;border:1px solid var(--line2);color:var(--dim);font-weight:700;letter-spacing:2px;font-size:13px}
.catBtn.sel{color:var(--gold);border-color:var(--gold2);background:#14224a}
#shopItems{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;align-content:start;padding-right:4px}
.shopItem{display:flex;gap:8px;padding:8px;border-radius:7px;background:#0c1730;border:1px solid var(--line2);align-items:center}
.shopItem img{width:38px;height:38px;border-radius:5px;flex:none}
.siInfo{flex:1;min-width:0}
.siName{font-size:13px;font-weight:800}
.siStats{font-size:10px;color:var(--dim);line-height:1.4}
.siCost{font-size:12px;color:var(--gold);font-weight:800}
.buyBtn{padding:5px 10px;border-radius:5px;background:linear-gradient(180deg,#1c3a10,#0f2a08);border:1px solid #4caf50;color:#9fe8a0;font-weight:800;font-size:12px}
.buyBtn:disabled{opacity:.35;cursor:not-allowed}
.shopOwned{width:180px;flex:none;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.ownRow{display:flex;align-items:center;gap:7px;background:#0c1730;border:1px solid var(--line2);border-radius:6px;padding:5px 7px}
.ownRow img{width:30px;height:30px;border-radius:4px}
.ownRow .n{flex:1;font-size:11px;font-weight:700}
.sellBtn{padding:3px 8px;font-size:11px;border-radius:4px;background:#2a1010;border:1px solid #a04040;color:#ff9a9a;font-weight:700}
.sellBtn:disabled{opacity:.35}
.xBtn{width:30px;height:30px;border-radius:6px;background:#1a0f14;border:1px solid #a04040;color:#ff9a9a;font-weight:900;font-size:15px}
#scoreOv{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:55;width:min(760px,94vw);max-height:86vh;overflow:auto;padding:18px}
.scoreTitle{text-align:center;font-weight:900;letter-spacing:6px;color:var(--gold);margin-bottom:12px;font-size:17px}
.scoreTable{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:14px}
.scoreTable th{color:var(--dim);font-weight:700;padding:5px 6px;text-align:left;border-bottom:1px solid var(--line2);font-size:11px;letter-spacing:1px}
.scoreTable td{padding:6px;border-bottom:1px solid #14203a}
.scoreTable img{width:24px;height:24px;border-radius:4px;vertical-align:middle;margin-right:2px}
.teamHeadBlue{color:var(--blue2);font-weight:900;letter-spacing:2px;padding:4px 0}
.teamHeadRed{color:var(--red);font-weight:900;letter-spacing:2px;padding:4px 0}
#pauseOv,#endOv,#helpOv{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(3,6,12,.7);backdrop-filter:blur(3px)}
.menuBox{width:min(420px,92vw);padding:26px;display:flex;flex-direction:column;gap:14px}
.menuBox h2{text-align:center;letter-spacing:6px;color:var(--gold);font-size:20px}
.setRow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--dim)}
.setRow select,.setRow input[type=range]{flex:1;max-width:180px}
select{background:#0d1830;color:var(--txt);border:1px solid var(--line2);border-radius:5px;padding:6px}
input[type=range]{accent-color:var(--gold)}
#endOv .menuBox{width:min(480px,94vw)}
#endTitle{text-align:center;font-size:38px;font-weight:900;letter-spacing:12px}
#endTitle.win{color:var(--gold);text-shadow:0 0 30px rgba(255,201,77,.6)}
#endTitle.lose{co.........完整代码请登录后点击上方下载按钮下载查看