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>水鬼出没 · 池塘惊魂夜</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0a141c; --paper:#f0e2bd; --paper2:#dfc99a; --inktext:#241d12;
  --seal:#b23a2c; --seal2:#7e2115; --ghost:#79f2a6; --gold:#f2c66d;
  --danger:#ff5544; --teal:#57c8b8;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink);
  font-family:'ZCOOL KuaiLe','PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;}
#app{position:fixed;inset:0;z-index:0}
#app canvas{display:block}
#vig{position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(3,10,14,.66) 100%);}
/* ---------- HUD ---------- */
.hud{position:fixed;z-index:10;pointer-events:none}
.panel{background:linear-gradient(165deg,#f2e5c2,#dfc99a);border:1.5px solid #8a6f45;
  box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 0 16px rgba(122,90,40,.22);color:var(--inktext);}
#scorePanel{top:16px;left:16px;display:flex;gap:12px;align-items:stretch;padding:8px 20px 8px 8px;transform:rotate(-1.2deg);}
.score-seal{writing-mode:vertical-rl;background:var(--seal);color:#f6ead0;font-family:'Ma Shan Zheng';
  padding:8px 5px;font-size:15px;letter-spacing:5px;box-shadow:inset 0 0 6px rgba(0,0,0,.35);}
.score-body{display:flex;flex-direction:column;justify-content:center}
#scoreNum{font-family:'Ma Shan Zheng';font-size:44px;line-height:.95;color:#3a2410}
#comboBox{font-size:14px;color:#8a5a1a;height:18px}
#comboBox.hot{color:#c0392b;font-weight:bold;animation:pulse .5s infinite alternate}
#rightPanel{top:16px;right:16px;display:flex;gap:10px;align-items:flex-start}
#watchTag{writing-mode:vertical-rl;padding:12px 7px;font-family:'Ma Shan Zheng';font-size:20px;letter-spacing:6px;transform:rotate(1.5deg)}
#livesBox{padding:9px 12px;display:flex;gap:7px;align-items:center}
.life{width:26px;height:34px;background:linear-gradient(#c8503c,#a03020);color:#f6ead0;
  font-family:'Ma Shan Zheng';font-size:17px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.4);transition:all .4s;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);}
.life.lost{filter:grayscale(1);opacity:.25;transform:rotate(14deg) translateY(3px)}
#btnMute{pointer-events:auto;cursor:pointer;width:42px;height:42px;font-size:19px;display:flex;align-items:center;justify-content:center;transform:rotate(2deg)}
#btnMute.off{opacity:.45;text-decoration:line-through}
#statusWrap{bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;width:min(600px,92vw)}
#exposeWrap{width:300px;max-width:70vw;opacity:0;transition:opacity .2s;display:flex;align-items:center;gap:8px}
#exposeLabel{color:#ff8a70;font-size:13px;letter-spacing:2px;white-space:nowrap;animation:pulse .35s infinite alternate}
#exposeTrack{flex:1;height:11px;border:1px solid #ff7766;background:rgba(20,8,8,.65)}
#exposeBar{height:100%;width:0%;background:linear-gradient(90deg,#ff9a6a,#ff3b2f)}
#pillRow{display:flex;align-items:center;gap:12px}
#statusPill{padding:8px 24px;background:rgba(8,18,16,.8);border:1.5px solid var(--teal);color:#cfeee2;
  font-size:17px;letter-spacing:1.5px;transition:border-color .2s,color .2s;box-shadow:0 4px 14px rgba(0,0,0,.5)}
#statusPill.ok{border-color:#3f8f78;color:#a8d8c6}
#statusPill.warn{border-color:var(--gold);color:#ffe3a6}
#statusPill.action{border-color:var(--ghost);color:#c9ffe0;animation:pulse .4s infinite alternate;box-shadow:0 0 18px rgba(121,242,166,.35)}
#statusPill.danger{border-color:var(--danger);color:#ffc9c0;animation:pulse .28s infinite alternate;box-shadow:0 0 18px rgba(255,85,68,.4)}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.045)}}
#coolWrap{width:46px;height:46px;border-radius:50%;background:rgba(8,18,16,.8);border:1.5px solid #3f8f78;
  display:flex;align-items:center;justify-content:center;position:relative}
#coolFill{position:absolute;inset:3px;border-radius:50%;background:conic-gradient(var(--ghost) 360deg, rgba(255,255,255,.06) 0)}
#coolChar{position:relative;width:30px;height:30px;border-radius:50%;background:#0a1a14;color:#9fe8c0;
  font-family:'Ma Shan Zheng';font-size:17px;display:flex;align-items:center;justify-content:center}
#ctrlHint{position:fixed;left:16px;bottom:16px;z-index:10;color:#7f9a8e;font-size:13px;letter-spacing:1px;pointer-events:none}
.key{display:inline-block;border:1px solid #55705f;padding:1px 8px;margin:0 2px;color:#cfe8d8;background:rgba(20,40,32,.6);font-size:12px}
/* ---------- 中央大字 ---------- */
#flash{position:fixed;top:27%;left:50%;transform:translate(-50%,-50%);z-index:20;pointer-events:none;
  font-family:'Ma Shan Zheng';font-size:clamp(46px,8vw,92px);opacity:0;white-space:nowrap;
  text-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 34px currentColor;}
#flash.show{animation:flashPop 1.35s ease forwards}
@keyframes flashPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-5deg)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(1.5deg)}
  26%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  72%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-64%) scale(1.06)}}
#flash.good{color:#8dffb9}#flash.gold{color:#ffd77a}#flash.danger{color:#ff5f4d}
#flash.night{color:#9fc4ff}#flash.miss{color:#b9c8c2}
#hurt{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center, rgba(255,60,40,.25), rgba(150,8,0,.55));}
/* ---------- 覆盖层 ---------- */
.overlay{position:fixed;inset:0;z-index:30;
  background:linear-gradient(180deg, rgba(4,10,14,.78), rgba(4,12,16,.45) 45%, rgba(4,10,14,.82));}
.mist{position:absolute;inset:-40%;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(closest-side, rgba(110,175,155,.12), transparent 70%) 20% 30%/60% 60% no-repeat,
             radial-gradient(closest-side, rgba(90,140,170,.10), transparent 70%) 75% 65%/55% 55% no-repeat;
  animation:drift 26s ease-in-out infinite alternate}
.mist.m2{animation-duration:37s;animation-direction:alternate-reverse;transform:scale(1.3)}
@keyframes drift{from{transform:translate(-4%,-2%) }to{transform:translate(4%,3%)}}
#startOverlay{display:grid;grid-template-columns:1.15fr .95fr;gap:30p.........完整代码请登录后点击上方下载按钮下载查看