diff --git a/Games/Hexsweep-Game/README.md b/Games/Hexsweep-Game/README.md new file mode 100644 index 0000000000..8c01867272 --- /dev/null +++ b/Games/Hexsweep-Game/README.md @@ -0,0 +1,31 @@ +# 🎮 Hex Sweep Game + +Welcome to Hex Sweep, a fun and challenging Minesweeper-inspired game! 🕹ī¸ + +## đŸŽ¯ Game Description + +Hex Sweep is a twist on the classic Minesweeper game. Instead of a rectangular grid, you'll navigate through a hexagonal grid, searching for hidden mines. Your goal is to uncover all the hexagons that don't contain mines without triggering any of the mines. Can you sweep the board clean without detonating a mine? đŸ’Ĩ + +## 🚀 How to Play + +1. **Objective:** Uncover all hexagons without hitting a mine. +2. **Controls:** + - **Left-click:** Uncover a hexagon. + - **Right-click:** Place a flag on a hexagon to mark it as a suspected mine. +3. **Rules:** + - If you uncover a hexagon with a mine, the game is over. đŸ’Ŗ + - If you uncover all hexagons without mines, you win the game. 🏆 + - Use the numbers on uncovered hexagons to help you figure out where the mines are. Each number indicates how many mines are adjacent to that hexagon. + +## 🌟 Features + +- **Hexagonal Grid:** Navigate through a unique hexagonal grid layout. +- **Dynamic Gameplay:** Each game generates a new board with random mine placements. +- **Timer:** Track how long it takes you to complete the game. ⏱ī¸ +- **Flagging:** Mark suspected mines with flags to help keep track of dangerous spots. 🚩 +- **Responsive Design:** Play comfortably on any device, thanks to a responsive and colorful design. +- **Game Over Popup:** Receive a popup message with the option to play again when the game is over. đŸ“ĸ + +## 🎨 Colorful Design + +Hex Sweep features a vibrant and colorful design, making the game visually appealing and fun to play. 🌈 diff --git a/Games/Hexsweep-Game/index.html b/Games/Hexsweep-Game/index.html new file mode 100644 index 0000000000..da4acf59dd --- /dev/null +++ b/Games/Hexsweep-Game/index.html @@ -0,0 +1,27 @@ + + + + + + Hex Sweep Game + + + +
+

Hex Sweep

+
+
+

Flags: 0

+

Mines: 10

+

Time: 0 seconds

