Undertale-like Game

body { background-color: #000; color: #fff; font-family: monospace; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #game-container { width: 800px; height: 600px; border: 2px solid #fff; position: relative; } #game-area { width: 100%; height: 100%; position: relative; overflow: hidden; } #dialogue-box { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.8); border-top: 2px solid #fff; padding: 20px; box-sizing: border-box; } #dialogue-text { margin-bottom: 10px; } #action-buttons { display: flex; justify-content: space-around; } .action-button { background-color: #222; color: #fff; border: 1px solid #fff; padding: 5px 15px; cursor: pointer; } .action-button:hover { background-color: #555; } const dialogueTextElement = document.getElementById('dialogue-text'); const actionButtonsContainer = document.getElementById('action-buttons'); const dialogue = [ { text: "You encounter a mysterious figure in a dark room.", actions: [ { text: "Approach", action: "approachFigure" }, { text: "Stay Back", action: "stayBack" } ] }, { id: "approachFigure", text: "The figure turns around. It's...", actions: [ { text: "...", action: "continueApproach" } ] }, { id: "continueApproach", text: "A friendly face! 'Hello there,' they say.", actions: [ { text: "Greet back", action: "greetBack" } ] }, { id: "stayBack", text: "You decide to keep your distance. The figure seems to notice you.", actions: [ { text: "Observe", action: "observeFigure" }, { text: "Leave", action: "leaveRoom" } ] }, { id: "observeFigure", text: "The figure just stands there, silently watching you.", actions: [ { text: "Approach slowly", action: "approachFigure" }, { text: "Leave", action: "leaveRoom" } ] }, { id: "leaveRoom", text: "You slowly back away and leave the room. The mystery remains...", actions: [] // End of this path }, { id: "greetBack", text: "'Greetings! What brings you to this place?' the friendly figure asks.", actions: [ { text: "Ask 'Who are you?'", action: "askWho" }, { text: "Say 'Just exploring'", action: "justExploring" } ] }, { id: "askWho", text: "'I am but a humble traveler,' they reply with a smile.", actions: [ { text: "Continue", action: "continueGreetingPath" } ] }, { id: "justExploring", text: "'Ah, an adventurer! Be careful, this place is full of surprises.'", actions: [ { text: "Continue", action: "continueGreetingPath" } ] }, { id: "continueGreetingPath", text: "The figure seems kind. You feel a sense of cautious optimism.", actions: [ { text: "The End (for now...)", action: "end" } ] }, { id: "end", text: "This is just the beginning of your journey...", actions: [] } ]; let currentDialogueIndex = 0; function showDialogue(index) { const currentDialogue = dialogue[index]; dialogueTextElement.textContent = currentDialogue.text; actionButtonsContainer.innerHTML = ''; // Clear previous buttons if (currentDialogue.actions && currentDialogue.actions.length > 0) { currentDialogue.actions.forEach(action => { const button = document.createElement('button'); button.textContent = action.text; button.classList.add('action-button'); button.addEventListener('click', () => handleAction(action.action)); actionButtonsContainer.appendChild(button); }); } } function handleAction(actionName) { const nextDialogueIndex = dialogue.findIndex(item => item.id === actionName); if (nextDialogueIndex !== -1) { currentDialogueIndex = nextDialogueIndex; } else { currentDialogueIndex++; // Default to next in sequence if no specific action } if (currentDialogueIndex >= dialogue.length) { currentDialogueIndex = dialogue.length - 1; // Stay at the last dialogue } showDialogue(currentDialogueIndex); } showDialogue(currentDialogueIndex); ```