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, maximum-scale=1, user-scalable=no">
<title>纸鸢乘风 · 三维放风筝</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#22333b; --paper:#fdf8ec; --red:#d94f37; --gold:#e8a83c; --gold-d:#a9761f;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Noto Sans SC',system-ui,sans-serif;color:var(--ink);
  background:#bfe0f2;-webkit-user-select:none;user-select:none;
}
#app{position:fixed;inset:0}
#app canvas{display:block;touch-action:none;cursor:grab}
#app canvas:active{cursor:grabbing}

/* ---------- 通用纸面面板 ---------- */
.panel{
  background:rgba(253,248,236,.93);border:2px solid var(--ink);
  border-radius:10px;box-shadow:4px 4px 0 rgba(34,51,59,.85);padding:10px 14px;
}
.num{font-family:'ZCOOL KuaiLe',cursive}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;transition:opacity .4s}
body.menu #hud{opacity:0}

#scorePanel{position:absolute;top:16px;left:16px;min-width:172px}
#scorePanel .lbl{font-size:11px;letter-spacing:.3em;color:#7a6f5c}
#score{font-size:42px;line-height:1.05;color:var(--red)}
#scorePanel .mini{display:flex;gap:12px;margin-top:6px;font-size:12px;color:#4c5a63}
#scorePanel .mini b{color:var(--ink)}

#windPanel{position:absolute;top:16px;right:16px;width:196px}
#windPanel .row{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.2em;color:#7a6f5c}
#windArrow{display:inline-block;font-size:16px;color:var(--red);transition:transform .3s}
#windBar{height:10px;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;background:#fff;margin:7px 0 5px}
#windFill{height:100%;width:35%;background:linear-gradient(90deg,#69b95c,#e8c23c 55%,#e2543e);transition:width .35s}
#windPanel .row2{display:flex;justify-content:space-between;font-size:13px}
#windLabel{font-family:'ZCOOL KuaiLe';color:var(--gold-d)}

#altGauge{position:absolute;right:26px;top:50%;transform:translateY(-42%);display:flex;flex-direction:column;align-items:center;gap:6px}
#altGauge .cap{font-size:11px;letter-spacing:.3em;color:#fff;text-shadow:1px 1px 0 rgba(34,51,59,.6)}
#altTrack{position:relative;width:13px;height:38vh;border:2px solid var(--ink);border-radius:7px;background:rgba(253,248,236,.75);overflow:hidden}
#altFill{position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(0deg,#e8c23c,#e2543e)}
#altVal{font-size:20px;background:rgba(253,248,236,.93);border:2px solid var(--ink);border-radius:8px;padding:1px 8px;box-shadow:3px 3px 0 rgba(34,51,59,.85)}
#altVal small{font-size:11px;color:#7a6f5c}

#linePanel{position:absolute;right:16px;bottom:16px;width:170px}
#linePanel .row{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.15em;color:#7a6f5c}
#lineVal{font-size:24px;color:var(--ink)}
#lineBar{height:7px;border:1.5px solid var(--ink);border-radius:5px;overflow:hidden;background:#fff;margin-top:5px}
#lineFill{height:100%;width:30%;background:#5aa7d6;transition:width .25s}

#helpBar{position:absolute;left:16px;bottom:16px;display:flex;flex-wrap:wrap;gap:8px;max-width:52vw}
.chip{background:rgba(253,248,236,.85);border:1.5px solid var(--ink);border-radius:8px;padding:4px 10px;font-size:12px;box-shadow:2px 2px 0 rgba(34,51,59,.7)}
.chip b{font-family:'ZCOOL KuaiLe';color:var(--red);margin-right:4px}

#gustBanner{
  position:absolute;top:16%;left:50%;transform:translateX(-50%);
  font-family:'ZCOOL KuaiLe';font-size:44px;color:var(--ink);opacity:0;white-space:nowrap;
  text-shadow:3px 3px 0 rgba(253,248,236,.95),-2px -2px 0 rgba(253,248,236,.95),2px -2px 0 rgba(253,248,236,.95),-2px 2px 0 rgba(253,248,236,.95);
}
#gustBanner.show{animation:gust 2.3s ease forwards}
@keyframes gust{0%{opacity:0;transform:translateX(-50%) translateY(-22px) scale(.8)}14%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.05)}22%{transform:translateX(-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-14px)}}

#popups{position:fixed;inset:0;pointer-events:none;z-index:15}
.pop{
  position:absolute;transform:translate(-50%,-100%);font-family:'ZCOOL KuaiLe';font-size:24px;
  color:var(--ink);white-space:nowrap;animation:popUp 1.35s ease-out forwards;
  text-shadow:2px 2px 0 var(--paper),-2px 2px 0 var(--paper),2px -2px 0 var(--paper),-2px -2px 0 var(--paper);
}
.pop.gold{color:var(--gold-d)} .pop.re.........完整代码请登录后点击上方下载按钮下载查看