Add new game Path_finder_challenge

Path Finder Challenge is a grid-based puzzle game where the player must navigate from a source tile to a destination tile on an 8x8 grid. The grid contains various types of tiles, including normal tiles, obstacles, bonuses, and special tiles. The player interacts with the grid by clicking on tiles to select a path. The game ends when the player either successfully reaches the destination or runs out of time. If the player selects an obstacle tile, they lose points.
kunjgit · Aug 9, 2024 · a9bb597 · a9bb597
1 parent 8a6f37d
commit a9bb597
Show file tree

Hide file tree

Showing 7 changed files with 383 additions and 0 deletions.
diff --git a/Games/Path_finder_Challenge/README.md b/Games/Path_finder_Challenge/README.md
@@ -0,0 +1,62 @@
+## About the game
+Path Finder Challenge
+The Path Finder Challenge is a grid-based puzzle game where players navigate from a source tile to a destination tile while avoiding obstacles and collecting bonuses. The game is designed with a dark theme for a modern and immersive experience.
+
+
+# Game Overview
+In Path Finder Challenge, you must find a path from the top-left corner of an 8x8 grid to the bottom-right corner while dealing with obstacles and collecting bonuses. The game is timed, and the goal is to achieve the highest score possible before time runs out.
+
+# Features
+Dark Theme: A sleek, dark theme for an immersive gaming experience.
+Dynamic Grid: An 8x8 grid with randomly placed obstacles, bonuses, and special tiles.
+Score System: Earn points by reaching the destination and avoid obstacles to maximize your score.
+Timer: A countdown timer adds urgency to the game.
+
+# Gameplay
+-Objective: Navigate from the source tile (top-left) to the destination tile (bottom-right) while avoiding obstacles and collecting bonuses.
+-Controls: Click on tiles to select your path. The selected path will be highlighted.
+-Scoring:
+Reaching the destination tile awards 100 points.
+Avoiding obstacles reduces your score by 10 points.
+Collect bonuses for additional points.
+-Timer: You have 60 seconds to achieve the highest score possible. The game ends when the timer reaches zero.
+
+# Installation
+To run the Path Finder Challenge locally, follow these steps:
+
+-Clone the Repository:
+bash
+git clone https://github.com/yourusername/path-finder-challenge.git
+
+-Navigate to the Project Directory:
+bash
+cd path-finder-challenge
+-Open index.html in Your Browser:
+-You can simply open the index.html file in your web browser to start playing.
+
+# Usage
+Click on tiles to select and navigate your path.
+Keep an eye on the score and timer.
+Use the "Start Game" button to begin a new game and "Restart Game" to play again after the game ends.
+
+# Features
+-Dark Theme: Sleek and modern dark theme for an immersive gaming experience.
+-Dynamic Grid: 8x8 grid with randomly assigned tiles, including obstacles, bonuses, and special tiles.
+-Scoring System: Points are awarded for reaching the destination and collecting bonuses, while avoiding obstacles deducts points.
+-Timer: A countdown timer adds a challenge by limiting your time to complete the game.
+-Responsive Design: The game adapts to different screen sizes for a smooth experience across devices.
+-Play the game by navigating through the grid and avoiding obstacles.
+-Restart the game at any time by clicking the "Restart Game" button.
+
+# Points System
+Destination Reached: +100 points for successfully reaching the destination tile.
+Bonus Tiles: +20 points for each bonus tile collected.
+Obstacles: -10 points for each obstacle encountered.
+Normal Tiles: +10 points for each normal tile clicked (except when an obstacle is encountered).
+# image of the game
+![Game Screenshot](assets/images/Path_Finder_Challenge.png)
+
+# More information
+Game Developer: Nikita 
+Assets: All symbols and assets used are free to use and modify.
+Any Queires? Send Messages via my mail [email protected]  
diff --git a/Games/Path_finder_Challenge/image.png b/Games/Path_finder_Challenge/image.png
diff --git a/Games/Path_finder_Challenge/index.html b/Games/Path_finder_Challenge/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Path Finder Challenge Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="game-container">
+        <div class="grid-container"></div>
+        <div class="info-container">
+            <div id="score">Score: 0</div>
+            <div id="timer">Time: 60s</div>
+            <button id="start-game">Start Game</button>
+            <button id="restart-game">Restart Game</button>
+        </div>
+    </div>
+    <div class="game-over hidden">
+        <div>Game Over</div>
+        <div>Your Score: <span id="final-score">0</span></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Path_finder_Challenge/script.js b/Games/Path_finder_Challenge/script.js
@@ -0,0 +1,147 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let score = 0;
+    let time = 60;
+    let timer;
+    let gameRunning = false;
+    const gridSize = 8; // 8x8 grid
+    let sourceIndex, destinationIndex;
+    let selectedPath = []; // Track the selected tiles
+
+    const gridContainer = document.querySelector('.grid-container');
+    const scoreElement = document.getElementById('score');
+    const timerElement = document.getElementById('timer');
+    const gameOverScreen = document.querySelector('.game-over');
+    const finalScoreElement = document.getElementById('final-score');
+    const startGameButton = document.getElementById('start-game');
+    const restartGameButton = document.getElementById('restart-game');
+
+    if (!startGameButton || !restartGameButton) {
+        console.error('One or more of the required elements were not found.');
+        return;
+    }
+
+    // Apply dark theme
+    document.body.classList.add('dark-theme');
+
+    function startGame() {
+        gameRunning = true;
+        time = 60;
+        score = 0;
+        selectedPath = []; // Reset the selected path
+        scoreElement.textContent = `Score: ${score}`;
+        timerElement.textContent = `Time: ${time}s`;
+        gameOverScreen.classList.add('hidden');
+        gridContainer.innerHTML = ''; // Clear existing grid
+        createGrid();
+        startTimer();
+    }
+
+    function createGrid() {
+        for (let i = 0; i < gridSize * gridSize; i++) {
+            const tile = document.createElement('div');
+            tile.className = 'grid-item';
+            tile.dataset.index = i;
+            tile.addEventListener('click', handleTileClick);
+            gridContainer.appendChild(tile);
+
+            // Randomly assign tiles
+            const rand = Math.random();
+            if (rand < 0.15) {
+                tile.classList.add('obstacle');
+            } else if (rand < 0.2) {
+                tile.classList.add('bonus');
+            } else if (rand < 0.5) {
+                tile.classList.add('special');
+            } else {
+                tile.classList.add('normal');
+            }
+        }
+
+        // Set fixed source and destination indices
+        sourceIndex = 0; // Top-left corner
+        destinationIndex = gridSize * gridSize - 1; // Bottom-right corner
+        gridContainer.children[sourceIndex].classList.add('source');
+        gridContainer.children[destinationIndex].classList.add('destination');
+    }
+
+    function handleTileClick(event) {
+        if (!gameRunning) return;
+
+        const tile = event.target;
+        const tileIndex = parseInt(tile.dataset.index);
+
+        if (selectedPath.includes(tileIndex)) return;
+
+        tile.classList.add('selected');
+        selectedPath.push(tileIndex);
+
+        if (tileIndex === destinationIndex) {
+            score += 100;
+            tile.classList.add('active');
+            setTimeout(() => tile.classList.remove('active'), 300);
+            setTimeout(startGame, 500); // Restart the game after reaching destination
+        } else if (tile.classList.contains('obstacle')) {
+            score -= 10;
+            tile.classList.add('obstacle'); // Ensure obstacle styling is applied
+        } else {
+            score += 10;
+        }
+
+        scoreElement.textContent = `Score: ${score}`;
+
+        if (!hasValidPath()) {
+            endGame();
+        }
+    }
+
+    function hasValidPath() {
+        // Implement BFS or DFS to check if there's still a valid path
+        const queue = [sourceIndex];
+        const visited = new Set();
+        visited.add(sourceIndex);
+
+        while (queue.length > 0) {
+            const index = queue.shift();
+
+            if (index === destinationIndex) return true;
+
+            const directions = [-1, 1, -gridSize, gridSize];
+
+            for (const direction of directions) {
+                const newIndex = index + direction;
+
+                if (
+                    newIndex >= 0 &&
+                    newIndex < gridSize * gridSize &&
+                    !visited.has(newIndex) &&
+                    !gridContainer.children[newIndex].classList.contains('obstacle')
+                ) {
+                    visited.add(newIndex);
+                    queue.push(newIndex);
+                }
+            }
+        }
+
+        return false;
+    }
+
+    function startTimer() {
+        timer = setInterval(() => {
+            time--;
+            timerElement.textContent = `Time: ${time}s`;
+            if (time <= 0) {
+                endGame();
+            }
+        }, 1000);
+    }
+
+    function endGame() {
+        clearInterval(timer);
+        gameRunning = false;
+        finalScoreElement.textContent = score;
+        gameOverScreen.classList.remove('hidden');
+    }
+
+    startGameButton.addEventListener('click', startGame);
+    restartGameButton.addEventListener('click', startGame);
+});
diff --git a/Games/Path_finder_Challenge/styles.css b/Games/Path_finder_Challenge/styles.css
@@ -0,0 +1,148 @@
+/* Dark Theme */
+:root {
+    --background-color: #121212;
+    --text-color: #ffffff;
+    --grid-background: #1e1e1e;
+    --grid-item-color: #333333;
+    --button-background: #4caf50;
+    --button-hover-background: #388e3c;
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.game-container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    border-radius: 10px;
+    background-color: var(--grid-background);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(8, 50px);
+    grid-template-rows: repeat(8, 50px);
+    gap: 5px;
+    margin: 0 auto;
+}
+
+.grid-item {
+    width: 50px;
+    height: 50px;
+    background-color: var(--grid-item-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    font-size: 24px; /* Adjust font size for symbols */
+}
+
+.obstacle {
+    background-color: #060100;
+}
+
+.bonus {
+    background-color: #4caf50;
+}
+
+.special {
+    background-color: #ffc107;
+}
+
+.normal {
+    background-color: var(--grid-item-color);
+}
+
+.source {
+    background-color: #2196f3;
+}
+
+.destination {
+    background-color: #ff5722;
+}
+
+.info-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    font-size: 20px;
+}
+
+/*.theme-toggle 
+    display: none; /* Hide theme toggle button as dark theme is always applied */
+
+
+button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    background-color: var(--button-background);
+    color: var(--text-color);
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: var(--button-hover-background);
+}
+
+.game-over {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.hidden {
+    display: none;
+}
+
+.selected {
+    background-color: #d8f4d9; /* Light green for selected path */
+    border: 2px solid #000901;
+    opacity: 0.8;
+}
+
+/* Symbols */
+.grid-item::before {
+    content: "";
+    display: inline-block;
+    font-size: 24px; /* Adjust as needed */
+}
+
+.source::before {
+    content: "🏁"; /* Symbol for the source */
+}
+
+.destination::before {
+    content: "🎯"; /* Symbol for the destination */
+}
+
+.bonus::before {
+    content: "👑"; /* Crown symbol for the bonus */
+}
+
+.obstacle::before {
+    content: "❌"; /* Cross symbol for obstacles */
+}
diff --git a/README.md b/README.md
@@ -844,6 +844,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) |
 | [Tic_Tac_Toe_Neon](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_Tac_Toe_Neon) |
 | [Catch_Craze](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_Craze) |
+| [Path_Finder_Challenge](https://github.com/kunjgit/GameZone/tree/main/Games/Path_Finder_Challenge) |
 
 
  </center>

diff --git a/assets/images/Path_Finder_Challenge.png b/assets/images/Path_Finder_Challenge.png