Merge pull request kunjgit#4769 from ananyag309/main

Added Hexsweep Game
nikki-05 · Jul 12, 2024 · 7fe7854 · 7fe7854
2 parents 7871a2e + 907d023
commit 7fe7854
Show file tree

Hide file tree

Showing 5 changed files with 393 additions and 1 deletion.
diff --git a/Games/Hexsweep-Game/README.md 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
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hex Sweep Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Hex Sweep</h1>
+        <div id="game"></div>
+        <div class="info">
+            <p>Flags: <span id="flag-count">0</span></p>
+            <p>Mines: <span id="mine-count">10</span></p>
+            <p>Time: <span id="timer">0</span> seconds</p>
+        </div>
+    </div>
+    <div id="popup" class="popup">
+        <div class="popup-content">
+            <p id="popup-message"></p>
+            <button id="popup-button">Play Again</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Hexsweep-Game/script.js 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
@@ -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);
+    }
+}