奶娃跑酷

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>奶娃跑酷</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#87CEEB;overflow:hidden;font-family:system-ui}
#gameBox{width:360px;height:600px;margin:10px auto;background:#fff;position:relative;overflow:hidden;border-radius:12px;border:3px solid #555}
.road{width:100px;height:600px;background:#ddd;position:absolute;left:130px}
.road2{left:20px}
.road3{left:240px}
#baby{width:60px;height:80px;background:#ffc8dd;border-radius:20px;position:absolute;bottom:80px;left:150px;transition:left 0.15s}
#baby.jump{animation: jump 0.6s ease-out;}
#baby.duck{height:40px;bottom:40px;}
#baby::after{content:"🍼";font-size:40px;display:flex;justify-content:center;align-items:center;height:100%}
@keyframes jump{
  0%{bottom:80px}
  50%{bottom:180px}
  100%{bottom:80px}
}
.obstacle{width:50px;height:50px;background:#ff9999;border-radius:8px;position:absolute}
.coin{width:30px;height:30px;background:#ffd700;border-radius:50%;position:absolute}
#score{position:absolute;top:10px;left:10px;font-size:22px;font-weight:bold}
#tip{position:absolute;top:40px;left:10px;font-size:14px;color:#444}
</style>
</head>
<body>
<div id="gameBox">
  <div class="road road2"></div>
  <div class="road"></div>
  <div class="road road3"></div>
  <div id="baby"></div>
  <div id="score">分数：0</div>
  <div id="tip">A/D换轨道 W跳跃 S下蹲</div>
</div>
<script>
const baby = document.getElementById("baby")
const gameBox = document.getElementById("gameBox")
const scoreDom = document.getElementById("score")
let lane = 1
let score = 0
let gameSpeed = 6
let gameRun = true
let isJumping = false
let isDucking = false

const laneX = [40, 150, 260]

function moveBaby(){
  baby.style.left = laneX[lane] + "px"
}
moveBaby()

document.addEventListener("keydown",e=>{
  if(!gameRun) return
  if(e.key==="a"||e.key==="A"){
    if(lane>0) lane--
  }
  if(e.key==="d"||e.key==="D"){
    if(lane<2) lane++
  }
  if((e.key==="w"||e.key==="W") && !isJumping){
    isJumping = true
    baby.classList.add("jump")
    setTimeout(()=>{
      baby.classList.remove("jump")
      isJumping = false
    },600)
  }
  if((e.key==="s"||e.key==="S") && !isDucking){
    isDucking = true
    baby.classList.add("duck")
    setTimeout(()=>{
      baby.classList.remove("duck")
      isDucking = false
    },500)
  }
  moveBaby()
})

function spawnThing(){
  if(!gameRun) return
  const isCoin = Math.random()>0.4
  const thing = document.createElement("div")
  thing.className = isCoin ? "coin" : "obstacle"
  const rLane = Math.floor(Math.random()*3)
  thing.style.left = laneX[rLane] + "px"
  thing.style.top = "-60px"
  gameBox.appendChild(thing)

  function fall(){
    if(!gameRun) return
    let top = parseFloat(thing.style.top)
    top += gameSpeed
    thing.style.top = top + "px"
    const bTop = 520
    const bLeft = laneX[lane]
    let babyHeight = isDucking ? 40 : 80
    if(!isJumping && top>bTop-babyHeight && top<bTop+20){
      const tLeft = parseFloat(thing.style.left)
      if(Math.abs(tLeft - bLeft) < 55){
        if(isCoin){
          score +=10
          scoreDom.innerText = "分数："+score
          thing.remove()
          return
        }else{
          gameRun = false
          alert("游戏结束！奶娃摔倒啦 得分："+score)
          return
        }
      }
    }
    if(top>600){
      thing.remove()
      if(!isCoin) score +=5
      scoreDom.innerText = "分数："+score
      return
    }
    requestAnimationFrame(fall)
  }
  fall()
  setTimeout(spawnThing,700)
}
spawnThing()
</script>
</body>
</html>