💩 VS 🚽

Score: 0
Time: 30
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>💩 VS 🚽</title>
  <style>
    body {
      font-size: 20px;
      text-align: center;
    }
    canvas {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <header>
    <h1>💩 VS 🚽</h1>
  </header>
  <canvas id="canvas" width="600" height="400"></canvas>
  <p id="score">Score: 0</p>
  <p id="time">Time: 30</p>
  <script>
    // Canvasの準備
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    // ゲームの設定
    const poopSize = 30;
    const toiletSize = 50;
    let poopX = 0;
    let poopY = 0;
    let toiletX = 0;
    let toiletY = 0;
    let score = 0;
    let time = 30;
    
    // ゲーム開始
    const intervalId = setInterval(() => {
      // プレイヤーが新しい💩を召喚する
      canvas.addEventListener('click', (e) => {
        poopX = e.clientX - canvas.getBoundingClientRect().left - (poopSize / 2);
        poopY = e.clientY - canvas.getBoundingClientRect().top - (poopSize / 2);
      });
      
      // 🚽をランダムな位置に召喚する
      toiletX = Math.floor(Math.random() * (canvas.width - toiletSize));
      toiletY = Math.floor(Math.random() * (canvas.height - toiletSize));
      
      // 描画の初期化
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // 💩の描画
      if (poopX > 0 && poopY > 0) {
        ctx.beginPath();
        ctx.fillStyle = '#8B4513';
        ctx.arc(poopX + (poopSize / 2), poopY + (poopSize / 2), poopSize / 2, 0, 2 * Math.PI);
        ctx.fill();
      }
      
      // 🚽の描画
      ctx.beginPath();
      ctx.fillStyle = 'green';
      ctx.fillRect(toiletX, toiletY, toiletSize, toiletSize);
      
      // 衝突判定
      if (poopX > toiletX - poopSize && poopX < toiletX + toiletSize && poopY > toiletY - poopSize && poopY < toiletY + toiletSize) {
        score++;
        poopX = 0;
        poopY = 0;
      }
      
      // スコアと時間の表示
      document.getElementById('score').innerHTML = `Score: ${score}`;
      document.getElementById('time').innerHTML = `Time: ${time}`;
      
      // 制限時間のカウントダウン
      time--;
      
      // 制限時間が終了した場合の処理
      if (time < 0) {
        clearInterval(intervalId);
        alert('Time\'s Up! Your Score: ' + score);
      }
    }, 1000);
  </script>
</body>
</html>