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,user-scalable=no">
<title>劲乐立方 BEAT CUBE · 本地音乐节奏引擎</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎹</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;900&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#060b18; --panel:rgba(9,15,33,.86); --line:#26365e; --ink:#eaf2ff; --dim:#8ba1c9;
  --coral:#ff4d6d; --gold:#ffc233; --cyan:#2fd6ff; --lime:#8dff57; --violet:#c07dff; --orange:#ff9f45;
  --cut:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:'Noto Sans SC',system-ui,sans-serif;color:var(--ink);user-select:none}
canvas#stage{position:fixed;inset:0;display:block}
.df{font-family:'ZCOOL QingKe HuangYou','Russo One',sans-serif;font-weight:400}
.num{font-family:'Russo One','Noto Sans SC',sans-serif}
.hidden{display:none!important}

/* ---- 扫描线氛围层 ---- */
#scan{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.06;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.9) 2px 3px)}
#vig{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;transition:opacity .12s}
#vig.gold{opacity:1;box-shadow:inset 0 0 180px rgba(255,194,51,.35)}
#vig.red{opacity:1;box-shadow:inset 0 0 200px rgba(255,77,109,.45)}

.screen{position:fixed;inset:0;z-index:20}

/* ================= 主菜单 ================= */
#menu{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(5,9,20,.25),rgba(5,9,20,.66) 70%)}
.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:rgba(8,13,28,.7);flex:none}
.ticker-in{display:inline-block;white-space:nowrap;padding:7px 0;font-size:12px;letter-spacing:3px;color:var(--dim);
  animation:tick 26s linear infinite}
.ticker-in b{color:var(--gold);font-weight:500}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.menu-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:28px}
.menu-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;width:min(1080px,100%);align-items:center}

.badge{display:inline-block;font-size:11px;letter-spacing:4px;color:var(--cyan);border:1px solid rgba(47,214,255,.4);
  padding:5px 12px;clip-path:var(--cut);background:rgba(47,214,255,.07);margin-bottom:18px}
h1.title{font-size:clamp(58px,9vw,108px);line-height:.98;letter-spacing:4px;
  text-shadow:4px 0 0 rgba(255,77,109,.55),-4px 0 0 rgba(47,214,255,.55),0 10px 40px rgba(0,0,0,.6)}
h1.title em{font-style:normal;color:transparent;-webkit-text-stroke:2.5px var(--gold)}
.subtitle{margin-top:14px;color:var(--dim);font-size:14px;letter-spacing:2px;line-height:1.9}
.subtitle b{color:var(--gold);font-weight:500}
.keyrow{display:flex;gap:7px;margin:22px 0 6px;flex-wrap:wrap}
.key{min-width:42px;height:42px;padding:0 10px;display:grid;place-items:center;font-family:'Russo One';font-size:16px;
  background:linear-gradient(180deg,#1a2547,#0d1530);border:1px solid var(--line);border-bottom:4px solid var(--kc,var(--line));
  color:var(--kc,#cfe0ff);clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
  transition:transform .07s,filter .2s}
.key.space{min-width:110px;font-size:12px;letter-spacing:3px}
.key.down{transform:translateY(4px);border-bottom-width:1px;filter:brightness(1.7) drop-shadow(0 0 10px var(--kc))}
.keyhint{font-size:12px;color:var(--dim);letter-spacing:2px}
.feat{list-style:none;margin-top:20px;display:grid;gap:8px;font-size:13px;color:#b9c8e8}
.feat li::before{content:'▸ ';color:var(--orange)}

.panel{background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);padding:22px;position:relative}
.panel::before{content:'';position:absolute;top:0;left:0;width:64px;height:3px;background:var(--coral)}
.panel::after{content:'';position:absolute;bottom:0;right:0;width:64px;height:3px;background:var(--cyan)}
.p-title{font-size:12px;letter-spacing:4px;color:var(--dim);margin-bottom:12px}
.p-title b{color:var(--gold)}

#drop{display:block;border:2px dashed #33507f;padding:22px 16px;text-align:center;cursor:pointer;transition:.2s;
  background:rgba(20,32,64,.35)}
#drop:hover,#drop.over{border-color:var(--gold);background:rgba(255,194,51,.07);box-shadow:0 0 30px rgba(255,194,51,.15) inset}
#drop .ico{font-size:34px;color:var(--gold)}
#drop .t1{margin-top:6px;font-size:16px;letter-spacing:2px}
#drop .t2{margin-top:5px;font-size:11px;color:var(--dim);letter-spacing:1px}
#songInfo{margin-top:2px}
#songName2{font-size:17px;letter-spacing:1px;white-sp.........完整代码请登录后点击上方下载按钮下载查看