Fantasy Adventure

The Whispering Woods

body { font-family: sans-serif; background-color: #1a1a1a; color: #eee; display: flex; justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ min-height: 100vh; margin: 0; width: 100vw; /* Full viewport width */ height: 100vh; /* Full viewport height */ overflow: hidden; /* Prevent scrollbars */ } .game-container { background-color: #333; border: 2px solid #555; padding: 20px; border-radius: 8px; width: 80%; /* Take up most of the width */ max-width: 800px; /* But not too wide */ max-height: 90vh; /* Limit height to viewport */ display: flex; flex-direction: column; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); overflow: hidden; /* Ensure content stays within container */ } h1 { text-align: center; color: #a0a; /* Fantasy-like color */ margin-bottom: 15px; } .game-output { background-color: #222; border: 1px solid #444; padding: 15px; margin-bottom: 15px; flex-grow: 1; /* Take up available space */ overflow-y: auto; /* Enable vertical scrolling */ white-space: pre-wrap; word-wrap: break-word; color: #ccc; min-height: 100px; /* Minimum height */ max-height: 70vh; /* Maximum height relative to viewport */ } .input-area { display: flex; gap: 10px; } #user-input { flex-grow: 1; padding: 10px; border: 1px solid #444; border-radius: 4px; background-color: #222; color: #eee; font-size: 1em; } #user-input:focus { outline: none; border-color: #a0a; } #send-command { padding: 10px 20px; background-color: #a0a; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; } #send-command:hover { background-color: #c0c; } const gameOutput = document.getElementById('game-output'); const userInput = document.getElementById('user-input'); const sendButton = document.getElementById('send-command'); let currentLocation = 'forest_entrance'; const locations = { forest_entrance: { description: "You stand at the entrance of a dark, ancient forest. A faint path leads north.", exits: { north: 'forest_path' } }, forest_path: { description: "The path winds deeper into the woods. Trees tower overhead, blocking out the sun. You can go south back to the entrance, east towards a clearing, or north deeper into the forest.", exits: { south: 'forest_entrance', east: 'forest_clearing', north: 'deep_forest' } }, forest_clearing: { description: "You arrive at a small clearing. In the center, a moss-covered stone altar stands. The path continues west and east to a riverbank.", exits: { west: 'forest_path', east: 'riverbank' } }, riverbank: { description: "You are at the bank of a small, clear river. The forest clearing is to the west.", exits: { west: 'forest_clearing' } }, deep_forest: { description: "You are now in the deep forest. It's darker and the trees are even taller here. The path continues south and to the east you see a cave entrance.", exits: { south: 'forest_path', east: 'cave_entrance' } }, cave_entrance: { description: "Before you is the dark opening of a cave. A cold breeze wafts out from within. The deep forest is to the west.", exits: { west: 'deep_forest' } } // Add more locations here }; function displayOutput(text) { gameOutput.innerHTML += `> ${text}\n`; gameOutput.scrollTop = gameOutput.scrollHeight; // Auto-scroll to bottom } function processCommand(command) { command = command.trim().toLowerCase(); displayOutput(command); // Echo the command const parts = command.split(' '); const verb = parts[0]; const noun = parts.slice(1).join(' '); // For future use with objects if (verb === 'go') { const direction = noun; if (locations[currentLocation].exits[direction]) { currentLocation = locations[currentLocation].exits[direction]; displayLocation(); } else { displayOutput("You can't go that way."); } } else if (verb === 'look') { displayLocation(); // Re-display current location description } else if (verb === 'help') { displayHelp(); } // Add more commands here (e.g., 'take', 'use', 'inventory') else { displayOutput("I don't understand that command. Type 'help' for commands."); } } function displayLocation() { const location = locations[currentLocation]; displayOutput(`\n${location.description}`); const exits = Object.keys(location.exits).join(', '); displayOutput(`Exits: ${exits}`); } function displayHelp() { displayOutput("\nAvailable commands:"); displayOutput(" go [direction] (north, south, east, west) - move in the given direction"); displayOutput(" look - describe your current location again"); displayOutput(" help - display this help message"); } function startGame() { displayOutput("Welcome to the Whispering Woods!"); displayOutput("Type 'help' to see available commands."); displayLocation(); } // Event listeners sendButton.addEventListener('click', () => { const command = userInput.value; if (command) { processCommand(command); userInput.value = ''; // Clear input field } }); userInput.addEventListener('keypress', (event) => { if (event.key === 'Enter') { sendButton.click(); // Trigger button click on Enter key press } }); // Start the game when the script loads startGame();