diff --git a/Games/Path_finder_Challenge/README.md b/Games/Path_finder_Challenge/README.md new file mode 100644 index 0000000000..48ba399c2f --- /dev/null +++ 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 nikitatewari1633@gmail.com \ No newline at end of file diff --git a/Games/Path_finder_Challenge/image.png b/Games/Path_finder_Challenge/image.png new file mode 100644 index 0000000000..8aa6b3af0f Binary files /dev/null and b/Games/Path_finder_Challenge/image.png differ diff --git a/Games/Path_finder_Challenge/index.html b/Games/Path_finder_Challenge/index.html new file mode 100644 index 0000000000..8e399c6eef --- /dev/null +++ b/Games/Path_finder_Challenge/index.html @@ -0,0 +1,25 @@ + + + + + + Path Finder Challenge Game + + + +
+
+
+
Score: 0
+
Time: 60s
+ + +
+
+ + + + diff --git a/Games/Path_finder_Challenge/script.js b/Games/Path_finder_Challenge/script.js new file mode 100644 index 0000000000..5548ee1572 --- /dev/null +++ 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 new file mode 100644 index 0000000000..4862b22b2a --- /dev/null +++ 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 index dc4f71fcc3..ba6e52deb3 100644 --- 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) | diff --git a/assets/images/Path_Finder_Challenge.png b/assets/images/Path_Finder_Challenge.png new file mode 100644 index 0000000000..934c9fe60d Binary files /dev/null and b/assets/images/Path_Finder_Challenge.png differ