FRUIT CATCHING GAME HTML JAVASCRIPT CSS

Tuesday, 29 April 2025

FRUIT CATCHING GAME HTML JAVASCRIPT CSS

-----------------------------------------------------------------------------------------------------------------

CODE

-----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Fruit Catching Game</title>
  <style>
    body {
      margin: 0;
      background: #aee1f9;
      font-family: sans-serif;
      overflow: hidden;
    }

    #gameArea {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: linear-gradient(to bottom, #aee1f9, #87ceeb);
    }

    .basket {
      width: 100px;
      height: 60px;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: brown;
      border-radius: 20px 20px 0 0;
    }

    .item {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      background-size: cover;
      border-radius: 50%;
    }

    .parachute {
      width: 50px;
      height: 30px;
      position: absolute;
      background: red;
      border-radius: 50% 50% 0 0;
      top: -30px;
      left: -5px;
    }

    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 24px;
      color: #fff;
    }

    #gameOver {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 48px;
      color: red;
      display: none;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="score">Score: 0</div>
    <div class="basket" id="basket"></div>
    <div id="gameOver">💥 Game Over!</div>
  </div>

  <script>
    const gameArea = document.getElementById("gameArea");
    const basket = document.getElementById("basket");
    const scoreDisplay = document.getElementById("score");
    const gameOverText = document.getElementById("gameOver");
    let score = 0;
    let gameOver = false;

    const items = [
      // Fruits
      'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/120px-Red_Apple.jpg',
      'https://upload.wikimedia.org/wikipedia/commons/4/49/Banana.png',
      'https://upload.wikimedia.org/wikipedia/commons/2/2f/Cute_Mango.png',
      'https://upload.wikimedia.org/wikipedia/commons/1/15/Strawberry_icon.png',
      // Bomb
      'https://upload.wikimedia.org/wikipedia/commons/2/2b/Bomb_Icon.svg'
    ];

    document.addEventListener("mousemove", (e) => {
      let x = e.clientX;
      if (x > window.innerWidth - 100) x = window.innerWidth - 100;
      basket.style.left = x + "px";
    });

    function createItem() {
      if (gameOver) return;

      const item = document.createElement("div");
      item.classList.add("item");

      const parachute = document.createElement("div");
      parachute.classList.add("parachute");

      // Randomly pick item
      const index = Math.floor(Math.random() * items.length);
      const imgUrl = items[index];
      const isBomb = imgUrl.includes('Bomb');

      item.style.backgroundImage = `url('${imgUrl}')`;
      item.dataset.type = isBomb ? "bomb" : "fruit";

      item.appendChild(parachute);
      item.style.left = Math.random() * (window.innerWidth - 40) + "px";
      gameArea.appendChild(item);

      let topPos = 0;
      const fall = setInterval(() => {
        if (gameOver) {
          clearInterval(fall);
          if (item.parentNode) gameArea.removeChild(item);
          return;
        }

        topPos += 4;
        item.style.top = topPos + "px";

        const itemRect = item.getBoundingClientRect();
        const basketRect = basket.getBoundingClientRect();

        if (
          itemRect.bottom >= basketRect.top &&
          itemRect.left < basketRect.right &&
          itemRect.right > basketRect.left
        ) {
          clearInterval(fall);
          if (item.dataset.type === "bomb") {
            endGame();
          } else {
            score++;
            scoreDisplay.innerText = "Score: " + score;
            gameArea.removeChild(item);
          }
        }

        if (topPos > window.innerHeight) {
          clearInterval(fall);
          if (item.parentNode) gameArea.removeChild(item);
        }
      }, 20);
    }

    function endGame() {
      gameOver = true;
      gameOverText.style.display = "block";
    }

    setInterval(createItem, 1200);
  </script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------

code2

-----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Emoji Fruit Catching Game</title>
  <style>
    body {
      margin: 0;
      background: #aee1f9;
      font-family: sans-serif;
      overflow: hidden;
    }

    #gameArea {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: linear-gradient(to bottom, #aee1f9, #87ceeb);
    }

    .basket {
      width: 100px;
      height: 60px;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: brown;
      border-radius: 20px 20px 0 0;
    }

    .item {
      position: absolute;
      top: 0;
      font-size: 32px;
      text-align: center;
    }

    .parachute {
      font-size: 28px;
      position: absolute;
      top: -30px;
      left: -5px;
    }

    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 24px;
      color: #fff;
    }

    #gameOver {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 48px;
      color: red;
      display: none;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="score">Score: 0</div>
    <div class="basket" id="basket"></div>
    <div id="gameOver">💥 Game Over!</div>
  </div>

  <script>
    const gameArea = document.getElementById("gameArea");
    const basket = document.getElementById("basket");
    const scoreDisplay = document.getElementById("score");
    const gameOverText = document.getElementById("gameOver");
    let score = 0;
    let gameOver = false;

    const emojis = [
      { emoji: "🍎", type: "fruit" },
      { emoji: "🍌", type: "fruit" },
      { emoji: "🍓", type: "fruit" },
      { emoji: "🥭", type: "fruit" },
      { emoji: "💣", type: "bomb" }
    ];

    document.addEventListener("mousemove", (e) => {
      let x = e.clientX;
      if (x > window.innerWidth - 100) x = window.innerWidth - 100;
      basket.style.left = x + "px";
    });

    function createItem() {
      if (gameOver) return;

      const item = document.createElement("div");
      item.classList.add("item");

      const parachute = document.createElement("div");
      parachute.classList.add("parachute");
      parachute.innerText = "🪂";

      const chosen = emojis[Math.floor(Math.random() * emojis.length)];
      item.innerText = chosen.emoji;
      item.dataset.type = chosen.type;

      item.appendChild(parachute);
      item.style.left = Math.random() * (window.innerWidth - 40) + "px";
      gameArea.appendChild(item);

      let topPos = 0;
      const fall = setInterval(() => {
        if (gameOver) {
          clearInterval(fall);
          item.remove();
          return;
        }

        topPos += 4;
        item.style.top = topPos + "px";

        const itemRect = item.getBoundingClientRect();
        const basketRect = basket.getBoundingClientRect();

        if (
          itemRect.bottom >= basketRect.top &&
          itemRect.left < basketRect.right &&
          itemRect.right > basketRect.left
        ) {
          clearInterval(fall);
          if (item.dataset.type === "bomb") {
            endGame();
          } else {
            score++;
            scoreDisplay.innerText = "Score: " + score;
            item.remove();
          }
        }

        if (topPos > window.innerHeight) {
          clearInterval(fall);
          item.remove();
        }
      }, 20);
    }

    function endGame() {
      gameOver = true;
      gameOverText.style.display = "block";
    }

    setInterval(createItem, 1300);
  </script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------

