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.0, user-scalable=no">
<title>NEON LANES · 三维保龄球</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=Bowlby+One+SC&family=Chakra+Petch:wght@400;600;700&family=Orbitron:wght@500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#07090f; --bg:#0a0d17; --line:#2a3047;
  --cream:#f4e9d4; --amber:#ffb703; --red:#ff4d4d; --deep:#e63946;
  --teal:#3fd6c0; --dim:#8b93ad;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none}
body{font-family:'Chakra Petch','PingFang SC','Microsoft YaHei',sans-serif;color:var(--cream);user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0}
canvas{display:block;touch-action:none;cursor:crosshair}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(3,4,9,.62) 100%),
             linear-gradient(180deg,rgba(4,6,12,.35),transparent 18%)}
#flash{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 55%,#fff7e0,#ffb70355 38%,transparent 70%)}
#flash.on{animation:flashA .55s ease-out}
@keyframes flashA{0%{opacity:.95}100%{opacity:0}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.panel{background:rgba(12,15,26,.8);border:1px solid var(--line);border-radius:12px;
  backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
#topbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  display:flex;gap:12px;align-items:flex-start;max-width:98vw}
#frameinfo{padding:9px 14px;font-size:13px;line-height:1.55;white-space:nowrap}
#frameinfo b{font-family:Orbitron;color:var(--amber);font-size:17px}
#frameinfo .dim{color:var(--dim);font-size:12px}
#board{display:flex;padding:7px 9px;align-items:stretch}
.fr{display:flex;flex-direction:column;border-right:1px solid #262c46;padding:2px 4px;min-width:50px}
.fr:nth-child(10){min-width:64px}
.fr .flabel{font-size:9px;color:#5d6580;text-align:center;font-family:Orbitron;letter-spacing:.08em}
.fr .rolls{display:flex;justify-content:flex-end;gap:2px;margin-top:2px}
.fr .rolls span{width:18px;height:18px;display:grid;place-items:center;font-family:Orbitron;
  font-size:11px;background:#0b0f1c;border:1px solid #232a44;border-radius:4px;color:var(--cream)}
.fr .rolls span.x{color:#ff6b5d;border-color:#5d2430;text-shadow:0 0 7px #ff5d5d88}
.fr .rolls span.sp{color:var(--teal);border-color:#1d4a44;text-shadow:0 0 7px #3fd6c077}
.fr .rolls span.zero{color:#525b76}
.fr .cum{font-family:Orbitron;font-weight:700;color:var(--amber);text-align:center;font-size:14px;height:19px;margin-top:3px}
.fr.cur{background:linear-gradient(180deg,#2a1c10,#1a1208);outline:1px solid #ffb70377;border-radius:7px}
.fr.total{min-width:62px;border-right:none;border-left:1px solid #262c46}
.fr.total .bignum{font-family:Orbitron;font-weight:900;font-size:20px;color:var(--amber);text-align:center;
  text-shadow:0 0 12px #ffb70355;margin-top:4px}
#tools{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
#muteBtn{pointer-events:auto;background:#1a2033;border:1px solid var(--line);border-radius:10px;
  color:var(--cream);font-size:16px;width:40px;height:36px;cursor:pointer;transition:.15s}
#muteBtn:hover{background:#242c46;transform:translateY(-1px)}
#toast{position:absolute;top:104px;left:50%;transform:translateX(-50%) translateY(-6px);
  padding:7px 16px;font-size:13px;letter-spacing:.06em;opacity:0;transition:.3s;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 中央大字 ---------- */
#msg{position:absolute;top:27%;left:50%;transform:translate(-50%,-50%);text-align:center;
  font-family:'Bowlby One SC','Chakra Petch',sans-serif;font-size:clamp(44px,10vw,108px);
  letter-spacing:.03em;opacity:0;white-space:nowrap}
#msg.pop{animation:popMsg 1.7s cubic-bezier(.2,1.3,.3,1) forwards}
@keyframes popMsg{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-5deg)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(1deg)}
  22%{transform:translate(-50%,-50%) scale(.98)}
  30%{transform:translate(-50%,-50%) scale(1)}
  72%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-56%) scale(1.05)}}
#msg.strike{color:#ffd166;text-shadow:0 0 8px #ffb703,0 0 30px #ff8803cc,0 6px 0 #a1152a,0 0 80px #ff4d4d88}
#msg.spare{color:#7df0dd;text-shadow:0 0 8px #3fd6c0,0 0 30px #1ba99499,0 5px 0 #0c4a42}
#msg.gutter{color:#7d89ad;text-shadow:0 4px 0 #232a44}
#msg.normal{color:var(--cream);text-shadow:0 0 18px #ffb70344,0 5px 0 #4a3413}
#submsg{position:absolute;top:calc(27% + clamp(40px,7vw,84px));left:50%;transform:translateX(-50%);
  font-size:clamp(14px,2vw,19px);color:#d9def0;letter-spacing:.35em;opacity:0;white-space:nowrap}
#submsg.pop{animation:subIn 1.7s ease forwards}
@keyframes subIn{0%{opacity:0;transform:translateX(-50%) translateY(12px)}
  18%{opacity:1;transform:translateX(-50%) translateY(0)}70%{opacity:1}100%{opacity:0}}

/* ---------- 底部控件 ---------- */
#hints.........完整代码请登录后点击上方下载按钮下载查看