Add files via upload

kunjgit · Aug 9, 2024 · c017c46 · c017c46
1 parent 19c1063
commit c017c46
Show file tree

Hide file tree

Showing 4 changed files with 232 additions and 0 deletions.
diff --git a/Games/Themystery/Dream Library.jpeg b/Games/Themystery/Dream Library.jpeg
diff --git a/Games/Themystery/index.html b/Games/Themystery/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/Themystery/script.js b/Games/Themystery/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/Themystery/style.css b/Games/Themystery/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;
+}