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,maximum-scale=1,user-scalable=no">
<title>破浪骑士 WAVEBREAKER · Three.js 海上冲浪</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#04222f; --deep:#083a4c; --sea:#0d6d84; --aqua:#3fd8c2;
  --foam:#eef8f3; --coral:#ff5c4d; --orange:#ff8a3d; --gold:#ffc247; --sand:#ffe8c2;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--deep);
  font-family:'Noto Sans SC',sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none}
.disp{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;font-weight:400}
#app,#app canvas{position:fixed;inset:0;display:block;touch-action:none}

.overlay{position:fixed;inset:0;z-index:20;pointer-events:none}
.overlay.ui{pointer-events:auto}
.hidden{display:none!important}

/* ============ 主菜单 ============ */
#menu{background:linear-gradient(180deg,rgba(4,34,47,.18) 0%,rgba(4,34,47,.02) 34%,rgba(4,34,47,.55) 100%);
  display:flex;flex-direction:column}
#menuTop{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--foam);font-size:15px;letter-spacing:.2em}
.brand .logo{width:34px;height:34px;border-radius:50% 50% 50% 4px;background:var(--coral);
  border:3px solid var(--ink);transform:rotate(-45deg);box-shadow:3px 3px 0 rgba(4,34,47,.7)}
#menuTop .right{display:flex;gap:10px;align-items:center;color:var(--sand);font-size:13px}
#menuMain{flex:1;display:flex;gap:34px;align-items:stretch;padding:0 5vw 90px;min-height:0}
#menuLeft{flex:1.25;display:flex;flex-direction:column;justify-content:center;min-width:0}
.kicker{display:inline-block;align-self:flex-start;background:var(--gold);border:3px solid var(--ink);
  box-shadow:4px 4px 0 rgba(4,34,47,.85);padding:4px 14px;font-size:14px;letter-spacing:.35em;
  transform:rotate(-2deg) skewX(-6deg);margin-bottom:14px;animation:riseIn .6s .05s both}
h1.title{font-size:clamp(58px,9.5vw,128px);line-height:.95;color:var(--foam);letter-spacing:.02em;
  transform:rotate(-2.5deg);animation:riseIn .6s .12s both;
  text-shadow:4px 4px 0 var(--coral),9px 9px 0 rgba(4,34,47,.9)}
h1.title small{display:block;font-size:clamp(20px,2.6vw,34px);letter-spacing:.42em;color:var(--gold);
  text-shadow:3px 3px 0 rgba(4,34,47,.9);margin-top:8px}
.tagline{color:var(--sand);margin:16px 0 22px;font-size:15px;max-width:520px;animation:riseIn .6s .2s both}
#modeList{list-style:none;pointer-events:auto;max-width:640px}
.mode{position:relative;display:grid;grid-template-columns:74px 1fr auto 40px;align-items:center;gap:14px;
  padding:13px 14px;cursor:pointer;border-bottom:2px dashed rgba(238,248,243,.35);overflow:hidden;
  transition:transform .18s ease;animation:riseIn .55s both}
.mode:nth-child(1){animation-delay:.28s}.mode:nth-child(2){animation-delay:.36s}
.mode:nth-child(3){animation-delay:.44s}.mode:nth-child(4){animation-delay:.52s}
.mode::before{content:"";position:absolute;inset:0;background:var(--foam);transform:scaleX(0);
  transform-origin:left;transition:transform .22s ease;z-index:0}
.mode:hover::before,.mode:focus-visible::before{transform:scaleX(1)}
.mode:hover{transform:translateX(8px)}
.mode>*{position:relative;z-index:1}
.mode .num{font-size:44px;color:transparent;-webkit-text-stroke:2px var(--foam);transition:.2s}
.mode:hover .num{-webkit-text-stroke:2px var(--coral)}
.mode .nm{font-size:24px;color:var(--foam);transition:.2s;display:flex;align-items:baseline;gap:10px}
.mode .nm em{font-style:normal;font-size:12px;letter-spacing:.3em;color:var(--aqua)}
.mode:hover .nm{color:var(--ink)} .mode:hover .nm em{color:var(--sea)}
.mode .ds{font-size:12.5px;color:rgba(238,248,243,.85);margin-top:2px}
.mode:hover .ds{color:rgba(4,34,47,.75)}
.mode .diff{font-size:11px;letter-spacing:.2em;color:var(--gold);white-space:nowrap}
.mode:hover .diff{color:var(--coral)}
.mode .arr{font-size:26px;color:var(--gold);transition:transform .2s}
.mode:hover .arr{transform:translateX(6px);color:var(--coral)}
#menuRight{width:330px;display:flex;flex-direction:column;gap:16px;justify-content:center;pointer-events:auto}
.panel{background:rgba(4,34,47,.82);border:3px solid var(--foam);box-shadow:6px 6px 0 rgba(4,34,47,.6);
  padding:16px 18px;transform:rotate(.6deg);animation:riseIn .6s .4s both}
.panel h3{font-size:17px;color:var(--gold);letter-spacing:.25em;margin-bottom:12px;
  border-bottom:2px solid rgba(63,216,194,.4);padding-bottom:8px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;font-size:13px;color:var(--foam)}
kbd{background:var(--foam);color:var(--ink);border-radius:5px;padding:1px 7px;font-size:12px;
  font-family:inherit;font-weight:700;box-shadow:0 2px 0 rgba(4,34,47,.9);white-space:nowrap}
.cond{font-size:13px;color:var(--foam);display:grid;gap:8px}
.cond b{color:var(--aqua)}
.wavebar{display:flex;gap:4px;align-items:flex-end;height:26px}
.wavebar i{width:7px;background:var(--aqua);animation:bob 1.4s ease-in-out infinite alternate}
.wavebar i:nth-child(2){animation-delay:.15s}.wavebar i:nth-child(3){animation-delay:.3s}
.wavebar i:nth-child(4){animation-delay:.45s}.wavebar i:nth-child(5){animation-delay:.6s}
@keyframes bob{from{height:22%}to{height:100%}}
.best{font-size:13px;color:var(--foam);display:grid;gap:6px}
.best span{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(238,248,243,.25);padding-bottom:4px}
.best b{color:var(--gold)}
#ticker{position:absolute;left:0;right:0;bottom:0;background:var(--ink);border-top:3px solid var(--coral);
  overflow:hidden;padding:9px 0;white-space:nowrap}
#ticker .in{display:inline-block;animation:marq 26s linear infinite;color:var(--sand);font-size:13px;letter-spacing:.15em}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.btn{font-family:'ZCOOL QingKe HuangYou',sans-serif;font-size:18px;letter-spacing:.12em;cursor:pointer;
  background:var(--coral);color:var(--foam);border:3px solid var(--ink);padding:10px 26px;
  box-shadow:5px 5px 0 rgba(4,34,47,.9);transition:transform .12s,box-shadow .12s;border-radius:8px}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(4,34,47,.9)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn.ghost{background:var(--foam);color:var(--ink)}
.btn.small{font-size:14px;padding:6px 14px;box-shadow:3px 3px 0 rgba(4,34,47,.9)}

/* ============ HUD ============ */
#hud{z-index:15}
.hud-tl{position:absolute;top:18px;left:20px;transform:skewX(-4deg)}
.chip{display:inline-block;background:var(--ink);color:var(--aqua);font-siz.........完整代码请登录后点击上方下载按钮下载查看