three实现三维农村80年代儿童爱玩的滚铁环游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维农村80年代儿童爱玩的滚铁环游戏代码

下面为部分代码预览，完整代码请点击下载或在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>滚铁环 · 一九八〇</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@600;900&display=swap" rel="stylesheet">
<style>
:root{
  --paper:#f2e7c9; --paper2:#e7d5a8; --ink:#2a2118; --red:#b8362b; --red-dk:#6f1d15;
  --green:#4d5d3a; --gold:#d9a441;
  --disp:'Ma Shan Zheng','STKaiti','KaiTi',cursive;
  --body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --num:'Noto Serif SC','Songti SC','SimSun',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#c9a877}
body{font-family:var(--body);color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none}
canvas{position:fixed;inset:0;z-index:0;display:block}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .5s}
#hud.on{opacity:1}
.tag{background:var(--red);color:#fff6e6;font-family:var(--disp);display:inline-block;
  padding:2px 14px 4px;border:2px solid var(--red-dk);box-shadow:3px 3px 0 rgba(42,33,24,.35);letter-spacing:.25em}
#scorebox{position:absolute;top:18px;left:20px;text-align:left}
#scorebox .tag{font-size:20px}
#distRow{margin-top:8px;font-family:var(--num);font-weight:900;font-size:52px;line-height:1;
  color:#fff8e8;text-shadow:3px 3px 0 rgba(42,33,24,.45)}
#distRow small{font-size:22px;margin-left:4px}
#bestRow{margin-top:4px;font-size:14px;font-weight:700;color:#fff2d8;text-shadow:2px 2px 0 rgba(42,33,24,.4)}
#gaugebox{position:absolute;top:18px;right:20px;text-align:right}
#gaugebox .tag{font-size:18px}
#gauge{position:relative;width:220px;height:16px;margin-top:9px;border:2.5px solid var(--ink);
  background:linear-gradient(90deg,var(--red) 0 16%,#efe2b8 16% 84%,var(--red) 84% 100%);
  box-shadow:3px 3px 0 rgba(42,33,24,.35)}
#gauge::after{content:'';position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;background:var(--ink);transform:translateX(-1px)}
#needle{position:absolute;top:-7px;width:5px;height:30px;background:var(--ink);left:50%;margin-left:-2.5px;
  transition:left .05s linear;box-shadow:1px 1px 0 rgba(255,248,232,.6)}
#gauge.hot #needle{background:#fff2d8;outline:2px solid var(--red)}
#speedbox{margin-top:10px;display:flex;align-items:center;gap:8px;justify-content:flex-end}
#speedbox .lbl{font-family:var(--disp);font-size:18px;color:#fff8e8;text-shadow:2px 2px 0 rgba(42,33,24,.4)}
#speedbar{width:150px;height:12px;border:2.5px solid var(--ink);background:#efe2b8;box-shadow:3px 3px 0 rgba(42,33,24,.35)}
#speedFill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),#e2542f)}
#spdVal{font-family:var(--num);font-weight:900;color:#fff8e8;text-shadow:2px 2px 0 rgba(42,33,24,.4);font-size:15px;min-width:70px;text-align:right}
#hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:500;
  color:#fff2d8;text-shadow:1px 1px 0 rgba(42,33,24,.5);letter-spacing:.12em;white-space:nowrap}
#msg{position:absolute;top:16%;left:50%;transform:translateX(-50%);font-family:var(--disp);
  font-size:40px;color:#fff8e8;text-shadow:3px 3px 0 var(--red-dk);opacity:0;white-space:nowrap}
#msg.show{animation:msgPop 1.15s ease forwards}
@keyframes msgPop{0%{opacity:0;transform:translateX(-50%) scale(.6)}12%{opacity:1;transform:translateX(-50%) scale(1.12)}
  24%{transform:translateX(-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-16px)}}
#muteBtn{position:absolute;top:18px;left:50%;transform:translateX(-50%);pointer-events:auto;cursor:pointer;
  width:42px;height:42px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);
  font-size:20px;box-shadow:3px 3px 0 rgba(42,33,24,.35)}
#muteBtn:hover{transform:translateX(-50%) scale(1.08)}
#muteBtn.off{color:#b9ab8a;text-decoration:line-through}
#vignette{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .3s;
  box-shadow:inset 0 0 150px 36px rgba(168,38,28,.6)}
#vignette.on{opacity:1}
#floaters{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.floater{position:absolute;font-family:var(--disp);font-size:28px;color:#fff8e8;
  text-shadow:2px 2px 0 var(--red-dk);animation:fUp .95s ease-out forwards;white-space:nowrap}
.floater.bad{color:#ffd9c.........完整代码请登录后点击上方下载按钮下载查看