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>一起来跳绳！· 3D 跳绳小游戏</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#2b2350; --paper:#fffdf4; --coral:#ff5d5d; --sun:#ffcf3f;
    --teal:#2ec4b6; --blue:#4d96ff; --pink:#ff8fab;
    --disp:'ZCOOL KuaiLe','Noto Sans SC',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overflow:hidden}
  body{
    font-family:'Noto Sans SC',sans-serif; user-select:none; touch-action:none;
    background:linear-gradient(180deg,#3f9fd8 0%,#7cc8e0 34%,#b9e6d8 58%,#ffe9ae 82%,#ffd98a 100%);
  }
  canvas{position:fixed;inset:0;z-index:0;display:block}
  #vignette{position:fixed;inset:0;z-index:5;pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 58%,rgba(30,40,60,.16) 100%)}

  /* ---------- HUD ---------- */
  #hud{position:fixed;top:12px;left:0;right:0;display:flex;justify-content:center;align-items:flex-start;gap:14px;pointer-events:none;z-index:10}
  .pill{background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:7px 16px;font-weight:900;font-size:15px;box-shadow:0 4px 0 rgba(43,35,80,.22);margin-top:20px;color:var(--ink);white-space:nowrap}
  #scoreBox{text-align:center}
  .lbl{font-size:13px;font-weight:900;color:var(--ink);background:var(--sun);border:3px solid var(--ink);border-radius:999px;display:inline-block;padding:2px 16px;box-shadow:0 3px 0 rgba(43,35,80,.22)}
  #scoreVal{font-family:var(--disp);font-size:clamp(54px,10vw,88px);line-height:.95;color:#fff;
    text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),0 7px 0 rgba(43,35,80,.3)}
  #scoreVal.pop{animation:scorePop .35s ease-out}

  #hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(255,253,244,.92);
    border:3px solid var(--ink);border-radius:999px;padding:8px 20px;font-weight:700;color:var(--ink);
    z-index:10;box-shadow:0 4px 0 rgba(43,35,80,.22);font-size:14px;white-space:nowrap}
  #hint b{color:var(--coral)}

  #muteBtn{position:fixed;top:14px;right:14px;z-index:30;width:48px;height:48px;border-radius:50%;
    background:var(--paper);border:3px solid var(--ink);box-shadow:0 4px 0 rgba(43,35,80,.25);font-size:20px;cursor:pointer;transition:transform .1s}
  #muteBtn:active{transform:translateY(3px)}

  #toast{position:fixed;top:22%;left:50%;transform:translateX(-50%) scale(.7);background:var(--sun);
    border:4px solid var(--ink);border-radius:16px;padding:10px 28px;font-family:var(--disp);font-size:26px;color:var(--ink);
    opacity:0;transition:all .25s cubic-bezier(.34,1.56,.64,1);z-index:12;pointer-events:none;box-shadow:0 6px 0 rgba(43,35,80,.25)}
  #toast.show{opacity:1;transform:translateX(-50%) scale(1)}

  #fx{position:fixed;inset:0;pointer-events:none;z-index:11;overflow:hidden}
  .pop{position:absolute;transform:translate(-50%,-50%);font-family:var(--disp);font-size:34px;animation:floatUp .9s ease-out forwards;white-space:nowrap}
  .pop.good{color:#fff;text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),0 5px 0 rgba(43,35,80,.3)}
  .pop.nice{color:var(--teal);text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff}
  .pop.bad{color:var(--coral);font-size:46px;text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink)}

  /* ---------- 覆盖层 ---------- */
.........完整代码请登录后点击上方下载按钮下载查看