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>房间整理大作战 · Tidy Room 3D</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧹</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#33241a; --paper:#fff6e8;
  --toy:#ff6b57; --cloth:#2fbf9f; --book:#4f8fe0; --trash:#8f9aa6; --sun:#ffb02e;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:'Noto Sans SC',sans-serif;background:#ffdcb0}
canvas{display:block;cursor:grab}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(70,40,20,.30) 100%)}

/* ---------- HUD ---------- */
#hud{position:fixed;top:0;left:0;right:0;z-index:10;display:none;justify-content:space-between;
  align-items:flex-start;gap:12px;padding:14px 16px;pointer-events:none}
#hud.on{display:flex}
.chip{background:var(--paper);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 4px 0 rgba(51,36,26,.28);padding:7px 16px;font-weight:900;color:var(--ink);
  display:flex;align-items:center;gap:8px;white-space:nowrap}
#timerChip span{font-family:'ZCOOL KuaiLe';font-size:30px;min-width:76px;text-align:center;line-height:1}
#timerChip.danger{background:#ffd7d0;animation:pulse .45s infinite alternate}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.07)}}
#prog{flex:1;max-width:440px;position:relative;height:40px;background:var(--paper);
  border:3px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 rgba(51,36,26,.28)}
#progFill{position:absolute;left:4px;top:4px;bottom:4px;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--toy),var(--sun),var(--cloth),var(--book));
  transition:width .35s cubic-bezier(.34,1.56,.64,1)}
#progBroom{position:absolute;top:-17px;left:0%;font-size:22px;transform:translateX(-50%) rotate(-18deg);
  transition:left .35s cubic-bezier(.34,1.56,.64,1)}
#progText{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;letter-spacing:1px;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.6)}
#scoreChip b{font-family:'ZCOOL KuaiLe';font-size:26px;min-width:64px;text-align:right;line-height:1}
#combo{position:fixed;top:88px;right:18px;z-index:10;pointer-events:none;display:none;
  background:var(--toy);color:#fff;border:3px solid var(--ink);border-radius:14px;
  padding:6px 16px;font-family:'ZCOOL KuaiLe';font-size:22px;box-shadow:0 4px 0 rgba(51,36,26,.28)}
#combo.pop{animation:comboPop .3s}
@keyframes comboPop{0%{transform:scale(1.6) rotate(6deg)}100%{transform:scale(1)}}
#held{position:fixed;left:16px;bottom:16px;z-index:10;pointer-events:none;display:none;font-size:15px}
#held b{color:var(--hc)}
#hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:10;pointer-events:none;
  font-size:15px;max-width:86vw}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 8px))}75%{transform:translateX(calc(-50% + 8px))}}
#toast{position:fixed;top:96px;left:50%;transform:translateX(-50%) translateY(-10px);z-index:15;
  background:var(--ink);color:var(--paper);padding:10px 22px;border-radius:999px;font-weight:700;
  opacity:0;transition:.25s;pointer-events:none;max-width:84vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 覆盖层 ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:16px;background:radial-gradient(circle at 50% 28%,rgba(255,238,214,.86),rgba(255,210,164,.92));
  background-image:radial-gradient(circle at 50% 28%,rgba(255,238,214,.86),rgba(255,210,164,.92)),
  radial-gradient(rgba(51,36,26,.06) 1.5px,transparent 1.5px);background-size:100% 100%,26px 26px}
.overlay.hidden{display:none}
.card{background:var(--paper);border:4px solid var(--ink);border-radius:26px;
  box-shadow:0 10px 0 rgba(51,36,26,.3),0 26px 60px rgba(120,70,30,.35);
  padding:30px 36px;width:min(94vw,620px);max-height:94vh;overflow:auto;text-align:center;position:relative}
.badge{display:inline-block;background:var(--ink);color:var(--sun);font-weight:900;font-size:12px;
  letter-spacing:3px;padding:5px 14px;border-radius:999px;margin-bottom:10px}
.note{position:relative;background:#fff3ae;border:2px solid rgba(51,36,26,.25);border-radius:4px;
  padding:16px 20px 12px;transform:rotate(-2.5deg);font-size:14.5px;line-height:1.8;
  margin:2px auto 14px;max-width:430px;box-shadow:0 8px 16px rgba(51,36,26,.18);color:#4a3826}
.tape{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:112px;height:26px;background:rgba(255,255,255,.55);border:1px dashed rgba(51,36,26,.3)}
.title{font-family:'ZCOOL KuaiLe';font-size:clamp(40px,8vw,72px);line-height:1.08;margin:2px 0 6px;font-weight:400}
.title span{display:inline-block;text.........完整代码请登录后点击上方下载按钮下载查看