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>湖畔垂纶 · Lakeside Angling</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --disp:'Ma Shan Zheng','KaiTi','STKaiti',serif;
  --body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --amber:#ffb35c; --amber2:#ffd9a0; --red:#ff5a4d; --green:#39d98a;
  --panel:rgba(9,18,26,.78); --line:rgba(255,179,92,.30);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0a141d;font-family:var(--body);color:#e8eef2;
  -webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
canvas{display:block}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.4)}

#topbar{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start}
#title{font-family:var(--disp);font-size:36px;line-height:1;color:var(--amber2);
  text-shadow:0 2px 12px rgba(0,0,0,.7),0 0 30px rgba(255,179,92,.25)}
#title small{display:block;font-family:var(--body);font-size:10px;letter-spacing:.42em;color:rgba(255,217,160,.55);margin-top:5px;font-weight:500}
#score{padding:8px 16px;font-size:13px;color:#c7d3da}
#score b{color:var(--amber2);font-size:16px;margin:0 2px}

#toast{position:absolute;top:16%;left:50%;transform:translate(-50%,-8px);padding:9px 22px;font-size:15px;
  opacity:0;transition:all .35s;color:#ffe9cf;letter-spacing:.05em}
#toast.on{opacity:1;transform:translate(-50%,0)}

#castInfo{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.18em;
  color:rgba(255,217,160,.85);text-shadow:0 1px 6px #000;transition:opacity .3s}

#vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(4,9,15,.62) 100%)}
#vignette.danger{animation:dangerPulse .7s infinite}
@keyframes dangerPulse{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 140px rgba(255,70,50,.35)}}
#dangerFlash{position:absolute;inset:0;background:radial-gradient(ellipse,rgba(255,60,40,.35),rgba(180,20,10,.55));opacity:0}
#dangerFlash.on{animation:flashOut .55s forwards}
@keyframes flashOut{0%{opacity:1}100%{opacity:0}}

#biteAlert{position:absolute;top:26%;left:50%;transform:translateX(-50%);font-family:var(--disp);font-size:96px;
  color:var(--red);text-shadow:0 0 8px #fff,0 0 24px rgba(255,90,77,.9),0 4px 18px #000;opacity:0;letter-spacing:.1em}
#biteAlert.on{opacity:1;animation:alertPulse .45s infinite}
@keyframes alertPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.12)}}

/* ---------- bottom cluster ---------- */
#bottom{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:min(680px,92vw);display:flex;flex-direction:column;align-items:center;gap:12px}

#powerWrap{width:360px;max-width:80vw;opacity:0;transform:translateY(8px);transition:all .25s}
#powerWrap.on{opacity:1;transform:none}
#powerBar{position:relative;height:16px;background:#0c161f;border:1px solid #35495c;border-radius:9px;overflow:hidden}
#powerSweet{position:absolute;left:65%;width:25%;top:0;bottom:0;background:rgba(255,179,92,.22);border-left:1px dashed rgba(255,217,160,.6);border-right:1px dashed rgba(255,217,160,.6)}
#powerFill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#39d98a,#ffd35c 60%,#ff5a4d);border-radius:9px}
#powerLabel{font-size:11px;letter-spacing:.3em;color:rgba(255,217,160,.7);text-align:center;margin-bottom:5px}

#battle{display:flex;align-items:center;gap:18px;padding:12px 20px;opacity:0;transform:translateY(12px);transition:all .3s;position:relative}
#battle.on{opacity:1;transform:none}
.meter{width:200px}
.meter label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.25em;color:#9fb2bf;margin-bottom:5px}
.meter .bar{position:relative;height:13px;background:#0c161f;border:1px solid #35495c;border-radius:7px;overflow:hidden}
#tensionGrad{position:absolute;inset:0;background:linear-gradient(90deg,#39d98a,#ffd35c 55%,#ff7a4d 78%,#ff3b30 92%)}
#tensionCover{position:absolute;right:0;top:0;bottom:0;width:100%;background:#0c161f;transition:width .06s linear}
#tensionZone{position:absolute;left:85%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.65)}
#staminaFill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#7ec98f,#ffd35c);transition:width .1s linear}
#distRead{font-size:34px;font-weight:700;color:var(--amber2);min-width:96px;text-align:center;line-height:1;text-shadow:0 2px 10px #000}
#distRead small{font-size:12px;color:#9fb2bf;font-weight:400;margin-left:3px;letter-spacing:.2em}
#battle.danger .meter.tension label{color:var(--red);animation:blink .4s infinite}
@keyframes blink{50%{opacity:.35}}

#instruct{padding:10px 26px;font-size:15px;letter-spac.........完整代码请登录后点击上方下载按钮下载查看