diff --git a/Games/ladoo game/index.html b/Games/ladoo game/index.html new file mode 100644 index 000000000..1d64883a8 --- /dev/null +++ b/Games/ladoo game/index.html @@ -0,0 +1,18 @@ + + + + + + Ladoo Catcher Game + + + +
+
+
+
+
+
Score: 0
+ + + diff --git a/Games/ladoo game/readme.md b/Games/ladoo game/readme.md new file mode 100644 index 000000000..eaffca398 --- /dev/null +++ b/Games/ladoo game/readme.md @@ -0,0 +1,40 @@ +# Ladoo Catcher Game + +A simple game where the character catches ladoos falling from the sky. Avoid non-edible items like paper or stone to maintain a high score. + +## How to Play + +- Move the ladoo catcher left or right using the left and right arrow keys. +- Catch ladoos to earn points (+10 for each ladoo caught). +- Avoid non-edible items to prevent point deduction (-5 for each non-edible item caught). + +## Getting Started + +1. Clone or download the repository. +2. Open `index.html` in your web browser to start the game. + +## Gameplay Controls + +- **Left Arrow Key:** Move the ladoo catcher to the left. +- **Right Arrow Key:** Move the ladoo catcher to the right. + +## Scoring + +- Catching Ladoos: +10 points +- Catching Non-edible Items: -5 points + +## Game Customization + +Feel free to customize the game by modifying the code in the following files: + +- **index.html:** HTML structure of the game. +- **style.css:** Styling for the game elements. +- **script.js:** Game logic and behavior. + +## Contributing + +If you find any issues or have suggestions for improvements, feel free to open an issue or create a pull request. + +## License + +This project is licensed under the [MIT License](LICENSE). diff --git a/Games/ladoo game/script.js b/Games/ladoo game/script.js new file mode 100644 index 000000000..578cff7e1 --- /dev/null +++ b/Games/ladoo game/script.js @@ -0,0 +1,100 @@ +document.addEventListener('DOMContentLoaded', () => { + const ladooCatcher = document.querySelector('.ladoo-catcher'); + const ladoo = document.querySelector('.ladoo'); + const nonEdible = document.querySelector('.non-edible'); + const scoreDisplay = document.getElementById('score'); + + let score = 0; + + document.addEventListener('keydown', (event) => { + if (event.key === 'ArrowLeft') { + moveCatcher(-15); // Increased cursor speed + } else if (event.key === 'ArrowRight') { + moveCatcher(15); // Increased cursor speed + } + }); + + function moveCatcher(offset) { + const currentLeft = parseInt(getComputedStyle(ladooCatcher).left); + const newLeft = Math.max(0, Math.min(window.innerWidth - 50, currentLeft + offset)); + ladooCatcher.style.left = `${newLeft}px`; + } + + function dropItem(item) { + const initialPosition = Math.random() * (window.innerWidth - 30); + item.style.left = `${initialPosition}px`; + item.style.top = '0'; + + const fallInterval = setInterval(() => { + const currentTop = parseInt(getComputedStyle(item).top); + const newTop = currentTop + 2; // Slowed down item falling speed + + if (newTop >= window.innerHeight) { + clearInterval(fallInterval); + item.style.display = 'none'; + + // Respawn the item + setTimeout(() => { + item.style.display = 'block'; + dropItem(item); + }, 2000); // Increased delay before respawning item + } else { + item.style.top = `${newTop}px`; + + // Check for collision with ladooCatcher + checkCollision(item); + } + }, 20); + } + + function checkCollision(item) { + const ladooCatcherRect = ladooCatcher.getBoundingClientRect(); + const itemRect = item.getBoundingClientRect(); + + if ( + itemRect.left < ladooCatcherRect.right && + itemRect.right > ladooCatcherRect.left && + itemRect.bottom > ladooCatcherRect.top && + itemRect.top < ladooCatcherRect.bottom + ) { + // Collision occurred + if (item === ladoo) { + // Handle ladoo caught + score += 10; + displayMessage(`+10! Ladoo caught! Total Score: ${score}`, '#32CD32'); // Green color + } else if (item === nonEdible) { + // Handle non-edible item caught + score -= 5; + displayMessage('-5! Non-edible item caught! Total Score: ${score}', '#FF0000'); // Red color + } + + // Update score display + scoreDisplay.textContent = score; + + // Respawn the item + dropItem(item); + } + } + + function displayMessage(message, color) { + const messageElement = document.createElement('div'); + messageElement.textContent = message; + messageElement.style.position = 'absolute'; + messageElement.style.top = '50%'; + messageElement.style.left = '50%'; + messageElement.style.transform = 'translate(-50%, -50%)'; + messageElement.style.color = color; + messageElement.style.fontSize = '24px'; + messageElement.style.fontWeight = 'bold'; + document.body.appendChild(messageElement); + + // Remove the message after a short delay + setTimeout(() => { + document.body.removeChild(messageElement); + }, 1000); + } + + // Start dropping ladoo and non-edible items + dropItem(ladoo); + dropItem(nonEdible); +}); diff --git a/Games/ladoo game/style.css b/Games/ladoo game/style.css new file mode 100644 index 000000000..5d5b26840 --- /dev/null +++ b/Games/ladoo game/style.css @@ -0,0 +1,47 @@ +body { + margin: 0; + overflow: hidden; + } + + .game-container { + position: relative; + width: 100%; + height: 100vh; + background-color: #87CEEB; /* Sky Blue */ + } + + .ladoo-catcher { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + width: 50px; + height: 50px; + background-color: #FFD700; /* Gold */ + border-radius: 50%; + } + + .ladoo, .non-edible { + position: absolute; + width: 30px; + height: 30px; + border-radius: 50%; + } + + .ladoo { + background-color: #8B4513; /* Saddle Brown */ + } + + .non-edible { + background-color: #808080; /* Gray */ + } + + #score { + position: absolute; + top: 10px; + right: 10px; + color: #FF4500; /* Orange Red */ + font-size: 30px; + font-weight: bold; + } + \ No newline at end of file