茶叶蛋大冒险

<!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>茶叶蛋大冒险</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui, sans-serif}
body{background:#f8f8f8;overflow:hidden}
#game{width:100vw;height:100vh;position:relative;background:#fff;background-image: linear-gradient(#ddd 1px,transparent 1px),linear-gradient(90deg,#ddd 1px,transparent 1px);background-size:40px 40px;}
.egg{width:60px;height:70px;position:absolute;background:#fff;border:3px solid #222;border-radius:50% 50% 45% 45%;transition:none;}
.eye1{position:absolute;width:12px;height:14px;background:#222;border-radius:50%;top:18px;left:12px}
.eye2{position:absolute;width:12px;height:14px;background:#222;border-radius:50%;top:18px;right:12px}
.mouth{position:absolute;width:22px;height:10px;border-bottom:3px solid #222;border-radius:0 0 20px 20px;bottom:16px;left:19px}
.door{width:70px;height:90px;border:3px solid #222;background:#eee;position:absolute;border-radius:4px}
.platform{position:absolute;height:14px;background:#222;border-radius:2px}
.spike{position:absolute;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:22px solid #222}
#control{position:fixed;bottom:25px;left:0;right:0;padding:0 20px;display:flex;justify-content:space-between;align-items:center}
.btnMove{width:65px;height:65px;border-radius:50%;border:3px solid #333;background:#ffffff90;font-size:26px;margin:0 4px}
.jumpBtn{width:80px;height:80px;border-radius:50%;border:3px solid #333;background:#ffffff90;font-size:24px}
.levelText{position:fixed;top:15px;left:20px;font-size:20px;font-weight:bold}
.tipText{position:fixed;top:45px;left:20px;font-size:14px;color:#444}
#winBox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center}
.winPanel{background:white;padding:30px;border-radius:12px;text-align:center}
</style>
</head>
<body>
<div id="game">
  <div class="levelText">第1关</div>
  <div class="tipText">控制茶叶蛋走到大门通关</div>
  <div class="egg" id="egg">
    <div class="eye1"></div>
    <div class="eye2"></div>
    <div class="mouth"></div>
  </div>
  <div class="door" id="door"></div>
  <div id="winBox">
    <div class="winPanel">
      <h2>🎉 通关！</h2>
      <p>茶叶蛋成功抵达门口</p>
      <br>
      <button onclick="nextLevel()" class="btnMove">下一关</button>
    </div>
  </div>
</div>
<div id="control">
  <div>
    <button class="btnMove" id="leftBtn">←</button>
    <button class="btnMove" id="rightBtn">→</button>
  </div>
  <button class="jumpBtn" id="jumpBtn">跳</button>
</div>

<script>
const egg = document.getElementById("egg");
const door = document.getElementById("door");
const winBox = document.getElementById("winBox");
const gravity = 0.6;
const jumpPower = -14;
const speed = 5;
let vx=0,vy=0;
let x=50,y=300;
let onGround = false;
let currentLevel=1;

//关卡数据
const levels = [
  {eggX:50,eggY:300,doorX:650,doorY:300,platforms:[],spikes:[]},
  {eggX:50,eggY:250,doorX:650,doorY:180,platforms:[{x:350,y:320,w:120},{x:520,y:240,w:120}],spikes:[]},
  {eggX:50,eggY:300,doorX:650,doorY:300,platforms:[],spikes:[{x:320,y:370}]}
]

function loadLevel(lv){
  const lvl = levels[lv-1];
  x=lvl.eggX;y=lvl.eggY;vx=0;vy=0;
  egg.style.left=x+"px";egg.style.top=y+"px";
  door.style.left=lvl.doorX+"px";door.style.top=lvl.doorY+"px";
  //清除旧平台尖刺
  document.querySelectorAll(".platform,.spike").forEach(e=>e.remove());
  lvl.platforms.forEach(p=>{
    const div=document.createElement("div");
    div.className="platform";
    div.style.left=p.x+"px";div.style.top=p.y+"px";div.style.width=p.w+"px";
    document.getElementById("game").appendChild(div);
  })
  lvl.spikes.forEach(s=>{
    const div=document.createElement("div");
    div.className="spike";
    div.style.left=s.x+"px";div.style.top=s.y+"px";
    document.getElementById("game").appendChild(div);
  })
  document.querySelector(".levelText").innerText=`第${lv}关`;
  winBox.style.display="none";
}

//按键控制
let leftHold=false,rightHold=false;
document.getElementById("leftBtn").ontouchstart=()=>leftHold=true;
document.getElementById("leftBtn").ontouchend=()=>leftHold=false;
document.getElementById("rightBtn").ontouchstart=()=>rightHold=true;
document.getElementById("rightBtn").ontouchend=()=>rightHold=false;
document.getElementById("jumpBtn").ontouchstart=()=>{if(onGround) vy=jumpPower;}

function gameLoop(){
  if(leftHold) vx=-speed;
  else if(rightHold) vx=speed;
  else vx=0;
  vy += gravity;
  x += vx;
  y += vy;

  onGround=false;
  //地面碰撞
  const groundY=370;
  if(y>=groundY){y=groundY;vy=0;onGround=true;}
  //平台碰撞
  document.querySelectorAll(".platform").forEach(plat=>{
    const px=parseFloat(plat.style.left);
    const pw=parseFloat(plat.style.width);
    const py=parseFloat(plat.style.top);
    if(x+60>px && x<px+pw && y+70>=py && y+70 < py+20 && vy>0){
      y=py-70;vy=0;onGround=true;
    }
  })
  //尖刺检测
  document.querySelectorAll(".spike").forEach(sp=>{
    const sx=parseFloat(sp.style.left);
    const sy=parseFloat(sp.style.top);
    if(x+60>sx && x<sx+24 && y+70>sy){
      loadLevel(currentLevel);
    }
  })
  //通关检测
  const dx=parseFloat(door.style.left);
  const dy=parseFloat(door.style.top);
  if(x+60>dx && x<dx+70 && y+70>dy){
    winBox.style.display="flex";
  }

  egg.style.left=x+"px";
  egg.style.top=y+"px";
  requestAnimationFrame(gameLoop);
}
function nextLevel(){
  currentLevel++;
  if(currentLevel>levels.length){
    alert("恭喜晒！全部关卡通关！");
    currentLevel=1;
  }
  loadLevel(currentLevel);
}
loadLevel(currentLevel);
gameLoop();
</script>
</body>
</html>