Ever played a text-based game? These games, which date back to the early days of computing, have always fascinated me with their simplicity yet immersive nature. Today, I'm going to introduce you to "Mini Zork", a simple text-based game built using HTML, CSS, and JavaScript.
- The HTML Structure: The structure is straightforward. We have a terminal div with an output section for game feedback and an input section to receive commands from the player:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Mini Zork</title>
</head>
<body>
<div id="terminal">
<div id="output"></div>
<div id="input-line">
<span class="prompt">$></span>
<input type="text" id="input" autofocus>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
- Game Logic with JavaScript:
const inputEl = document.getElementById('input');
const outputEl = document.getElementById('output');
inputEl.focus();
inputEl.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
const command = inputEl.value;
handleCommand(command);
inputEl.value = '';
}
});
let currentRoom = 'start';
const rooms = {
start: {
description: "You are in a dark room. There is a door to the north.",
exits: {north: 'hallway'},
},
hallway: {
description: "You are in a long hallway. There is a door to the south and another one to the east.",
exits: {south: 'start', east: 'treasureRoom'},
},
treasureRoom: {
description: "You've found the treasure room! There's a massive chest in the center. Congratulations!",
exits: {west: 'hallway'},
}
};
function handleCommand(command) {
let output = '';
switch(command) {
case 'look':
output = rooms[currentRoom].description;
break;
case 'go north':
if(rooms[currentRoom].exits.north) {
currentRoom = rooms[currentRoom].exits.north;
output = rooms[currentRoom].description;
} else {
output = "You can't go that way.";
}
break;
case 'go south':
if(rooms[currentRoom].exits.south) {
currentRoom = rooms[currentRoom].exits.south;
output = rooms[currentRoom].description;
} else {
output = "You can't go that way.";
}
break;
case 'go east':
if(rooms[currentRoom].exits.east) {
currentRoom = rooms[currentRoom].exits.east;
output = rooms[currentRoom].description;
} else {
output = "You can't go that way.";
}
break;
case 'go west':
if(rooms[currentRoom].exits.west) {
currentRoom = rooms[currentRoom].exits.west;
output = rooms[currentRoom].description;
} else {
output = "You can't go that way.";
}
break;
default:
output = 'Unknown command: ' + command;
}
outputEl.innerHTML += `<div class="prompt">$></div><div>${command}</div><div>${output}</div>`;
}
// Initial description
outputEl.innerHTML += `<div class="prompt">$></div><div>Welcome to Mini Zork!</div><div>${rooms[currentRoom].description}</div>`;
- Styling the Game with CSS: The game has a retro terminal look, achieved by simple CSS:
body, html {
height: 100%;
margin: 0;
font-family: 'Courier New', monospace;
background-color: #000;
color: #00FF00;
}
#terminal {
padding: 20px;
height: 100%;
box-sizing: border-box;
overflow-y: auto;
}
#input-line {
display: flex;
align-items: center;
}
.prompt {
margin-right: 5px;
}
#input {
width: 100%;
border: none;
background: none;
outline: none;
color: inherit;
}
.field {
white-space: pre;
font-size: 20px;
}
- Play the Game: Once everything is set up, launch the HTML page in your browser and start your adventure! Try commands like 'look', 'go north', 'go south', etc. Navigate through the rooms and find the treasure.
Conclusion
Building a simple text-based game like "Mini Zork" is not only a fun project but also a great way to sharpen your web development skills. Feel free to extend the game by adding more rooms, challenges, or even NPCs. Enjoy coding and gaming!
Also i'm going to give you some ways of extending it.
More Rooms and Complex Maps:
Multi-layered Rooms: Introduce rooms that have multiple layers, such as basements or upstairs.
Interconnected World: Instead of a linear path, create loops where rooms can interconnect in multiple ways, making navigation a challenge.
Introduce Items and Inventory:
Players can pick up or drop items, which might be crucial for solving certain puzzles or unlocking specific rooms. For example, finding a key in one room to unlock another room.
Add NPCs (Non-Player Characters):
Introduce characters that provide hints, challenges, or trade items.
Use an array or object to store their dialogues based on the player's progression.
Advanced Commands:
Let players use more complex commands like use or talk to .
Perhaps introduce a basic combat system where players can attack or defend.
Puzzles and Riddles:
Require players to solve puzzles to advance. This could be in the form of riddles, number puzzles, or logic puzzles.
Save and Load System:
Implement a local storage-based save system, so players don't have to start over every time they refresh the page.
Styling and Themes:
Introduce different themes. Perhaps a retro neon theme for a sci-fi story or a sepia-toned theme for a wild west adventure.
Add sound effects or background music for immersion.
Random Events:
Introduce random events or encounters that provide an element of unpredictability to the game. Maybe there's a chance to find a rare item or encounter a mysterious character.
Have fun and extending these will improve your understanding.
Top comments (0)