奶蛙快跑

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奶蛙快跑</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui}
body{background:#c8f4dd;display:flex;flex-direction:column;align-items:center;padding:12px;overflow:hidden}
#info{font-size:20px;margin-bottom:8px;color:#222;font-weight:bold}
#gameBox{
  width:600px;height:300px;
  background:#f0fff8;
  border-radius:12px;
  border:3px solid #60c999;
  position:relative;
  overflow:hidden;
}
.ground{
  position:absolute;
  bottom:0;left:0;
  width:100%;height:60px;
  background:#83d9a8;
}
.frog{
  width:44px;height:44px;
  background:#72d887;
  border-radius:50% 50% 45% 45%;
  position:absolute;
  left:80px;bottom:60px;
  transition:bottom 0.25s ease-out;
}
.frog::before{
  content:"";
  position:absolute;
  width:12px;height:12px;
  background:#222;
  border-radius:50%;
  top:6px;left:6px;
}
.frog::after{
  content:"";
  position:absolute;
  width:12px;height:12px;
  background:#222;
  border-radius:50%;
  top:6px;right:6px;
}
.rock{
  width:36px;height:36px;
  background:#999;
  border-radius:8px;
  position:absolute;
  bottom:60px;
}
.star{
  width:30px;height:30px;
  background:#ffd700;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  position:absolute;
  bottom:110px;
}
#tip{margin-top:10px;color:#2d704f}
#restartBtn{
  margin-top:8px;padding:7px 16px;font-size:16px;border:none;
  background:#44b978;color:white;border-radius:8px;cursor:pointer;display:none;
}
</style>
</head>
<body>
<div id="info">分数：0 | 轮次：1/5</div>
<div id="gameBox">
  <div class="ground"></div>
  <div class="frog" id="frog"></div>
</div>
<div id="tip">按【空格】跳跃，躲避石头，吃星星⭐</div>
<button id="restartBtn">重新开始</button>

<script>
const gameBox = document.getElementById('gameBox')
const frog = document.getElementById('frog')
const infoDom = document.getElementById('info')
const tipDom = document.getElementById('tip')
const restartBtn = document.getElementById('restartBtn')

let score = 0
let round = 1
let maxRound = 5
let speed = 4
let isJump = false
let jumpH = 0
let gravity = 3
let gameOver = false
let obstacles = []
let stars = []
let frameId

// 创建障碍物
function createRock(){
  const r = document.createElement('div')
  r.className = "rock"
  r.style.left = "600px"
  gameBox.appendChild(r)
  obstacles.push(r)
}
// 创建星星
function createStar(){
  const s = document.createElement('div')
  s.className = "star"
  s.style.left = "650px"
  gameBox.appendChild(s)
  stars.push(s)
}

// 跳跃
function jump(){
  if(isJump || gameOver) return
  isJump = true
  jumpH = 90
}

// 碰撞检测
function checkCollision(ax,aw,ay,ah,bx,bw,by,bh){
  return ax < bx+bw && ax+aw > bx && ay < by+bh && ay+ah > by
}

function loop(){
  if(gameOver) return

  // 蛙跳跃下落
  if(isJump){
    jumpH -= gravity
    frog.style.bottom = (60 + jumpH)+"px"
    if(jumpH <= 0){
      jumpH = 0
      isJump = false
      frog.style.bottom = "60px"
    }
  }

  // 移动石头
  for(let i=obstacles.length-1;i>=0;i--){
    const o = obstacles[i]
    let l = parseFloat(o.style.left)
    l -= speed
    o.style.left = l+"px"
    // 碰撞
    let fLeft = 80
    let fBot = 60 + jumpH
    if(checkCollision(fLeft,44,fBot,44, l,36,60,36)){
      gameOver = true
      tipDom.innerText = "💥撞到石头！游戏结束"
      restartBtn.style.display = "block"
      cancelAnimationFrame(frameId)
      return
    }
    if(l < -40){
      o.remove()
      obstacles.splice(i,1)
    }
  }

  // 移动星星
  for(let i=stars.length-1;i>=0;i--){
    const s = stars[i]
    let l = parseFloat(s.style.left)
    l -= speed
    s.style.left = l+"px"
    let fLeft = 80
    let fBot = 60 + jumpH
    if(checkCollision(fLeft,44,fBot,44, l,30,110,30)){
      score +=10
      s.remove()
      stars.splice(i,1)
      updateInfo()
      continue
    }
    if(l < -35){
      s.remove()
      stars.splice(i,1)
    }
  }

  frameId = requestAnimationFrame(loop)
}

function updateInfo(){
  infoDom.innerText = `分数：${score} | 轮次：${round}/${maxRound}`
}

// 定时生成障碍、星星
function spawn(){
  if(gameOver) return
  createRock()
  if(Math.random()>0.4) createStar()

  // 每一轮速度加快
  if(score >= round*30){
    round++
    speed +=1.2
    if(round>maxRound){
      gameOver=true
      tipDom.innerText = "🎉恭喜奶蛙快跑全部通关！"
      restartBtn.style.display="block"
      cancelAnimationFrame(frameId)
      return
    }
    updateInfo()
  }
  setTimeout(spawn, 1200 - round*120)
}

// 键盘空格跳跃
document.addEventListener('keydown',e=>{
  if(e.code === "Space"){
    e.preventDefault()
    jump()
  }
})
// 手机点击屏幕跳跃
gameBox.addEventListener('click',jump)

function restart(){
  // 清空
  obstacles.forEach(o=>o.remove())
  stars.forEach(s=>s.remove())
  obstacles=[]
  stars=[]
  score=0
  round=1
  speed=4
  jumpH=0
  isJump=false
  gameOver=false
  frog.style.bottom="60px"
  tipDom.innerText="按【空格】跳跃，躲避石头，吃星星⭐"
  restartBtn.style.display="none"
  updateInfo()
  cancelAnimationFrame(frameId)
  loop()
  spawn()
}

restart()
</script>
</body>
</html>