Pokemon Dark - Haunter Adventure

body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #222; font-family: 'Press Start 2P', cursive; } #game-container { position: relative; width: 800px; height: 600px; border: 4px solid #444; background-color: #111; overflow: hidden; } #game-screen { width: 100%; height: 100%; position: relative; background-color: #333; } .haunter { position: absolute; width: 64px; height: 64px; background-image: url('haunter.png'); background-size: contain; z-index: 10; } #controls { display: flex; justify-content: center; margin-top: 20px; gap: 10px; } #controls button { width: 50px; height: 50px; font-size: 20px; background-color: #444; color: white; border: none; border-radius: 5px; cursor: pointer; } #controls button:hover { background-color: #666; } #dialogue-box { position: absolute; bottom: 20px; left: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border: 2px solid #666; z-index: 100; } .dialogue-content { margin-bottom: 10px; } .continue-btn { background-color: #444; color: white; border: none; padding: 5px 10px; cursor: pointer; } .hidden { display: none; } class Game { constructor() { this.player = document.getElementById('player'); this.dialogueBox = document.getElementById('dialogue-box'); this.dialogueContent = document.querySelector('.dialogue-content'); this.continueBtn = document.querySelector('.continue-btn'); this.playerX = 400; this.playerY = 300; this.speed = 5; this.isMoving = false; this.currentDialogue = []; this.dialogueIndex = 0; this.initControls(); this.updatePlayerPosition(); this.showDialogue([ "Welcome to Pokemon Dark!", "You are Haunter, a ghost-type Pokemon.", "Explore this dark world and uncover its secrets..." ]); } initControls() { const upBtn = document.getElementById('up'); const leftBtn = document.getElementById('left'); const downBtn = document.getElementById('down'); const rightBtn = document.getElementById('right'); const actionBtn = document.getElementById('action'); upBtn.addEventListener('click', () => this.movePlayer(0, -this.speed)); leftBtn.addEventListener('click', () => this.movePlayer(-this.speed, 0)); downBtn.addEventListener('click', () => this.movePlayer(0, this.speed)); rightBtn.addEventListener('click', () => this.movePlayer(this.speed, 0)); actionBtn.addEventListener('click', () => this.handleAction()); this.continueBtn.addEventListener('click', () => this.nextDialogue()); document.addEventListener('keydown', (e) => { if (this.dialogueBox.classList.contains('hidden')) { switch(e.key) { case 'ArrowUp': this.movePlayer(0, -this.speed); break; case 'ArrowLeft': this.movePlayer(-this.speed, 0); break; case 'ArrowDown': this.movePlayer(0, this.speed); break; case 'ArrowRight': this.movePlayer(this.speed, 0); break; case 'a': case 'A': this.handleAction(); break; } } else if (e.key === 'Enter') { this.nextDialogue(); } }); } movePlayer(dx, dy) { this.playerX = Math.max(0, Math.min(800 - 64, this.playerX + dx)); this.playerY = Math.max(0, Math.min(600 - 64, this.playerY + dy)); this.updatePlayerPosition(); } updatePlayerPosition() { this.player.style.left = `${this.playerX}px`; this.player.style.top = `${this.playerY}px`; } handleAction() { // Check for interactions with objects or NPCs this.showDialogue([ "You used Shadow Ball!", "But there's nothing to attack here..." ]); } showDialogue(lines) { this.currentDialogue = lines; this.dialogueIndex = 0; this.dialogueContent.textContent = this.currentDialogue[this.dialogueIndex]; this.dialogueBox.classList.remove('hidden'); } nextDialogue() { this.dialogueIndex++; if (this.dialogueIndex < this.currentDialogue.length) { this.dialogueContent.textContent = this.currentDialogue[this.dialogueIndex]; } else { this.dialogueBox.classList.add('hidden'); } } } // Start the game when the page loads window.onload = () => { new Game(); };