+
+
+ + + + diff --git a/Games/Hexsweep-Game/script.js b/Games/Hexsweep-Game/script.js new file mode 100644 index 0000000000..95c559cbb5 --- /dev/null +++ b/Games/Hexsweep-Game/script.js @@ -0,0 +1,171 @@ +const gameContainer = document.getElementById('game'); +const flagCountDisplay = document.getElementById('flag-count'); +const mineCountDisplay = document.getElementById('mine-count'); +const timerDisplay = document.getElementById('timer'); +const popup = document.getElementById('popup'); +const popupMessage = document.getElementById('popup-message'); +const popupButton = document.getElementById('popup-button'); + +const gridSize = 10; +const mineCount = 10; +let flagCount = 0; +let grid = []; +let minePositions = []; +let timer; +let secondsElapsed = 0; +let isGameOver = false; + +function initializeGame() { + grid = []; + minePositions = []; + flagCount = 0; + secondsElapsed = 0; + isGameOver = false; + clearInterval(timer); + timerDisplay.textContent = secondsElapsed; + flagCountDisplay.textContent = flagCount; + mineCountDisplay.textContent = mineCount; + + for (let i = 0; i < gridSize; i++) { + grid[i] = []; + for (let j = 0; j < gridSize; j++) { + grid[i][j] = { isMine: false, isFlagged: false, isOpen: false, adjacentMines: 0 }; + } + } + + placeMines(); + calculateAdjacentMines(); + renderGrid(); + startTimer(); +} + +function startTimer() { + timer = setInterval(() => { + secondsElapsed++; + timerDisplay.textContent = secondsElapsed; + }, 1000); +} + +function placeMines() { + while (minePositions.length < mineCount) { + const pos = Math.floor(Math.random() * gridSize * gridSize); + const row = Math.floor(pos / gridSize); + const col = pos % gridSize; + + if (!grid[row][col].isMine) { + grid[row][col].isMine = true; + minePositions.push([row, col]); + } + } +} + +function calculateAdjacentMines() { + const directions = [ + [-1, 0], [1, 0], [0, -1], [0, 1], + [-1, -1], [-1, 1], [1, -1], [1, 1] + ]; + + minePositions.forEach(([row, col]) => { + directions.forEach(([dRow, dCol]) => { + const newRow = row + dRow; + const newCol = col + dCol; + + if (newRow >= 0 && newRow < gridSize && newCol >= 0 && newCol < gridSize) { + grid[newRow][newCol].adjacentMines += 1; + } + }); + }); +} + +function renderGrid() { + gameContainer.innerHTML = ''; + grid.forEach((row, rowIndex) => { + row.forEach((cell, colIndex) => { + const hex = document.createElement('div'); + hex.className = 'hex'; + hex.addEventListener('click', () => openCell(rowIndex, colIndex)); + hex.addEventListener('contextmenu', (e) => { + e.preventDefault(); + flagCell(rowIndex, colIndex); + }); + gameContainer.appendChild(hex); + }); + }); +} + +function openCell(row, col) { + if (isGameOver || grid[row][col].isOpen || grid[row][col].isFlagged) return; + + grid[row][col].isOpen = true; + const hex = gameContainer.children[row * gridSize + col]; + + if (grid[row][col].isMine) { + hex.classList.add('mine'); + showPopup('Game Over! You hit a mine.'); + } else { + hex.textContent = grid[row][col].adjacentMines || ''; + hex.style.backgroundColor = '#bbb'; + if (grid[row][col].adjacentMines === 0) { + openAdjacentCells(row, col); + } + checkWinCondition(); + } +} + +function openAdjacentCells(row, col) { + const directions = [ + [-1, 0], [1, 0], [0, -1], [0, 1], + [-1, -1], [-1, 1], [1, -1], [1, 1] + ]; + + directions.forEach(([dRow, dCol]) => { + const newRow = row + dRow; + const newCol = col + dCol; + + if (newRow >= 0 && newRow < gridSize && newCol >= 0 && newCol < gridSize) { + openCell(newRow, newCol); + } + }); +} + +function flagCell(row, col) { + if (isGameOver || grid[row][col].isOpen) return; + + grid[row][col].isFlagged = !grid[row][col].isFlagged; + const hex = gameContainer.children[row * gridSize + col]; + hex.classList.toggle('flagged'); + flagCount += grid[row][col].isFlagged ? 1 : -1; + flagCountDisplay.textContent = flagCount; +} + +function checkWinCondition() { + let isWin = true; + for (let i = 0; i < gridSize; i++) { + for (let j = 0; j < gridSize; j++) { + if (grid[i][j].isMine && !grid[i][j].isFlagged) { + isWin = false; + } + if (!grid[i][j].isMine && !grid[i][j].isOpen) { + isWin = false; + } + } + } + + if (isWin) { + showPopup('Congratulations! You win!'); + } +} + +function showPopup(message) { + popupMessage.textContent = message; + popup.style.display = 'flex'; + isGameOver = true; + clearInterval(timer); +} + +popupButton.addEventListener('click', () => { + popup.style.display = 'none'; + initializeGame(); +}); + +initializeGame(); diff --git a/Games/Hexsweep-Game/styles.css b/Games/Hexsweep-Game/styles.css new file mode 100644 index 0000000000..63aba84525 --- /dev/null +++ b/Games/Hexsweep-Game/styles.css @@ -0,0 +1,162 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f5f5f5; + overflow: hidden; +} + +.container { + text-align: center; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 80%; + max-width: 600px; +} + +h1 { + color: #333; + margin-bottom: 20px; +} + +#game { + display: grid; + grid-template-columns: repeat(10, 40px); + grid-gap: 2px; + margin: 0 auto 20px; + justify-content: center; +} + +.hex { + width: 40px; + height: 46.4px; + background-color: #ddd; + position: relative; + cursor: pointer; + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + transition: background-color 0.2s, transform 0.2s; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; + font-size: 0.8rem; + color: #333; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.hex:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.5); + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + transition: background-color 0.2s; + z-index: 1; +} + +.hex.flagged:before { + background-color: rgba(255, 140, 0, 0.8); +} + +.hex.mine:before { + background-color: rgba(255, 76, 76, 0.8); +} + +.hex:hover:before { + background-color: rgba(0, 0, 0, 0.05); +} + +.hex:active { + transform: scale(0.95); +} + +.hex:nth-child(odd) { + background-color: #b3cde0; +} + +.hex:nth-child(even) { + background-color: #6497b1; +} + +.info { + margin: 20px 0; + display: flex; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; +} + +.info p { + margin: 10px; +} + +button { + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; + background-color: #4CAF50; + color: #fff; + border: none; + border-radius: 4px; + transition: background-color 0.3s; + margin: 20px auto; +} + +button:hover { + background-color: #45a049; +} + +.popup { + display: none; + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + z-index: 1000; +} + +.popup-content { + background-color: #fff; + color: #333; + padding: 20px; + border-radius: 8px; + text-align: center; +} + +.popup-content p { + margin-bottom: 20px; +} + +.popup-content button { + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; + background-color: #4CAF50; + color: #fff; + border: none; + border-radius: 4px; + transition: background-color 0.3s; +} + +.popup-content button:hover { + background-color: #45a049; +} + +@media (max-width: 500px) { + #game { + grid-template-columns: repeat(5, 40px); + } +} diff --git a/README.md b/README.md index 9644bfbcec..5e09bc80cd 100644 --- a/README.md +++ b/README.md @@ -376,6 +376,7 @@ This repository also provides one such platforms where contributers come over an | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) | |[Rock_Paper_Scissors_Neon](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_Paper_Scissors_Neon)| |[Beat_a_mole](https://github.com/kunjgit/GameZone/tree/main/Games/Beat_a_mole)| +|[Hexsweep_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hexsweep-Game)| @@ -929,4 +930,4 @@ Terms and conditions for use, reproduction and distribution are under the [Apach
-

Back to top

\ No newline at end of file +

Back to top