Merge pull request #5144 from priyashuu/main

New Game:[The Mystery Adventure Game]
kunjgit · Aug 10, 2024 · ccc42cc · ccc42cc
2 parents 8dc403f + 62427ad
commit ccc42cc
Show file tree

Hide file tree

Showing 7 changed files with 285 additions and 0 deletions.
diff --git a/Games/The_Mystery_Adventure_Game/Dream Library.jpeg b/Games/The_Mystery_Adventure_Game/Dream Library.jpeg
diff --git a/Games/The_Mystery_Adventure_Game/README.md b/Games/The_Mystery_Adventure_Game/README.md
@@ -0,0 +1,52 @@
+
+
+# Mystery Adventure Game
+
+## Overview
+
+Embark on an engaging mystery adventure where players explore immersive environments, solve challenging puzzles, and uncover hidden secrets. Built with HTML, CSS, and JavaScript, this game offers a seamless and interactive experience for players seeking intrigue and adventure.
+
+## Features
+
+- **Immersive Environments**: Explore beautifully crafted rooms with full-screen, high-resolution backgrounds.
+- **Interactive Gameplay**: Click on objects to collect items and solve puzzles, advancing the storyline.
+- **Dynamic Controls**: Easily navigate between rooms and manage gameplay with start, stop, and restart options.
+- **Responsive Design**: Enjoy a consistent experience across different devices and screen sizes.
+
+## Gameplay
+
+1. **Explore Rooms**: Begin your journey in the Living Room and navigate through various intriguing environments.
+2. **Collect Items**: Interact with objects to gather items essential for solving puzzles.
+3. **Solve Puzzles**: Use collected items to unlock new areas and discover the secrets within.
+4. **Win the Game**: Successfully solve the final puzzle to achieve victory.
+
+## Installation
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/yourusername/mystery-adventure-game.git
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd mystery-adventure-game
+   ```
+3. Open `index.html` in your preferred web browser.
+
+## Technologies Used
+
+- **HTML**: Structure and layout
+- **CSS**: Styling and responsive design
+- **JavaScript**: Interactive functionality and game logic
+
+## Contributing
+
+Contributions are welcome! Feel free to fork the repository, make improvements, and submit pull requests. Whether it's bug fixes, new features, or enhancements, your input is valuable.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgements
+
+- Thanks to all contributors and users for their feedback and support.
+
diff --git a/Games/The_Mystery_Adventure_Game/index.html b/Games/The_Mystery_Adventure_Game/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mystery Adventure Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="game">
+        <h1>Mystery Adventure Game</h1>
+        <div id="roomContainer">
+            <div id="room1" class="room">
+                <h2>Living Room</h2>
+                <div class="object" id="key" data-item="Old Key" style="left: 200px; top: 100px;"></div>
+                <button class="navButton" data-room="room2">Go to Library</button>
+            </div>
+            <div id="room2" class="room" style="display: none;">
+                <h2>Library</h2>
+                <div class="object" id="book" data-item="Mystery Book" style="left: 150px; top: 200px;"></div>
+                <button class="navButton" data-room="room1">Go to Living Room</button>
+                <button id="solvePuzzleButton">Solve Puzzle</button>
+            </div>
+        </div>
+        <div id="dialogue" style="display: none;">
+            <p id="dialogueText"></p>
+            <button id="closeDialogue">Close</button>
+        </div>
+        <div id="inventory">
+            <h2>Inventory</h2>
+            <ul id="inventoryList"></ul>
+        </div>
+        <div id="controls">
+            <button id="stopGameButton">Stop Game</button>
+            <button id="restartGameButton">Restart Game</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/The_Mystery_Adventure_Game/script.js b/Games/The_Mystery_Adventure_Game/script.js
@@ -0,0 +1,89 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const inventoryList = document.getElementById("inventoryList");
+    const dialogueBox = document.getElementById("dialogue");
+    const dialogueText = document.getElementById("dialogueText");
+    const closeDialogueButton = document.getElementById("closeDialogue");
+    const solvePuzzleButton = document.getElementById("solvePuzzleButton");
+    const stopGameButton = document.getElementById("stopGameButton");
+    const restartGameButton = document.getElementById("restartGameButton");
+
+    let gameActive = true;
+
+    // Room Navigation
+    document.querySelectorAll(".navButton").forEach(button => {
+        button.addEventListener("click", function () {
+            if (gameActive) {
+                const targetRoomId = this.getAttribute("data-room");
+                switchRoom(targetRoomId);
+            }
+        });
+    });
+
+    // Object Interaction
+    document.querySelectorAll(".object").forEach(object => {
+        object.addEventListener("click", function () {
+            if (gameActive) {
+                const itemName = this.getAttribute("data-item");
+                addToInventory(itemName);
+                this.style.display = "none";
+            }
+        });
+    });
+
+    // Solve Puzzle
+    solvePuzzleButton.addEventListener("click", function () {
+        if (gameActive) {
+            if (inventoryList.innerHTML.includes("Old Key") && inventoryList.innerHTML.includes("Mystery Book")) {
+                showDialogue("Congratulations! You solved the puzzle and uncovered the secret!");
+                gameActive = false; // Game is won
+            } else {
+                showDialogue("You need more items to solve this puzzle.");
+            }
+        }
+    });
+
+    // Close Dialogue
+    closeDialogueButton.addEventListener("click", function () {
+        dialogueBox.style.display = "none";
+    });
+
+    // Stop Game
+    stopGameButton.addEventListener("click", function () {
+        if (gameActive) {
+            showDialogue("The game has been stopped.");
+            gameActive = false;
+        }
+    });
+
+    // Restart Game
+    restartGameButton.addEventListener("click", function () {
+        inventoryList.innerHTML = ""; // Clear inventory
+        document.querySelectorAll(".object").forEach(object => {
+            object.style.display = "block"; // Reset objects
+        });
+        switchRoom("room1"); // Reset to first room
+        gameActive = true; // Reactivate game
+        showDialogue("The game has been restarted.");
+    });
+
+    function addToInventory(item) {
+        const listItem = document.createElement("li");
+        listItem.textContent = item;
+        inventoryList.appendChild(listItem);
+    }
+
+    function switchRoom(roomId) {
+        document.querySelectorAll(".room").forEach(room => {
+            room.style.display = "none";
+        });
+        document.getElementById(roomId).style.display = "block";
+    }
+
+    function showDialogue(message) {
+        dialogueText.textContent = message;
+        dialogueBox.style.display = "block";
+    }
+
+    // Start game in the first room
+    switchRoom("room1");
+});
diff --git a/Games/The_Mystery_Adventure_Game/style.css b/Games/The_Mystery_Adventure_Game/style.css
@@ -0,0 +1,103 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #ffffff;
+    color: #fff;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    width: 100%;               
+    height: 100vh;  
+    background: url("https://c4.wallpaperflare.com/wallpaper/556/382/458/fantasy-art-artwork-fan-art-science-fiction-wallpaper-preview.jpg");     
+
+
+}
+@keyframes gradientAnimation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+#game {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #444;
+    border-radius: 8px;
+   background: url("https://c4.wallpaperflare.com/wallpaper/780/165/226/digital-art-artwork-video-games-bloodborne-wallpaper-preview.jpg");
+}
+.room {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    background-size: cover;
+    margin-bottom: 20px;
+    display: none;
+}
+
+.room h2 {
+    margin-top: 0;
+}
+
+#room1 {
+    background-image: url('https://media.istockphoto.com/id/1283022900/photo/open-door-with-key.jpg?s=612x612&w=0&k=20&c=TazUzQSI-vN13ccK1qgTjuXgIy-vRDx-hZPPGnP7nkw=');
+}
+
+#room2 {
+    background-image: url('https://c0.wallpaperflare.com/preview/420/125/157/book-float-library-bookstore.jpg');
+}
+
+.object {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: rgba(255, 255, 0, 0.7);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+#inventory {
+    text-align: left;
+}
+
+#inventoryList {
+    list-style-type: none;
+    padding: 0;
+}
+
+.navButton {
+    padding: 10px;
+    margin: 10px;
+    background-color: #555;
+    border: none;
+    color: white;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+#dialogue {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #555;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+#dialogueText {
+    margin-bottom: 20px;
+}
+
+#controls {
+    margin-top: 20px;
+}
+
+#controls button {
+    padding: 10px;
+    margin: 5px;
+    background-color: #555;
+    border: none;
+    color: white;
+    cursor: pointer;
+    border-radius: 5px;
+}
diff --git a/README.md b/README.md
@@ -1717,6 +1717,7 @@ This repository also provides one such platforms where contributers come over an
 
 |[Tower_Building_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Building_Game)|
 |[Cross_Road_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_Road_Game)|
+|[The_Mystery_Adventure_game](https://github.com/kunjgit/GameZone/tree/main/Games/The_Mystery_Adventure_Game)|
 
 
  </center>

diff --git a/assets/images/The Mystery Adventure Game.png b/assets/images/The Mystery Adventure Game.png