diff --git a/Games/Box_Merge/README.md b/Games/Box_Merge/README.md new file mode 100644 index 0000000000..5a75ec3d5e --- /dev/null +++ b/Games/Box_Merge/README.md @@ -0,0 +1,30 @@ +# *Game_Name* +Box Merge + +--- + +
+ +## *Description 📃* +Box Merge is an interactive game where players control a colored box to merge with matching-colored boxes, increasing in size and score while avoiding different-colored boxes that cause shrinking and score loss. + +## *Functionalities 🎮* + +1. Click the "Start Game" button to begin. +2. Control your colored box to merge with matching-colored boxes, increasing in size and score. +3. Avoid different-colored boxes that cause your box to shrink and decrease your score. +4. Monitor your score as you play. +5. When your score reaches 100 points, you win the game, displaying a winning message and a button to restart the game. +6. If your box's size becomes too small (number <= 0), you lose the game, displaying a losing message and a button to restart the game. + +1. Controls: Use the arrow keys (left, right, up, down) to move your colored box. +2. Scoring: Each merge with a matching-colored box increases your score by 10 points. Each collision with a different-colored box decreases your score by 5 points. +3. Difficulty: As you merge with matching-colored boxes, the game gets harder as you need to manage a larger box while avoiding shrinkage. +4. Winning Condition: Reach a score of 100 points to win the game. +5. Losing Condition: If your box's size becomes too small (number <= 0), you lose the game. +6. Game Over: When you win or lose, a message is displayed with an option to restart the game. + +
+ +## *Screenshots 📸* +![Box_Merge](https://github.com/user-attachments/assets/c3f63b18-e996-42c4-b492-b7e8f51200ae) diff --git a/Games/Box_Merge/index.html b/Games/Box_Merge/index.html new file mode 100644 index 0000000000..1e040d44dd --- /dev/null +++ b/Games/Box_Merge/index.html @@ -0,0 +1,23 @@ + + + + + + Box Merge Game + + + +

Box Merge

