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

代码语言：html
所属分类：其他
代码由deepseek-4.1 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:#4ea8ff; --red:#ff5a5a; --gold:#ffcf5c; --xp:#b07bff;
  --hp:#37d67a; --mp:#3aa0ff; --warn:#ff4747;
  --panel:rgba(10,16,28,.86); --panel2:rgba(16,24,40,.96);
  --line:rgba(90,130,200,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#05080f;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:#dfe8ff;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;cursor:crosshair;overflow:hidden}
canvas{display:block}
.hidden{display:none!important}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3b6ea8,#22405f);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#4ea8ff}

/* ---------- 顶部栏 ---------- */
#topbar{position:fixed;top:0;left:0;right:0;height:44px;display:flex;align-items:center;
  justify-content:space-between;padding:0 12px;z-index:20;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,10,20,.9),rgba(5,10,20,0));font-size:13px}
#topbar>div{pointer-events:auto}
.tb-mid{display:flex;align-items:center;gap:10px;background:rgba(8,14,26,.8);
  border:1px solid var(--line);border-radius:20px;padding:4px 16px}
.score{font-size:20px;font-weight:700}
.score.blue{color:var(--blue);text-shadow:0 0 12px rgba(78,168,255,.7)}
.score.red{color:var(--red);text-shadow:0 0 12px rgba(255,90,90,.7)}
.vs{font-size:11px;opacity:.6}
#timer{font-variant-numeric:tabular-nums;font-weight:700;background:rgba(8,14,26,.8);
  border:1px solid var(--line);border-radius:20px;padding:5px 14px}
.tb-right{display:flex;align-items:center;gap:8px;background:rgba(8,14,26,.8);
  border:1px solid var(--line);border-radius:20px;padding:4px 10px}
.iconbtn{background:rgba(78,168,255,.12);border:1px solid var(--line);color:#dfe8ff;
  border-radius:8px;width:30px;height:26px;font-size:13px;cursor:pointer;line-height:1}
.iconbtn:hover{background:rgba(78,168,255,.3)}

/* ---------- 底部 HUD ---------- */
#bottom{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);display:flex;
  gap:12px;align-items:flex-end;padding:8px 14px;z-index:20;
  background:linear-gradient(180deg,rgba(8,14,26,.55),rgba(8,14,26,.94));
  border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(8px);
  box-shadow:0 10px 40px rgba(0,0,0,.65);max-width:min(96vw,920px)}
.portrait{position:relative;width:74px}
#portraitCanvas{width:74px;height:74px;border-radius:10px;border:2px solid #3f6fa8;
  background:#0a1220;display:block}
