diff --git a/Games/Catch_Me_If_You_Can/README.md b/Games/Catch_Me_If_You_Can/README.md new file mode 100644 index 0000000000..0fbcbcaa03 --- /dev/null +++ b/Games/Catch_Me_If_You_Can/README.md @@ -0,0 +1,63 @@ + +# **Catch Me If You Can** + + --- + + + +
+ + + +## **Description 📃** + +Welcome to the Catch Me If You Can game! This is a simple and fun game built using HTML, CSS, and JavaScript. Your objective is to whack the balls that appear on the screen and earn points. + + + +## **Functionalities 🎮** + +- Whack the balls as they pop up on the screen. +- Keep track of your score in the top-right corner. +- Balls appear randomly at different positions within the game area. + +
+ + + +## **How to play? 🕹ī¸** + +1. *Objective*: Click on the balls as they appear to earn points. + +2. *Scoring*: Your score is displayed at the top-right corner of the game screen. + +3. *Balls*: Balls will randomly pop up at different positions within the game area. + +4. *Winning*: Keep clicking on balls to increase your score. + + + +
+ + + +## **Screenshots 📸** + + + +
+ + + +![Screenshot](/Games/Catch_Me_If_You_Can/assets/Catch_Me_If_You_Can.png) + + +
+ + + +## **Working video 📹** + +Watch a brief video showcasing the gameplay and features of the Catch Me Of You Can game: + + \ No newline at end of file diff --git a/Games/Catch_Me_If_You_Can/assets/Catch_Me_If_You_Can.png b/Games/Catch_Me_If_You_Can/assets/Catch_Me_If_You_Can.png new file mode 100644 index 0000000000..4088ab792d Binary files /dev/null and b/Games/Catch_Me_If_You_Can/assets/Catch_Me_If_You_Can.png differ diff --git a/Games/Catch_Me_If_You_Can/assets/DemoVideo.mp4 b/Games/Catch_Me_If_You_Can/assets/DemoVideo.mp4 new file mode 100644 index 0000000000..6a974d1a33 Binary files /dev/null and b/Games/Catch_Me_If_You_Can/assets/DemoVideo.mp4 differ diff --git a/Games/Catch_Me_If_You_Can/index.css b/Games/Catch_Me_If_You_Can/index.css new file mode 100644 index 0000000000..96a22bebca --- /dev/null +++ b/Games/Catch_Me_If_You_Can/index.css @@ -0,0 +1,38 @@ +body { + text-align: center; + font-family: Arial, sans-serif; + } + + h1 { + color: #120381; + padding: 1rem; + } + + .game-container { + position: relative; + margin: 0 auto; + width: 400px; + height: 400px; + background-color: #c6fa0b; + border: 5px solid #333; + overflow: hidden; + } + + .monster { + position: absolute; + width: 50px; + height: 50px; + background-color: #d60f94; + border: 2px solid #333; + border-radius: 50%; + cursor: pointer; + } + + .score { + position: absolute; + top: 10px; + right: 10px; + color: #070101; + font-size: 18px; + } + \ No newline at end of file diff --git a/Games/Catch_Me_If_You_Can/index.html b/Games/Catch_Me_If_You_Can/index.html new file mode 100644 index 0000000000..c394d3c285 --- /dev/null +++ b/Games/Catch_Me_If_You_Can/index.html @@ -0,0 +1,13 @@ + + + + + + + +

Catch Me If You Can

+
+
Score: 0
+
+ + diff --git a/Games/Catch_Me_If_You_Can/index.js b/Games/Catch_Me_If_You_Can/index.js new file mode 100644 index 0000000000..eaf155cc0d --- /dev/null +++ b/Games/Catch_Me_If_You_Can/index.js @@ -0,0 +1,40 @@ +let score = 0; +const scoreElement = document.getElementById('score'); + +function randomPosition() { + const gameContainer = document.querySelector('.game-container'); + const maxX = gameContainer.clientWidth - 50; + const maxY = gameContainer.clientHeight - 50; + + const randomX = Math.random() * maxX; + const randomY = Math.random() * maxY; + + return { x: randomX, y: randomY }; +} + +function updateScore() { + score++; + scoreElement.textContent = score; +} + +function createMonster() { + const monster = document.createElement('div'); + monster.classList.add('monster'); + const position = randomPosition(); + monster.style.left = `${position.x}px`; + monster.style.top = `${position.y}px`; + + monster.addEventListener('click', () => { + monster.remove(); + updateScore(); + }); + + document.querySelector('.game-container').appendChild(monster); + + setTimeout(() => { + monster.remove(); + }, 1000); +} + +setInterval(createMonster, 1000); +