code with restart button

-----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Emoji Fruit Catching Game</title>
  <style>
    body {
      margin: 0;
      background: #aee1f9;
      font-family: sans-serif;
      overflow: hidden;
    }

    #gameArea {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: linear-gradient(to bottom, #aee1f9, #87ceeb);
    }

    .basket {
      width: 100px;
      height: 60px;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: brown;
      border-radius: 20px 20px 0 0;
    }

    .item {
      position: absolute;
      top: 0;
      font-size: 32px;
      text-align: center;
    }

    .parachute {
      font-size: 28px;
      position: absolute;
      top: -30px;
      left: -5px;
    }

    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 24px;
      color: #fff;
    }

    #gameOver {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 48px;
      color: red;
      display: none;
      text-align: center;
    }

    #restartBtn {
      margin-top: 20px;
      font-size: 20px;
      padding: 10px 20px;
      border: none;
      border-radius: 10px;
      background-color: #28a745;
      color: white;
      cursor: pointer;
    }

    #restartBtn:hover {
      background-color: #218838;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="score">Score: 0</div>
    <div class="basket" id="basket"></div>
    <div id="gameOver">
      💥 Game Over!<br />
      <button id="restartBtn">Restart Game</button>
    </div>
  </div>

  <!-- Sound Effects -->
  <audio id="fruitSound" src="https://www.soundjay.com/buttons/sounds/button-09.mp3" preload="auto"></audio>
  <audio id="bombSound" src="https://www.soundjay.com/explosion/sounds/explosion-01.mp3" preload="auto"></audio>

  <script>
    const gameArea = document.getElementById("gameArea");
    const basket = document.getElementById("basket");
    const scoreDisplay = document.getElementById("score");
    const gameOverText = document.getElementById("gameOver");
    const restartBtn = document.getElementById("restartBtn");

    const fruitSound = document.getElementById("fruitSound");
    const bombSound = document.getElementById("bombSound");

    let score = 0;
    let gameOver = false;
    let itemInterval;

    const emojis = [
      { emoji: "🍎", type: "fruit" },
      { emoji: "🍌", type: "fruit" },
      { emoji: "🍓", type: "fruit" },
      { emoji: "🥭", type: "fruit" },
      { emoji: "💣", type: "bomb" }
    ];

    document.addEventListener("mousemove", (e) => {
      let x = e.clientX;
      if (x > window.innerWidth - 100) x = window.innerWidth - 100;
      basket.style.left = x + "px";
    });

    function createItem() {
      if (gameOver) return;

      const item = document.createElement("div");
      item.classList.add("item");

      const parachute = document.createElement("div");
      parachute.classList.add("parachute");
      parachute.innerText = "🪂";

      const chosen = emojis[Math.floor(Math.random() * emojis.length)];
      item.innerText = chosen.emoji;
      item.dataset.type = chosen.type;

      item.appendChild(parachute);
      item.style.left = Math.random() * (window.innerWidth - 40) + "px";
      gameArea.appendChild(item);

      let topPos = 0;
      const fall = setInterval(() => {
        if (gameOver) {
          clearInterval(fall);
          item.remove();
          return;
        }

        topPos += 4;
        item.style.top = topPos + "px";

        const itemRect = item.getBoundingClientRect();
        const basketRect = basket.getBoundingClientRect();

        if (
          itemRect.bottom >= basketRect.top &&
          itemRect.left < basketRect.right &&
          itemRect.right > basketRect.left
        ) {
          clearInterval(fall);
          if (item.dataset.type === "bomb") {
            bombSound.play();
            endGame();
          } else {
            score++;
            scoreDisplay.innerText = "Score: " + score;
            fruitSound.play();
            item.remove();
          }
        }

        if (topPos > window.innerHeight) {
          clearInterval(fall);
          item.remove();
        }
      }, 20);
    }

    function startGame() {
      score = 0;
      gameOver = false;
      scoreDisplay.innerText = "Score: 0";
      gameOverText.style.display = "none";

      // Remove leftover items
      document.querySelectorAll(".item").forEach(el => el.remove());

      itemInterval = setInterval(createItem, 1300);
    }

    function endGame() {
      gameOver = true;
      gameOverText.style.display = "block";
      clearInterval(itemInterval);
    }

    restartBtn.addEventListener("click", startGame);

    // Start on page load
    startGame();
  </script>
</body>
</html>