JSFiddle - React, Tailwind, and code Playground

by Kofod

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parrot Catch Game</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="start-screen">
  <img src="https://i.imgur.com/is9rMDU.png" alt="Title">
  <h1>Welcome to the Parrot Catch Game!</h1>
  <p>
    Computer users: Move the parrot left and right using the <strong>A / D</strong> keys or the <strong>Arrow keys</strong>.<br><br> Phone/Tablet users: Swipe your finger left and right to move the parrot.<br>
    Catch the falling items:<br>
    - <img src="https://i.imgur.com/Ou0eqX6.png" alt="Apple" style="width:20px;">: +1 point<br>
    - <img src="https://i.imgur.com/97xNLHj.png" alt="Grapes" style="width:20px;">: +3 points<br>
    - <img src="https://i.imgur.com/XUuIBUH.png" alt="Papaya" style="width:20px;">: +5 points<br>
    - <img src="https://i.imgur.com/kN3kwGS.png" alt="Poop" style="width:20px;">: Lose 1 life<br><br>
    Reach 100 points before time runs out! You have 3 lives.
  </p>
  <button id="start-button">Start Game</button>
</div>
  <div id="game">
    <div id="score">Points: 0</div>
    <div id="timer">Time: 60</div>
    <div id="lives"></div>
    <img id="parrot" src="https://i.imgur.com/em7Foxp.png" alt="Parrot">
  </div>

  <div id="popup">
    <div id="popup-message"></div>
    <button id="restart">Restart game</button>
  </div>

  <script src="game.js"></script>
</body>
</html>

CSS

body {
  margin: 0;
  font-family: sans-serif;
}

#start-screen {
  position: fixed;
  top: -15px;
  left: -22px;
  width: 100%;
  height: 100%;
  background: #333 url("background.png") no-repeat center/cover;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  text-align: center;
  padding: 20px;
}

#start-screen h1 {
  font-size: 20px;
  margin-bottom: 15px;
}

#start-screen p {
  font-size: 14px;
  margin-bottom: 20px;
  max-width: 600px;
}

#start-button {
  font-size: 20px;
  padding: 10px 20px;
  background-color:#385400;
  color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
}

#game {
  position: relative;
  width: 960px;
  height: 500px;
  margin: 0 auto;
  touch-action: none;
  background: url("https://i.imgur.com/yqiufon.png") no-repeat center/cover;
  overflow: hidden;
  border: 2px solid #333;
}

#parrot {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80px;
  transition: left 0.05s linear;
}

.falling {
  position: absolute;
  width: 40px;
  height: 40px;
}

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

#timer {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 20px;
}

#lives {
  position: absolute;
  top: 10px;
  right: 10px;
}

#lives img {
  width: 25px;
  margin-left: 5px;
}

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 30px;
  text-align: center;
  border: 1px solid #385400;
  background-color: #95a683;
  border-radius: 15px;
  display: none;
}

#popup-message {
  padding-bottom: 10px;
}

#restart {
  margin-top: 10px; /* Add more space above the button */
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 10px;
  background-color:#385400;
  color:...

JavaScript

$(function () {
  const parrot = $('#parrot');
  let score = 0;
  let lives = 3;
  let timeLeft = 60;
  let gameLoop, timerLoop;
  let isTouching = false;
  const itemPoints = [1, 3, 5, -1];
  const maxItemsOnScreen = 6;

  // Image URLs for falling items
  const itemImages = [
    'https://i.imgur.com/Ou0eqX6.png',      // +1 point
    'https://i.imgur.com/97xNLHj.png', // +3 points
    'https://i.imgur.com/XUuIBUH.png',  // +5 points
    'https://i.imgur.com/kN3kwGS.png' // -1 life
  ];

  function updateScore() {
    $('#score').text('Points: ' + score);
  }

  function updateLives() {
    $('#lives').html('');
    for (let i = 0; i < lives; i++) {
      $('#lives').append('<img src="https://i.imgur.com/uXXtmBC.png" alt="Life">');
     }
  }

  function updateTimer() {
    $('#timer').text('Time: ' + timeLeft);
  }

  function showPopup(message) {
    $('#popup-message').html(message);
    $('#popup').show();
  }

  function resetGame() {
    score = 0;
    lives = 3;
    timeLeft = 60;
    parrot.css('left', '50%');
    $('.falling').remove();
    updateScore();
    updateLives();
    updateTimer();
    $('#popup').hide();
    clearTimeout(gameLoop);
    clearInterval(timerLoop);
  }

  function moveParrot(direction) {
    const currentLeft = parrot.position().left;
    const step = 30;
    if (direction === 'left' && currentLeft > 0) {
      parrot.css('left', currentLeft - step);
    }
    if (direction === 'right' && currentLeft < $('#game').width() - parrot.width()) {
      parrot.css('left', currentLeft + step);
    }
  }
  
 $('#game').on('touchstart', function (e) {
  isTouching = true;
  moveParrotToFinger(e.originalEvent.touches[0].clientX);
});

function moveParrotToFinger(fingerX) {
  const gameOffset = $('#game').offset().left;
  const gameWidth = $('#game').width();
  const relativeX = fingerX - gameOffset;
  const parrotWidth = parrot.width();

  // Clamp the new position...