<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dondurma'nın Balık Avı</title>
  <style>
    body {
      margin: 0;
      background: #1e1e2f;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      font-family: sans-serif;
      color: white;
      touch-action: none;
    }
    #topBar {
      display: flex;
      justify-content: space-between;
      width: 340px;
      font-size: 18px;
      margin-bottom: 10px;
      font-weight: bold;
    }
    #gameArea {
      width: 340px;
      height: 480px;
      background-image: url('https://assets-development.codepen.io/3/rainbow.jpg');
      background-size: cover;
      background-position: center;
      border: 4px solid #fff;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
    }
    #cat {
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 10px;
      left: 0px;
      font-size: 40px;
      text-align: center;
      line-height: 50px;
      user-select: none;
      will-change: transform;
      transition: filter 0.2s;
    }
    .speed-boost {
      filter: drop-shadow(0 0 10px #fffa65);
    }
    .item {
      position: absolute;
      font-size: 28px;
      user-select: none;
      will-change: transform;
    }
    #gameOverScreen {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      z-index: 10;
    }
    #restartBtn {
      margin-top: 15px;
      padding: 10px 20px;
      font-size: 18px;
      cursor: pointer;
      border: none;
      border-radius: 8px;
      background: #ff4757;
      color: white;
    }
  </style>
</head>
<body>

  <div id="topBar">
    <div>Puan: <span id="score">0</span></div>
    <div>Can: <span id="lives">❤️❤️❤️❤️❤️</span></div>
  </div>

  <div id="gameArea">
    <div id="cat">🐱</div>
    <div id="gameOverScreen">
      <div>OYUN BİTTİ!</div>
      <button id="restartBtn" onclick="restartGame()">Yeniden Başla</button>
    </div>
  </div>

  <script>
    const gameArea = document.getElementById('gameArea');
    const cat = document.getElementById('cat');
    const scoreDisplay = document.getElementById('score');
    const livesDisplay = document.getElementById('lives');
    const gameOverScreen = document.getElementById('gameOverScreen');

    let score = 0;
    let lives = 5;
    let catX = 145;
    let isGameOver = false;
    let speedBoost = false;
    let boostTimer = null;
    const gameWidth = 340;
    let items = [];
    let lastSpawn = 0;
    let animationFrameId;

    // Dokunmatik Kontrol
    gameArea.addEventListener('touchmove', (e) => {
      if (isGameOver) return;
      const rect = gameArea.getBoundingClientRect();
      let touchX = e.touches[0].clientX - rect.left - 25;
      if (touchX < 0) touchX = 0;
      if (touchX > gameWidth - 50) touchX = gameWidth - 50;
      catX = touchX;
      cat.style.transform = `translateX(${catX}px)`;
    }, { passive: true });

    // Klavye Kontrol
    document.addEventListener('keydown', (e) => {
      if (isGameOver) return;
      let moveSpeed = speedBoost ? 45 : 25;
      if (e.key === 'ArrowLeft' && catX > 0) catX -= moveSpeed;
      else if (e.key === 'ArrowRight' && catX < gameWidth - 50) catX += moveSpeed;
      if (catX < 0) catX = 0;
      if (catX > gameWidth - 50) catX = gameWidth - 50;
      cat.style.transform = `translateX(${catX}px)`;
    });

    function updateLivesDisplay() {
      livesDisplay.innerText = '❤️'.repeat(lives);
    }

    function activateSpeedBoost() {
      speedBoost = true;
      cat.classList.add('speed-boost');
      if (boostTimer) clearTimeout(boostTimer);
      boostTimer = setTimeout(() => {
        speedBoost = false;
        cat.classList.remove('speed-boost');
      }, 5000); // 5 saniye hızlı
    }

    function createItem() {
      const item = document.createElement('div');
      item.classList.add('item');

      const rand = Math.random();
      let type = 'fish'; // 🐟

      if (rand < 0.12) {
        type = 'bomb'; // 💣
        item.innerText = '💣';
      } else if (rand < 0.22) {
        type = 'icecream'; // 🍦
        item.innerText = '🍦';
      } else if (rand < 0.30) {
        type = 'eagle'; // 🦅
        item.innerText = '🦅';
      } else {
        item.innerText = '🐟';
      }

      const itemX = Math.floor(Math.random() * (gameWidth - 35));
      const obj = {
        element: item,
        x: itemX,
        y: 0,
        type: type,
        speed: (type === 'eagle' ? 4 : 3) + Math.floor(score / 100)
      };

      item.style.transform = `translate(${obj.x}px, 0px)`;
      gameArea.appendChild(item);
      items.push(obj);
    }

    function gameLoop(timestamp) {
      if (isGameOver) return;

      if (timestamp - lastSpawn > 1100) {
        createItem();
        lastSpawn = timestamp;
      }

      for (let i = items.length - 1; i >= 0; i--) {
        let item = items[i];
        item.y += item.speed;
        item.element.style.transform = `translate(${item.x}px, ${item.y}px)`;

        // Yakalama Kontrolü
        if (item.y >= 410 && item.y <= 450 && Math.abs(item.x - catX) < 38) {
          if (item.type === 'bomb') {
            score = Math.max(0, score - 10);
          } else if (item.type === 'icecream') {
            score += 25; // Dondurma +25 puan!
          } else if (item.type === 'eagle') {
            activateSpeedBoost(); // Kartal hızı verir!
            score += 15;
          } else {
            score += 10; // Normal Balık
          }
          
          scoreDisplay.innerText = score;
          item.element.remove();
          items.splice(i, 1);
          continue;
        }

        // Yere Düşme Kontrolü
        if (item.y > 480) {
          if (item.type === 'fish') {
            lives--;
            updateLivesDisplay();
            if (lives <= 0) {
              endGame();
              return;
            }
          }
          item.element.remove();
          items.splice(i, 1);
        }
      }

      animationFrameId = requestAnimationFrame(gameLoop);
    }

    function endGame() {
      isGameOver = true;
      cancelAnimationFrame(animationFrameId);
      gameOverScreen.style.display = 'flex';
    }

    function restartGame() {
      score = 0;
      lives = 5;
      catX = 145;
      isGameOver = false;
      speedBoost = false;
      cat.classList.remove('speed-boost');
      scoreDisplay.innerText = score;
      updateLivesDisplay();
      cat.style.transform = `translateX(${catX}px)`;
      gameOverScreen.style.display = 'none';

      items.forEach(item => item.element.remove());
      items = [];
      lastSpawn = performance.now();
      requestAnimationFrame(gameLoop);
    }

    cat.style.transform = `translateX(${catX}px)`;
    requestAnimationFrame(gameLoop);
  </script>

</body>
</html>