.lvl{position:absolute;bottom:2px;right:2px;width:22px;height:22px;border-radius:50%;
  background:#122238;border:1px solid #5b8fd0;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;color:#cfe4ff}
.xpbar{position:absolute;left:0;bottom:-6px;width:100%;height:4px;background:#0a1220;
  border-radius:3px;overflow:hidden;border:1px solid rgba(90,130,200,.3)}
#xpFill{height:100%;width:0%;background:linear-gradient(90deg,#8a5cff,#c9a4ff);transition:width .2s}
.vitals{display:flex;flex-direction:column;gap:5px;width:210px}
.bar{position:relative;height:17px;border-radius:4px;background:#0a1220;overflow:hidden;
  border:1px solid rgba(90,130,200,.35)}
.bar>div{height:100%;width:100%;transition:width .12s linear}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;text-shadow:0 1px 2px #000;letter-spacing:.3px}
#hpFill{background:linear-gradient(90deg,#1f8b4d,#37d67a)}
#mpFill{background:linear-gradient(90deg,#1a5f9e,#3aa0ff)}
.skills{display:flex;gap:6px;align-items:center}
.skill{position:relative;width:52px;height:52px;border-radius:9px;overflow:hidden;
  border:2px solid #3f6fa8;background:#0a1220;cursor:pointer;transition:border-color .15s}
.skill:hover{border-color:#4ea8ff}
.skill .skillIcon{width:100%;height:100%;display:block}
.skill .cdMask{position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(rgba(0,0,0,0) 0deg, rgba(0,0,0,0) 0deg)}
.skill .cdText{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:#fff;text-shadow:0 2px 6px #000;pointer-events:none}
.skill .keyLabel{position:absolute;left:2px;top:1px;font-size:10px;font-weight:700;
  color:#cfe4ff;text-shadow:0 1px 3px #000;pointer-events:none}
.skill .plusBtn{position:absolute;right:1px;bottom:1px;width:16px;height:16px;padding:0;
  border-radius:4px;border:1px solid #ffd45c;background:rgba(60,45,0,.9);color:#ffd45c;
  font-size:11px;line-height:1;cursor:pointer;font-weight:800;display:none}
.skill.canlevel .plusBtn{display:block;animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,212,92,.8)}50%{box-shadow:0 0 0 5px rgba(255,212,92,0)}}
.skill.dim{opacity:.45}
.spells{display:flex;gap:5px}
.spell{width:38px;height:38px;border-radius:8px;border:2px solid #4a6a8c;background:#0a1220;
  position:relative;overflow:hidden;cursor:pointer}
.spell canvas{width:100%;height:100%}
.spell .cdText{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;text-shadow:0 2px 6px #000}
.spell .cdMask{position:absolute;inset:0;pointer-events:none}
.spell .keyLabel{position:absolute;left:2px;top:0;font-size:9px;font-weight:700;color:#cfe4ff}
.rightcol{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.items{display:flex;gap:4px}
.item{width:30px;height:30px;border-radius:6px;border:1px solid #3f6fa8;background:#0a1220;
  position:relative;overflow:hidden;cursor:pointer}
.item canvas{width:100%;height:100%}
.stats{display:flex;gap:12px;font-size:12px;color:#b9cbe8}
.stats b{color:var(--gold)}
.cs{color:#cfe4ff}

/* ---------- 小地图 ---------- */
#minimap{position:fixed;right:10px;bottom:10px;width:168px;height:168px;z-index:19;
  border:2px solid rgba(90,130,200,.55);border-radius:10px;background:#07110c;
  box-shadow:0 6px 26px rgba(0,0,0,.7);cursor:pointer;touch-action:none}

/* ---------- 遮罩层 ---------- */
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;
  justify-content:center;background:rgba(3,6,12,.86);backdrop-filter:blur(6px);padding:16px}
.panel{background:var(--panel2);border:1px solid var(--line);border-radius:16px;
  padding:20px;max-width:900px;width:100%;max-height:88vh;overflow:auto;
  box-shadow:0 20px 80px rgba(0,0,0,.8)}

/* ---------- 菜单 ---------- */
#menu .title{text-align:center;margin-bottom:4px}
#menu h1{margin:0;font-size:34px;letter-spacing:6px;
  background:linear-gradient(90deg,#4ea8ff,#c9a4ff,#ffcf5c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(120,170,255,.35)}
#menu .sub{text-align:center;font-size:12px;letter-spacing:3px;color:#7b93b8;margin-bottom:18px}
.heroCards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.heroCard{background:linear-gradient(180deg,rgba(30,48,80,.6),rgba(12,20,34,.9));
  border:2px solid rgba(90,130,200,.3);border-radius:12px;padding:12px;cursor:pointer;
  transition:all .16s;text-align:center}
.heroCard:hover{border-color:#4ea8ff;transform:translateY(-3px)}
.heroCard.sel{border-color:#ffcf5c;box-shadow:0 0 22px rgba(255,207,92,.35)}
.heroCard canvas{width:76px;height:76px;border-radius:50%;margin:0 auto 6px;display:block;
  border:2px solid rgba(90,130,200,.4);background:#0a1220}
.heroCard .hn{font-size:17px;font-weight:800;margin-bottom:2px}
.heroCard .hr{font-size:11px;color:#7b93b8;margin-bottom:6px}
.heroCard .hd{font-size:11px;color:#a9bdd8;line-height:1.5;min-height:52px}
.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.btn{background:linear-gradient(180deg,#2b5a8f,#173252);border:1px solid #4ea8ff;
  color:#dff0ff;border-radius:10px;padding:9px 20px;font-size:14px;cursor:pointer;
  font-weight:700;letter-spacing:1px;transition:all .15s}
.btn:hover{background:linear-gradient(180deg,#3a78b8,#1e4370);box-shadow:0 0 18px rgba(78,168,255,.5)}
.btn.gold{border-color:#ffcf5c;background:linear-gradient(180deg,#6a5320,#3a2d0c);color:#ffe9a8}
.btn.gold:hover{background:linear-gradient(180deg,#8a6d2c,#4d3b12);box-shadow:0 0 18px rgba(255,207,92,.5)}
.btn.small{padding:6px 12px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{background:transparent;border:0;color:#9fb6d6;padding:7px 15px;font-size:13px;
  cursor:pointer;font-family:inherit}
.seg button.on{background:rgba(78,168,255,.28);color:#fff;font-weight:700}
.hint{font-size:11px;color:#6d84a6;text-align:center;line-height:1.8}

/* ---------- 商店 ---------- */
.shopHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.shopHead h2{margin:0;font-size:19px;letter-spacing:2px}
.goldbig{color:var(--gold);font-size:17px;font-weight:800}
.cats{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.catBtn{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#9fb6d6;
  padding:6px 14px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit}
.catBtn.on{background:rgba(255,207,92,.2);border-color:#ffcf5c;color:#ffe9a8;font-weight:700}
.itemGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:9px}
.itemCard{display:flex;gap:9px;align-items:center;background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:9px;padding:8px;cursor:pointer;transition:all .13s}
.itemCard:hover{background:rgba(78,168,255,.14);border-color:#4ea8ff}
.itemCard.dis{opacity:.42;cursor:not-allowed}
.itemCard canvas{width:40px;height:40px;border-radius:7px;border:1px solid rgba(90,130,200,.4);flex:0 0 auto}
.itemCard .inm{font-size:13px;font-weight:700}
.itemCard .icost{font-size:11px;color:var(--gold)}
.itemCard .istat{font-size:10px;color:#8fa6c4;line-height:1.4}
.invRow{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}
.invSlot{width:52px;height:52px;border-radius:9px;border:1px dashed rgba(90,130,200,.45);
  background:rgba(255,255,255,.03);position:relative;cursor:pointer}
.invSlot.filled{border-style:solid;border-color:#5b8fd0}
.invSlot canvas{width:100%;height:100%;border-radius:8px}
.invSlot .sellTag{position:absolute;inset:0;background:rgba(200,40,40,.78);color:#fff;
  font-size:11px;display:none;align-items:center;justify-content:center;border-radius:8px;font-weight:700}
.invSlot:hover .sellTag{display:flex}

/* ---------- 计分板 ---------- */
#scoreboard table{width:100%;border-collapse:collapse;font-size:13px}
#scoreboard th{text-align:left;font-size:11px;color:#7b93b8;padding:7px 6px;
  border-bottom:1px solid var(--line);font-weight:600}
#scoreboard td{padding:7px 6px;border-bottom:1px solid rgba(90,130,200,.12)}
#scoreboard .tblue{color:var(--blue)}
#scoreboard .tred{color:var(--red)}

/* ---------- 结算 ---------- */
#result .resTitle{font-size:40px;text-align:center;letter-spacing:10px;margin-bottom:6px}
#result .win{color:#ffd45c;text-shadow:0 0 40px rgba(255,212,92,.6)}
#result .lose{color:#ff5a5a;text-shadow:0 0 40px rgba(255,90,90,.5)}
.resStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:18px 0}
.resStat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:12px;text-align:center}
.resStat .v{font-size:22px;font-weight:800;color:#ffd45c}
.resStat .k{font-size:11px;color:#8fa6c4;margin-top:3px}

/* ---------- 死亡/回城遮罩 ---------- */
#deathOverlay{position:fixed;inset:0;z-index:30;pointer-events:none;display:flex;
  align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(circle,rgba(60,0,0,.28),rgba(0,0,0,.72));color:#ffb4b4}
#deathOverlay .dt{font-size:46px;font-weight:800;text-shadow:0 0 30px rgba(255,60,60,.8)}
#deathOverlay .ds{font-size:14px;letter-spacing:3px;opacity:.8}
#castBar{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);width:230px;
  height:22px;z-index:25;border-radius:11px;background:#0a1220;border:1px solid #4ea8ff;
  overflow:hidden;display:none}
#castBar>div{height:100%;width:0%;background:linear-gradient(90deg,#1a5f9e,#4ea8ff)}
#castBar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000}

/* ---------- 触屏按钮 ---------- */
#touchBtns{position:fixed;left:10px;bottom:120px;z-index:22;display:none;
  grid-template-columns:repeat(3,54px);gap:8px}
#touchBtns .tb{width:54px;height:54px;border-radius:50%;background:rgba(20,40,70,.85);
  border:2px solid #3f6fa8;color:#cfe4ff;font-size:16px;font-weight:800;display:flex;
  align-items:center;justify-content:center;position:relative;overflow:hidden}
#touchBtns .tb canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
#touchBtns .tb .lbl{position:relative;z-index:2;text-shadow:0 1px 4px #000}
#touchBtns .tb .cd{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- 提示 ---------- */
#toast{position:fixed;left:50%;top:60px;transform:translateX(-50%);z-index:50;
  background:rgba(10,18,32,.94);border:1px solid var(--line);border-radius:10px;
  padding:9px 20px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .3s}
#toast.show{opacity:1}

/* ---------- 错误 ---------- */
#errBox{position:fixed;inset:0;z-index:99;display:none;align-items:center;
  justify-content:center;background:#05080f;padding:24px;text-align:center}
#errBox .e{max-width:480px;background:#101a2c;border:1px solid #ff5a5a;
  border-radius:14px;padding:26px}
#errBox h2{color:#ff7b7b;margin:0 0 10px}
#errBox p{color:#9fb6d6;font-size:13px;line-height:1.8}

@media (max-width:820px){
  #bottom{gap:6px;padding:6px 8px;bottom:4px;max-width:99vw}
  .portrait{width:52px} #portraitCanvas{width:52px;height:52px}
  .vitals{width:118px} .bar{height:14px}
  .skill{width:40px;height:40px}
  .spell{width:30px;height:30px}
  .item{width:24px;height:24px}
  #minimap{width:112px;height:112px}
  .stats{font-size:10px;gap:6px}
  .heroCards{grid-template-columns:1fr}
  #touchBtns{display:grid}
  .rightcol{display:none}
}
</style>
</head>
<body>
<div id="app"></div>

<!-- 顶部 -->
<div id="topbar" class="hud hidden">
  <div><span id="timer">00:00</span></div>
  <div class="tb-mid">
    <span class="score blue" id="scoreBlue">0</span>
    <span class="vs">击杀</span>
    <span class="score red" id="scoreRed">0</span>
  </div>
  <div class="tb-right">
    <span style="color:#4ea8ff" id="towerBlue">0</span><span style="opacity:.5">塔</span>
    <span style="opacity:.3">|</span>
    <span style="color:#ff5a5a" id="towerRed">0</span><span style="opacity:.5">塔</span>
    <button class="iconbtn" id="btnMute">🔊</button>
    <button class="iconbtn" id="btnPause">⏸</button>
  </div>
</div>

<!-- 底部 HUD -->
<div id="bottom" class="hud hidden">
  <div class="portrait">
    <canvas id="portraitCanvas" width="96" height="96"></canvas>
    <div class="lvl" id="lvlText">1</div>
    <div class="xpbar"><div id="xpFill"></div></div>
  </div>
  <div class="vitals">
    <div class="bar"><div id="hpFill"></div><span id="hpText">100/100</span></div>
    <div class="bar"><div id="mpFill"></div><span id="mpText">0/0</span></div>
  </div>
  <div class="skills" id="skills"></div>
  <div class="spells" id="spells"></div>
  <div class="rightcol">
    <div class="items" id="items"></div>
    <div class="stats">
      <span>💰<b id="goldText">0</b></span>
      <span class="cs" id="kdaText">0/0/0</span>
      <span class="cs">补刀 <b id="csText" style="color:#cfe4ff">0</b></span>
    </div>
  </div>
</div>

<canvas id="minimap" width="340" height="340"></canvas>

<div id="castBar"><div></div><span id="castText">回城引导 8s</span></div>
<div id="deathOverlay" class="hidden">
  <div class="dt" id="deathTimer">0</div>
  <div class="ds">复活倒计时</div>
</div>

<div id="touchBtns"></div>
<div id="toast"></div>

<!-- 商店 -->
<div id="shop" class="overlay hidden">
  <div class="panel">
    <div class="shopHead">
      <h2>⚔ 峡谷商店</h2>
      <div><span class="goldbig">💰 <span id="shopGold">0</span></span>
        <button class="btn small" id="shopClose" style="margin-left:12px">关闭 (P)</button></div>
    </div>
    <div class="cats" id="shopCats"></div>
    <div class="itemGrid" id="shopGrid"></div>
    <div style="margin-top:16px;font-size:12px;color:#7b93b8">我的装备（点击出售，返还 60%）</div>
    <div class="invRow" id="shopInv"></div&.........完整代码请登录后点击上方下载按钮下载查看