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">
<title>🌻 开心菜园 · 3D 种菜体验</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --wood:#8a5a2b; --wood-d:#6d451f; --paper:#fff8e7;
  --green:#4c9a3f; --green-d:#37762d; --sun:#ffcf4d;
  --tomato:#e8543f; --ink:#4a3319;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:'Noto Sans SC',sans-serif;background:#9fdcf5;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
#scene{position:fixed;inset:0}
#scene canvas{display:block;cursor:grab}
#vignette{position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(35,60,20,.22) 100%)}
.hud{position:fixed;z-index:10;pointer-events:none}

/* ── 木牌标题 ── */
#sign{top:16px;left:16px;background:linear-gradient(#b07a3e,#96622c);border:3px solid var(--wood-d);
  border-radius:14px;padding:10px 20px 12px;transform:rotate(-2deg);
  box-shadow:0 6px 0 #5b3a1a,0 12px 26px rgba(0,0,0,.28)}
#sign h1{font-family:'ZCOOL KuaiLe';font-size:30px;color:var(--paper);text-shadow:0 2px 0 var(--wood-d);letter-spacing:3px}
#sign p{font-size:11px;color:#ffe9b8;letter-spacing:5px;margin-top:2px}

/* ── 顶部状态条 ── */
#stats{top:16px;right:16px;display:flex;gap:10px;align-items:center}
.chip{background:var(--paper);border:3px solid var(--wood);border-radius:999px;padding:7px 15px;
  font-weight:700;color:var(--ink);box-shadow:0 4px 0 rgba(109,69,31,.5);
  display:flex;align-items:center;gap:6px;font-size:14px;pointer-events:auto}
.chip .val{font-family:'ZCOOL KuaiLe';font-size:18px}
.icon-btn{cursor:pointer;transition:transform .15s;font-size:16px}
.icon-btn:hover{transform:translateY(-3px) rotate(-6deg)}
#coinChip.pop{animation:coinPop .45s}
@keyframes coinPop{35%{transform:scale(1.22) rotate(-3deg)}}
#helpBtn{animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 4px 0 rgba(109,69,31,.5)}50%{box-shadow:0 4px 0 rgba(109,69,31,.5),0 0 0 9px rgba(255,207,77,.28)}}

/* ── 提示气泡 ── */
#toast{position:fixed;top:78px;left:50%;transform:translateX(-50%) translateY(-18px);z-index:20;
  background:rgba(74,51,25,.93);color:var(--paper);padding:10px 24px;border-radius:999px;
  font-weight:700;font-size:14px;opacity:0;transition:.25s;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.25);white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 农田信息面板 ── */
#infoPanel{right:16px;top:50%;transform:translateY(-50%);width:218px;
  background:rgba(255,248,231,.96);border:3px solid var(--wood);border-radius:16px;
  padding:12px 14px;box-shadow:0 6px 0 rgba(109,69,31,.45)}
.ip-head{font-family:'ZCOOL KuaiLe';font-size:17px;color:var(--ink);
  border-bottom:2px dashed #d8c39a;padding-bottom:6px;margin-bottom:8px}
.ip-title{font-family:'ZCOOL KuaiLe';font-size:21px;color:var(--ink)}
.ip-status{font-size:12px;color:#7a5b33;margin:4px 0 2px;font-weight:700}
.ip-empty{font-size:13px;color:#7a5b33;line-height:1.8;padding:6px 0}
.ip-stats{margin-top:8px;font-size:12px;color:#7a5b33;border-top:2px dashed #d8c39a;padding-top:8px}
.ip-stats b{color:var(--tomato);font-family:'ZCOOL KuaiLe';font-size:15px}
.ip-row{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12px;color:#7a5b33}
.ip-row span{width:30px;flex:none;font-weight:700}
.ip-row em{width:38px;flex:none;text-align:right;font-style:normal;font-weight:700;color:var(--ink)}
.bar{flex:1;height:11px;background:#e8dcc0;border-radius:99px;overflow:hidden;border:1px solid #d3c19a}
.bar i{display:block;height:100%;border-radius:99px;transition:width .3s}
.bar.g i{background:linear-gradient(90deg,#7ec850,#4c9a3f)}
.bar.b i{background:linear-gradient(90deg,#7ec8f0,#3a8fd4)}
.bar.f i{background:linear-gradient(90deg,#ffd76a,#e09a1f)}
.ip-pest{margin-top:10px;background:#ffe3dc;border:2px solid var(--tomato);color:#b03a28;
  border-radius:10px;padding:6px 10px;font-size:12px;font-weight:700;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.5}}
.ip-ready{margin-top:10px;background:#e6f5dc;border:2px solid var(--green);color:var(--green-d);
  border-radius:10px;padding:6px 10px;font-size:12px;font-weight:700}

/* ── 底部工具栏 ── */
#toolbarWrap{left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
#seedDrawer{display:flex;gap:8px;background:rgba(255,248,231,.96);border:3px solid var(--wood);
  border-radius:16px;padding:10px 12px;box-shadow:0 6px 0 rgba(109,69,31,.45);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:.25s}
#seedDrawer.open{opacity:1;transform:none;pointer-events:auto}
.seed-card{display:flex;flex-direction:column;align-items:center;gap:1px;width:82px;padding:8px 4px;
  border:2px solid #d8c39a;background:#fffdf4;border-radius:12px;cursor:pointer;transition:.15s;font-family:inherit}
.seed-card:hover{transform:translateY(.........完整代码请登录后点击上方下载按钮下载查看