Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Game:[The Mystery Adventure Game] #5144

Merged
merged 8 commits into from
Aug 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions Games/The_Mystery_Adventure_Game/README.md
Original file line number Diff line number Diff line change
@@ -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.

40 changes: 40 additions & 0 deletions Games/The_Mystery_Adventure_Game/index.html
Original file line number Diff line number Diff line change
@@ -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>
89 changes: 89 additions & 0 deletions Games/The_Mystery_Adventure_Game/script.js
Original file line number Diff line number Diff line change
@@ -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");
});
103 changes: 103 additions & 0 deletions Games/The_Mystery_Adventure_Game/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1713,6 +1713,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>
Expand Down
Binary file added assets/images/The Mystery Adventure Game.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading