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">
<title>逃离落星村 · 陨石倒计时 05:00</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Orbitron:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --amber:#ffb340; --alert:#ff4b2e; --lime:#7dff8a;
  --panel:rgba(18,13,10,.86); --line:#5a4326;
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --num:'Orbitron',monospace; --body:'Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#120b09;font-family:var(--body);color:#f4ead8}
canvas#game{position:fixed;inset:0;display:block}
.hidden{display:none!important}
.panel{background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20}
#topbar{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#objective{padding:10px 16px;min-width:230px}
#objective .tag{font-size:11px;letter-spacing:3px;color:#b58a4a;font-weight:700}
#objTitle{font-family:var(--disp);font-size:21px;color:#ffd98c;margin-top:2px;line-height:1.2}
#objDist{font-family:var(--num);font-size:14px;color:var(--amber);margin-top:3px}
#timerBox{padding:8px 26px 12px;text-align:center;position:relative;min-width:230px}
#timerBox::before{content:'';position:absolute;top:0;left:10px;right:10px;height:5px;
  background:repeating-linear-gradient(45deg,var(--amber) 0 9px,#151515 9px 18px)}
#timerBox .tlabel{font-size:11px;letter-spacing:4px;color:#c99b56;margin-top:8px;font-weight:700}
#timer{font-family:var(--num);font-weight:900;font-size:46px;color:var(--amber);line-height:1.05;letter-spacing:2px;text-shadow:0 0 18px rgba(255,150,40,.35)}
#timerBox.danger #timer{color:var(--alert);animation:tpulse .5s infinite}
#timerBox.danger::before{background:repeating-linear-gradient(45deg,var(--alert) 0 9px,#151515 9px 18px)}
@keyframes tpulse{50%{opacity:.45}}
#mapBox{padding:8px 8px 4px;text-align:center}
#minimap{display:block;background:#0c1410;border:1px solid #2c3a2c}
#mapBox .maplabel{font-size:10px;letter-spacing:4px;color:#7fae86;margin:4px 0 2px;font-weight:700}
#toasts{position:absolute;top:118px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{font-family:var(--disp);font-size:20px;padding:8px 26px;background:rgba(20,14,8,.9);
  border:1px solid var(--amber);color:#ffd98c;animation:tin .3s ease-out;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.toast.warn{border-color:var(--alert);color:#ffb0a0}
.toast.good{border-color:var(--lime);color:#c8ffce}
.toast.out{opacity:0;transform:translateY(-10px);transition:.4s}
@keyframes tin{from{opacity:0;transform:translateY(14px) scale(.9)}}
#ringWrap{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);text-align:center;opacity:0;transition:.25s}
#ringWrap.on{opacity:1}
#ring{width:86px;height:86px;border-radius:50%;margin:0 auto;position:relative;
  background:conic-gradient(#ffcf4d calc(var(--p,0)*1turn),rgba(255,255,255,.13) 0)}
#ring::after{content:'';position:absolute;inset:10px;border-radius:50%;background:rgba(12,9,6,.92)}
#ringIcon{position:absolute;inset:0;display:grid;place-items:center;font-size:32px;z-index:2}
#ringTxt{font-family:var(--disp);font-size:19px;color:#ffe6a8;margin-top:8px;text-shadow:0 2px 6px #000}
#speedo{position:absolute;left:16px;bottom:16px;padding:12px 20px 14px;min-width:180px}
#speedo .row{display:flex;align-items:baseline;gap:8px}
#speedVal{font-family:var(--num);font-weight:900;font-size:46px;color:#fff;line-height:1}
#gearVal{font-family:var(--num);font-size:15px;color:var(--amber);border:1px solid var(--line);padding:1px 7px}
#speedo .unit{font-size:12px;color:#b58a4a;letter-spacing:2px}
#spdBar{height:6px;background:#241a10;margin-top:9px;overflow:hidden}
#spdFill{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--alert));transition:width .1s}
#hints{position:absolute;right:16px;bottom:16px;font-size:12px;color:#c9ab79;background:rgba(15,11,8,.7);
  padding:7px 14px;border:1px solid #3a2c18;letter-spacing:1px}
#camTag{color:var(--amber);font-weight:700}
#muteBtn{position:absolute;right:16px;top:170px;pointer-events:auto;cursor:pointer;font-size:17px;
  background:var(--panel);border:1px solid var(--line);color:var(--amber);padding:6px 10px}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:40;transition:opacity 1.4s}
#dangerPulse{position:fixed;inset:0;pointer-events:none;z-index:15;opacity:0;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(255,40,15,.5) 100%)}
#dangerPulse.on{animation:dpulse 1s infinite}
@keyframes dpulse{0%,100%{opacity:.15}50%{opacity:.7}}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:14;
  background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.5) 100%)}

/* ---------- 开始界面 ---------- */
#startScreen{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:radial-gradient(1200px 700px at 70% -10%,#5a2113 0%,#241009 45%,#120b09 100%)}
.streak{position:absolute;width:220px;height:2px;background:linear-gradient(90deg,transparent,#ff9a4d);
  filter:drop-shadow(0 0 6px #ff7b2e);animation:fall linear infinite;opacity:.8}
.streak:nth-child(1){top:8%;left:85%;animation-duration:2.6s}
.streak:nth-child(2){top:22%;left:60%;animation-duration:3.4s;animation-delay:.9s;width:160px}
.streak:nth-child(3){top:4%;left:35%;animation-duration:4.2s;animation-delay:1.7s;width:300px}
@keyframes fall{from{transform:translate(120px,-80px) rotate(155deg);opacity:0}15%{opacity:.9}to{transform:translate(-700px,430px) rotate(155deg);opacity:0}}
#alertbar{background:repeating-linear-gradient(45deg,#241407 0 16px,#38200c 16px 32px);
  border-bottom:2px solid var(--alert);overflow:hidden;white-space:nowrap;padding:9px 0}
#alertbar span{display:inline-block;font-weight:700;color:#ffb59d;letter-spacing:2px;font-size:14px;
  animation:scrollx 22s linear infinite}
@keyframes scrollx{from{transform:translateX(60vw)}to{transform:translateX(-100%)}}
#brief{margin:auto;max-width:860px;padding:30px 26px;text-align:center;position:relative;z-index:2}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:4px;color:#ff8f7a;font-weight:700;
  border:1px solid #7a3324;padding:4p.........完整代码请登录后点击上方下载按钮下载查看