+
+ + + +
+
+
0
+
+
Score: 0
+
+ + + \ No newline at end of file diff --git a/Games/Box_Merge/script.js b/Games/Box_Merge/script.js new file mode 100644 index 0000000000..b7c0336638 --- /dev/null +++ b/Games/Box_Merge/script.js @@ -0,0 +1,122 @@ +const gameArea = document.getElementById('game-area'); +const playerBox = document.getElementById('player-box'); +const scoreDisplay = document.getElementById('score'); +const messageDisplay = document.getElementById('message'); +let score = 0; +let gameActive = false; + +const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff']; +let playerColor = '#0f0'; +playerBox.style.backgroundColor = playerColor; +playerBox.style.boxShadow = `0 0 10px ${playerColor}`; + +const createBox = (number) => { + const box = document.createElement('div'); + box.classList.add('box'); + const color = colors[Math.floor(Math.random() * colors.length)]; + box.style.backgroundColor = color; + box.style.boxShadow = `0 0 10px ${color}`; + box.style.left = `${Math.random() * (gameArea.offsetWidth - 30)}px`; + box.style.top = `${Math.random() * (gameArea.offsetHeight - 30)}px`; + box.textContent = number; + gameArea.appendChild(box); +}; + +const startGame = () => { + const startNumber = parseInt(document.getElementById('start-number').value); + gameActive = true; + score = 0; + scoreDisplay.textContent = `Score: ${score}`; + messageDisplay.textContent = ''; + playerBox.style.width = '30px'; + playerBox.style.height = '30px'; + playerBox.style.left = '385px'; + playerBox.style.top = '285px'; + playerBox.textContent = startNumber; + + const existingBoxes = document.querySelectorAll('.box'); + existingBoxes.forEach(box => box.remove()); + + for (let i = 0; i < 10; i++) { + createBox(i + 1); + } +}; + +document.getElementById('start-button').addEventListener('click', startGame); + +const movePlayer = (direction) => { + if (!gameActive) return; + + const step = 10; + const rect = playerBox.getBoundingClientRect(); + const gameAreaRect = gameArea.getBoundingClientRect(); + switch (direction) { + case 'up': + playerBox.style.top = `${Math.max(rect.top - step - gameAreaRect.top, 0)}px`; + break; + case 'down': + playerBox.style.top = `${Math.min(rect.top + step - gameAreaRect.top, gameArea.offsetHeight - rect.height)}px`; + break; + case 'left': + playerBox.style.left = `${Math.max(rect.left - step - gameAreaRect.left, 0)}px`; + break; + case 'right': + playerBox.style.left = `${Math.min(rect.left + step - gameAreaRect.left, gameArea.offsetWidth - rect.width)}px`; + break; + } + checkCollision(); +}; + +const checkCollision = () => { + const playerRect = playerBox.getBoundingClientRect(); + const boxes = document.querySelectorAll('.box'); + boxes.forEach((box) => { + const boxRect = box.getBoundingClientRect(); + if ( + playerRect.left < boxRect.left + boxRect.width && + playerRect.left + playerRect.width > boxRect.left && + playerRect.top < boxRect.top + boxRect.height && + playerRect.top + playerRect.height > boxRect.top + ) { + if (box.style.backgroundColor === playerColor) { + score += 10; + playerBox.style.width = `${playerRect.width + 10}px`; + playerBox.style.height = `${playerRect.height + 10}px`; + playerBox.textContent = parseInt(playerBox.textContent) + parseInt(box.textContent); + } else { + score -= 5; + playerBox.style.width = `${playerRect.width - 10}px`; + playerBox.style.height = `${playerRect.height - 10}px`; + playerBox.textContent = parseInt(playerBox.textContent) - parseInt(box.textContent); + } + scoreDisplay.textContent = `Score: ${score}`; + box.remove(); + createBox(parseInt(box.textContent)); + + if (score >= 100) { + gameActive = false; + messageDisplay.textContent = 'You win!'; + } else if (parseInt(playerBox.textContent) <= 0) { + gameActive = false; + messageDisplay.textContent = 'You lose!'; + } + } + }); + }; + +document.addEventListener('keydown', (event) => { + switch (event.key) { + case 'ArrowUp': + movePlayer('up'); + break; + case 'ArrowDown': + movePlayer('down'); + break; + case 'ArrowLeft': + movePlayer('left'); + break; + case 'ArrowRight': + movePlayer('right'); + break; + } +}); \ No newline at end of file diff --git a/Games/Box_Merge/style.css b/Games/Box_Merge/style.css new file mode 100644 index 0000000000..2267ec6d1b --- /dev/null +++ b/Games/Box_Merge/style.css @@ -0,0 +1,88 @@ +body { + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background-color: black; + font-family: Arial, sans-serif; +} + +h1 { + color: #0f0; + margin-bottom: 20px; +} + +#controls { + margin-bottom: 20px; +} + +#controls label, #controls input, #controls button { + margin: 5px; +} + +#game-area { + position: relative; + width: 800px; + height: 600px; + background-color: #222; + border: 2px solid #0f0; + overflow: hidden; +} + +#player-box { + position: absolute; + width: 30px; + height: 30px; + background-color: #0f0; + box-shadow: 0 0 10px #0f0; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + color: #000; +} + +.box { + position: absolute; + width: 30px; + height: 30px; + box-shadow: 0 0 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + color: #000; +} + +#score { + margin-top: 20px; + font-size: 24px; + color: #0f0; +} + +#message { + margin-top: 10px; + font-size: 18px; + color: #0f0; +} + +#controls { + margin-top: 20px; +} + +#controls button { + margin: 5px; + padding: 10px; + background-color: #0f0; + border: none; + color: #000; + font-size: 16px; + cursor: pointer; + box-shadow: 0 0 10px #0f0; +} + +#controls button:hover { + background-color: #0a0; +} \ No newline at end of file diff --git a/README.md b/README.md index f6ee64692c..024e9661c4 100644 --- a/README.md +++ b/README.md @@ -891,7 +891,7 @@ This repository also provides one such platforms where contributers come over an |[Samurai_Fighting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Samurai_Fighting_Game)| [Tic-tac-toe](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-tac-toe)| [Quest_For_Riches](https://github.com/kunjgit/GameZone/tree/main/Games/Quest_For_Riches)| [Pattern Creation Game](https://github.com/kunjgit/GameZone/tree/main/Games/Pattern_Creation_Game)| [Magic_8_ball_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Magic_8_ball) | | [Catch_Craze](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_Craze) | [UNO game with computer](https://github.com/kunjgit/GameZone/tree/main/Games/UNO_game_with_Computer) | [Dice_Rolling_Simulator](https://github.com/priyashuu/GameZone/tree/main/Games/Dice_rolling_simulator)| [Space_Dominators](https://github.com/kunjgit/GameZone/tree/main/Games/Space_Dominators)| [Simon_Says](https://github.com/kunjgit/GameZone/tree/main/Games/Simon_Says) | -|[Idle_miner](https://github.com/kunjgit/GameZone/tree/main/Games/Idle_miner)| [Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys) | [Penalty_Shootout_Game] (https://github.com/kunjgit/GameZone/tree/main/Games/Penalty_Shootout_Game)| | [Circuit_Craze](https://github.com/kunjgit/GameZone/tree/main/Games/Circuit_Craze) | | [Flying_Fish](https://github.com/kunjgit/GameZone/tree/main/Games/Flying_Fish) | +|[Idle_miner](https://github.com/kunjgit/GameZone/tree/main/Games/Idle_miner)| [Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys) | [Penalty_Shootout_Game] (https://github.com/kunjgit/GameZone/tree/main/Games/Penalty_Shootout_Game)| | [Circuit_Craze](https://github.com/kunjgit/GameZone/tree/main/Games/Circuit_Craze) | | [Flying_Fish](https://github.com/kunjgit/GameZone/tree/main/Games/Flying_Fish) | | [Box_Merge](https://github.com/kunjgit/GameZone/tree/main/Games/Box_Merge) | |[Idle_miner](https://github.com/kunjgit/GameZone/tree/main/Games/Idle_miner)| [Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys) | [Penalty_Shootout_Game] (https://github.com/kunjgit/GameZone/tree/main/Games/Penalty_Shootout_Game)| |[Snake_Gun_Water](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Gun_Water)| | [Drum_kit] (https://github.com/kunjgit/GameZone/tree/main/Games/Drum_kit)| diff --git a/assets/images/Box_Merge.png b/assets/images/Box_Merge.png new file mode 100644 index 0000000000..33f83fe11a Binary files /dev/null and b/assets/images/Box_Merge.png differ