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>山洪逃生 · FLOOD ESCAPE</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0c1116; --panel:rgba(14,20,26,.92); --yellow:#ffd23f; --red:#ff3b30;
  --green:#37d67a; --cyan:#5fd0ff; --line:#2c3a45;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0e12;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;color:#e8eef2;
  -webkit-user-select:none;user-select:none;touch-action:none}
canvas{display:block}
#wrap{position:fixed;inset:0}
.disp{font-family:"ZCOOL QingKe HuangYou","Noto Sans SC","Microsoft YaHei",sans-serif}

/* ---------- 通用面板（应急广播风格） ---------- */
.panel{background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:0 8px 30px rgba(0,0,0,.45)}
.hazard{background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,#111 12px 24px)}
.tag{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.22em;padding:3px 10px 2px;
  background:var(--red);color:#fff;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.tag.warn{background:var(--yellow);color:#111}
.tag.safe{background:var(--green);color:#08281a}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity .6s}
body.playing #hud{opacity:1}
#stripeT,#stripeB{position:fixed;left:0;right:0;height:7px;z-index:21;opacity:.85;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,#0d0d0d 14px 28px)}
#stripeT{top:0}#stripeB{bottom:0}

#phasePanel{position:fixed;top:22px;left:22px;padding:12px 18px 13px;min-width:250px;border-left:4px solid var(--red)}
#phasePanel .row1{display:flex;align-items:center;gap:10px;margin-bottom:6px}
#phaseText{font-size:13px;color:#aebbc4;font-weight:500}
#phaseBlink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

#bigTimer{position:fixed;top:64px;left:50%;transform:translateX(-50%);text-align:center;display:none}
#bigTimer .num{font-size:104px;line-height:1;color:var(--yellow);
  text-shadow:0 0 34px rgba(255,210,63,.45),0 4px 0 rgba(0,0,0,.55)}
#bigTimer .lbl{font-size:13px;letter-spacing:.5em;color:#ffd9d4;margin-top:2px;font-weight:700}
#bigTimer.crit .num{color:var(--red);animation:pulse .5s infinite alternate;text-shadow:0 0 40px rgba(255,59,48,.7)}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.07)}}

#rightPanel{position:fixed;top:22px;right:22px;padding:12px;text-align:center}
#mm{width:158px;height:158px;border:1px solid var(--line);background:#0a1014;image-rendering:pixelated}
#mmLbl{font-size:10px;letter-spacing:.3em;color:#7f8f9b;margin-top:6px}
#distBox{margin-top:8px;font-size:12px;color:#aebbc4}
#distBox b{font-size:20px;color:var(--yellow);font-family:"ZCOOL QingKe HuangYou";letter-spacing:.05em}

#altGauge{position:fixed;right:26px;top:50%;transform:translateY(-50%);width:26px;height:230px;
  background:rgba(10,16,20,.85);border:1px solid var(--line)}
#altFill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,#5fd0ff,#1f6f9f);height:2%}
#altPy{position:absolute;left:-7px;right:-7px;height:3px;background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
#altSafe{position:absolute;left:0;right:0;height:2px;background:var(--green)}
#altLbl{position:absolute;right:34px;font-size:10px;color:#7f8f9b;white-space:nowrap}

#stamBox{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);width:280px}
#stamBox .lbl{font-size:10px;letter-spacing:.35em;color:#8fa0ac;margin-bottom:4px;text-align:center}
#stamBar{height:9px;background:rgba(10,16,20,.85);border:1px solid var(--line)}
#stamFill{height:100%;width:100%;background:linear-gradient(90deg,#ffb43f,var(--yellow));transition:width .1s}
#stamFill.low{background:var(--red)}

#hints{position:fixed;bottom:24px;left:22px;font-size:12px;color:#93a3af;line-height:2}
kbd{display:inline-block;min-width:22px;text-align:center;padding:2px 6px;margin-right:4px;
  background:#1b242c;border:1px solid #3c4c59;border-bottom-width:3px;border-radius:4px;
  font-family:inherit;font-size:11px;color:#dfe8ee}

#toasts{position:fixed;top:190px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:25}
.toast{background:rgba(12,17,22,.92);border-left:4px solid var(--yellow);padding:9px 20px;
  font-size:15px;font-weight:700;letter-spacing:.06em;box-shadow:0 6px 24px rgba(0,0,0,.5);
  animation:tIn .35s cubic-bezier(.2,1.4,.4,1),tOut .5s ease 3.4s forwards;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.toast.red{border-color:var(--red);color:#ffd7d3}
.toast.green{border-color:var(--green);color:#d6ffe8}
@keyframes tIn{from{opacity:0;transform:translateY(-16px) scale(.9)}to{opacity:1}}
@keyframes tOut{to{opacity:0;transform:translateY(-10px)}}

#vig{position:fixed;inset:0;pointer-events:none;z-index:18;opacity:0;
  box-shadow:inset 0 0 180px 60px rgba(255,30,20,.55)}
#flash{position:fixed;inset:0;background:#eaf2ff;pointer-events:none;z-index:19;opacity:0}

#muteBtn{position:fixed;bottom:24px;right:22px;z-index:3.........完整代码请登录后点击上方下载按钮下载查看