kunjgit · kunjgit · Jul 31, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/Games/Box_Merge/README.md b/Games/Box_Merge/README.md
@@ -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 📸*
+![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
@@ -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>
diff --git a/Games/Box_Merge/script.js 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;
+  }
+});
diff --git a/Games/Box_Merge/style.css 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;
+}
diff --git a/README.md b/README.md
@@ -888,7 +888,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