厕所站位挑战

<!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, sans-serif}
body{background:#f0f8ff;color:#222;padding:20px}
#gameBox{max-width:420px;margin:30px auto;text-align:center}
h1{font-size:22px;margin-bottom:12px}
.desc{margin-bottom:20px;font-size:14px;line-height:1.5}
.toiletRow{display:flex;gap:8px;justify-content:center;margin:25px 0}
.cell{
  width:65px;height:90px;border:2px solid #444;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;background:#eef;cursor:pointer;
}
.cell.occupied{background:#bbd;cursor:default}
.cell.player{background:#cfc}
.btn{padding:9px 14px;background:#3478ff;color:#fff;border:none;border-radius:5px;margin:6px;font-size:14px;cursor:pointer}
#resultText{font-size:20px;font-weight:bold;margin:15px 0;min-height:28px}
</style>
</head>
<body>
<div id="gameBox">
<h1>🚽 厕所站位挑战</h1>
<div class="desc">
规则：5个厕格，最左同最右已经有人。<br>
唔可以拣紧贴住人嘅隔篱格！<br>
拣嘅位置要左右隔一个空位先算胜利！
</div>
<div class="toiletRow" id="toiletContainer">
  <div class="cell occupied" data-id="1">👨</div>
  <div class="cell" data-id="2"></div>
  <div class="cell" data-id="3"></div>
  <div class="cell" data-id="4"></div>
  <div class="cell occupied" data-id="5">👩</div>
</div>
<div id="resultText"></div>
<button class="btn" onclick="resetGame()">重新开始</button>
</div>

<script>
const container = document.getElementById("toiletContainer");
const resultText = document.getElementById("resultText");
let gameOver = false;

container.querySelectorAll(".cell").forEach(cell=>{
  cell.onclick = ()=>{
    if(gameOver) return;
    if(cell.classList.contains("occupied")){
      resultText.innerText="❌ 呢格已经有人！";
      return;
    }
    const id = Number(cell.dataset.id);
    // 判断左右邻格有没有人
    let nearPerson = false;
    if(id>1){
      const left = container.querySelector(`[data-id="${id-1}"]`);
      if(left.classList.contains("occupied")) nearPerson=true;
    }
    if(id<5){
      const right = container.querySelector(`[data-id="${id+1}"]`);
      if(right.classList.contains("occupied")) nearPerson=true;
    }
    if(nearPerson){
      cell.classList.add("player");
      cell.innerText="🙂";
      resultText.innerText="💀 输咗！拣咗人隔篱！";
    }else{
      cell.classList.add("player");
      cell.innerText="🙂";
      resultText.innerText="✅ 赢咗！站位完美！";
    }
    gameOver=true;
  }
})

function resetGame(){
  gameOver=false;
  resultText.innerText="";
  const cells = container.querySelectorAll(".cell");
  cells.forEach(c=>{
    c.classList.remove("player");
    if(c.dataset.id==="1") c.innerText="👨";
    else if(c.dataset.id==="5") c.innerText="👩";
    else c.innerText="";
  })
}
</script>
</body>
</html>