-
Notifications
You must be signed in to change notification settings - Fork 839
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5027 from vivekvardhan2810/main
[New game]: Box Merge
- Loading branch information
Showing
6 changed files
with
264 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # *Game_Name* | ||
| Box Merge | ||
|
|
||
| --- | ||
|
|
||
| <br> | ||
|
|
||
| ## *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. | ||
|
|
||
| <br> | ||
|
|
||
| ## *Screenshots 📸* | ||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Box Merge Game</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <h1>Box Merge</h1> | ||
| <div id="controls"> | ||
| <label for="start-number">Start Number:</label> | ||
| <input type="number" id="start-number" value="0"> | ||
| <button id="start-button">Start Game</button> | ||
| </div> | ||
| <div id="game-area"> | ||
| <div id="player-box">0</div> | ||
| </div> | ||
| <div id="score">Score: 0</div> | ||
| <div id="message"></div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.