Entendido. Basándome en tu prompt, puedo generar la estructura y la lógica fundamental para tu videojuego MVP inspirado en Vampire Survivors utilizando HTML, CSS y JavaScript. Esto funcionará dentro del entorno del navegador. Dado que no puedo generar assets visuales complejos ni código para motores específicos como Unity o Godot en este entorno, me centraré en la estructura del proyecto, la lógica del juego y una representación visual básica. Aquí tienes la configuración inicial del proyecto: Survival Horror MVP

Survival Horror

Jugador 2: Presiona 'Enter' para unirte

Desbloqueos Permanentes:

Oleada Máxima Alcanzada: 0

P1 Vida: 100

Oleada: 0

Pausa

body { margin: 0; overflow: hidden; background-color: #111; color: #eee; font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .screen { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .screen.active { display: flex; } #lobby { background-color: #222; } #lobby h1 { color: #e44; } #lobby button { padding: 10px 20px; font-size: 1.2em; cursor: pointer; margin-top: 20px; } #lobby #unlocks { margin-top: 40px; border-top: 1px solid #444; padding-top: 20px; } #lobby #unlockList li { list-style: none; margin: 5px 0; } #game { background-color: #000; position: relative; /* Needed for absolute positioning of children */ } #gameCanvas { display: block; background-color: #333; /* Placeholder background */ position: absolute; top: 0; left: 0; } #hud { position: absolute; top: 10px; left: 10px; right: 10px; color: white; z-index: 10; display: flex; justify-content: space-between; background-color: rgba(0, 0, 0, 0.5); padding: 5px; font-size: 0.9em; } #hud > div { margin: 0 10px; } #player1HUD span, #player2HUD span { margin-right: 15px; } #waveAnnouncement { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; color: red; z-index: 11; background-color: rgba(0,0,0,0.7); padding: 20px; border-radius: 10px; } #fogOfWar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Basic fog effect - will be dynamically updated via JS */ background: radial-gradient(circle at center, transparent 100px, black 250px); pointer-events: none; /* Allows clicks to pass through */ z-index: 5; mix-blend-mode: multiply; /* Or other blend modes for different effects */ } #pauseMenu { background-color: rgba(0, 0, 0, 0.8); z-index: 20; } #pauseMenu button { padding: 10px 20px; font-size: 1.1em; cursor: pointer; margin: 10px; } .hidden { display: none !important; /* Use !important to override other display styles */ } import Game from './game.js'; import Lobby from './lobby.js'; const lobbyScreen = document.getElementById('lobby'); const gameScreen = document.getElementById('game'); const pauseMenuScreen = document.getElementById('pauseMenu'); const startButton = document.getElementById('startButton'); const resumeButton = document.getElementById('resumeButton'); const restartButton = document.getElementById('restartButton'); const quitToLobbyButton = document.getElementById('quitToLobbyButton'); let game = null; let lobby = null; let gameState = 'lobby'; // lobby, playing, paused, gameover function showScreen(screenId) { document.querySelectorAll('.screen').forEach(screen => { screen.classList.remove('active'); }); document.getElementById(screenId)?.classList.add('active'); } function startGame(playerCount) { console.log(`Starting game with ${playerCount} player(s)`); gameState = 'playing'; showScreen('game'); game = new Game(document.getElementById('gameCanvas'), playerCount, lobby.getUnlocks(), lobby.getHighScore()); game.onGameOver = handleGameOver; game.onPause = togglePause; game.start(); } function handleGameOver(scoreData) { console.log("Game Over. Final Score Data:", scoreData); gameState = 'lobby'; lobby.updateProgress(scoreData); // Update unlocks and high score game = null; // Clean up game instance showScreen('lobby'); } function togglePause(paused) { if (gameState === 'playing' || gameState === 'paused') { gameState = paused ? 'paused' : 'playing'; showScreen(paused ? 'pauseMenu' : 'game'); if (game) { paused ? game.pause() : game.resume(); } } } // --- Event Listeners --- startButton.addEventListener('click', () => { startGame(lobby.getPlayerCount()); }); resumeButton.addEventListener('click', () => { togglePause(false); }); restartButton.addEventListener('click', () => { if (game) { const playerCount = game.playerCount; game.cleanup(); // Ensure proper cleanup before restarting game = null; togglePause(false); // Ensure pause menu is hidden startGame(playerCount); } }); quitToLobbyButton.addEventListener('click', () => { if (game) { game.cleanup(); handleGameOver({ wave: game.waveManager?.currentWave || 0, unlocks: [] }); // Pass current wave, no new unlocks on quit } togglePause(false); // Hide pause menu showScreen('lobby'); }); // Initialize Lobby lobby = new Lobby(); showScreen('lobby'); // Start in the lobby // Global key listener for pause (Escape key) window.addEventListener('keydown', (e) => { if (e.key === 'Escape') { if (gameState === 'playing') { togglePause(true); } else if (gameState === 'paused') { togglePause(false); } } }); export default class Lobby { constructor() { this.playerCount = 1; this.player2Joined = false; this.player2JoinPrompt = document.getElementById('player2JoinPrompt'); this.unlockListElement = document.getElementById('unlockList'); this.highScoreElement = document.getElementById('highScore'); // Load progress from localStorage this.permanentUnlocks = JSON.parse(localStorage.getItem('permanentUnlocks') || '[]'); this.highScore = parseInt(localStorage.getItem('highScore') || '0'); this.updateUnlockDisplay(); this.updateHighScoreDisplay(); // Listen for Player 2 join window.addEventListener('keydown', this.handlePlayer2Join.bind(this)); } handlePlayer2Join(e) { // Only allow joining in the lobby screen if (document.getElementById('lobby').classList.contains('active') && e.key === 'Enter' && !this.player2Joined) { this.playerCount = 2; this.player2Joined = true; this.player2JoinPrompt.textContent = "¡Jugador 2 Unido!"; this.player2JoinPrompt.style.color = "lightgreen"; console.log("Player 2 joined"); } } getPlayerCount() { return this.playerCount; } getUnlocks() { return [...this.permanentUnlocks]; // Return a copy } getHighScore() { return this.highScore; } updateProgress(scoreData) { // Update High Score if (scoreData.wave > this.highScore) { this.highScore = scoreData.wave; localStorage.setItem('highScore', this.highScore.toString()); this.updateHighScoreDisplay(); } // Add new unlocks if they aren't already present scoreData.unlocks.forEach(unlock => { if (!this.permanentUnlocks.includes(unlock)) { this.permanentUnlocks.push(unlock); } }); localStorage.setItem('permanentUnlocks', JSON.stringify(this.permanentUnlocks)); this.updateUnlockDisplay(); // Reset for next game attempt this.playerCount = 1; this.player2Joined = false; this.player2JoinPrompt.textContent = "Jugador 2: Presiona 'Enter' para unirte"; this.player2JoinPrompt.style.color = ""; // Reset color } updateUnlockDisplay() { this.unlockListElement.innerHTML = ''; // Clear existing list if (this.permanentUnlocks.length === 0) { this.unlockListElement.innerHTML = '

Ninguno

'; } else { this.permanentUnlocks.forEach(unlock => { const li = document.createElement('li'); li.textContent = this.getUnlockDescription(unlock); this.unlockListElement.appendChild(li); }); } } updateHighScoreDisplay() { this.highScoreElement.textContent = this.highScore; } getUnlockDescription(unlockId) { switch (unlockId) { case 'molotov': return 'Cóctel Molotov'; case 'maxHealthUp1': return 'Mejora de Vida Máxima Pequeña'; // Add more descriptions as needed default: return unlockId; } } } import Player from './player.js'; import InputHandler from './input.js'; import WaveManager from './waveManager.js'; import Enemy from './enemy.js'; // Assuming basic enemy class exists import { updateFogOfWar } from './fogOfWar.js'; export default class Game { constructor(canvas, playerCount, permanentUnlocks, highScore) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.width = window.innerWidth; this.height = window.innerHeight; this.canvas.width = this.width; this.canvas.height = this.height; this.playerCount = playerCount; this.permanentUnlocks = permanentUnlocks; // e.g., ['molotov', 'maxHealthUp1'] this.highScore = highScore; this.players = []; this.enemies = []; this.projectiles = []; // For Molotov effect later this.particles = []; // For effects this.inputHandler = new InputHandler(); this.waveManager = new WaveManager(this); this.isPaused = false; this.gameOver = false; this.gameLoopId = null; this.onGameOver = null; // Callback for when the game ends this.onPause = null; // Callback to notify main.js about pause toggle this.lastTime = 0; this.debug = false; // Set to true to show debug info this.initPlayers(); this.updateHUD(); // Initial HUD setup } initPlayers() { const startX = this.width / 2; const startY = this.height / 2; const baseMaxHealth = 100; const healthBonus = this.permanentUnlocks.includes('maxHealthUp1') ? 20 : 0; // Example bonus // Player 1 this.players.push(new Player(this, startX - 50, startY, 1, this.inputHandler.keysP1, baseMaxHealth + healthBonus, this.permanentUnlocks.includes('molotov'))); // Player 2 if (this.playerCount > 1) { document.getElementById('player2HUD').classList.remove('hidden'); this.players.push(new Player(this, startX + 50, startY, 2, this.inputHandler.keysP2, baseMaxHealth + healthBonus, this.permanentUnlocks.includes('molotov'))); } else { document.getElementById('player2HUD').classList.add('hidden'); } } start() { this.lastTime = performance.now(); this.isPaused = false; this.gameOver = false; this.waveManager.startNextWave(); this.gameLoop(); console.log("Game started"); } pause() { if (!this.isPaused) { this.isPaused = true; cancelAnimationFrame(this.gameLoopId); console.log("Game paused"); if (this.onPause) this.onPause(true); } } resume() { if (this.isPaused) { this.isPaused = false; this.lastTime = performance.now(); // Reset lastTime to avoid large deltaTime jump this.gameLoop(); console.log("Game resumed"); if (this.onPause) this.onPause(false); } } gameLoop(timestamp = 0) { if (this.isPaused || this.gameOver) return; const deltaTime = (timestamp - this.lastTime) / 1000; // Delta time in seconds this.lastTime = timestamp; // 1. Update Game State this.update(deltaTime); // 2. Draw Everything this.draw(); // 3. Request Next Frame this.gameLoopId = requestAnimationFrame(this.gameLoop.bind(this)); } update(deltaTime) { // Update Players this.players.forEach(player => player.update(deltaTime, this.enemies)); // Update Enemies this.enemies.forEach(enemy => enemy.update(deltaTime, this.players)); // Update Projectiles (e.g., Molotov fire) this.projectiles.forEach(p => p.update(deltaTime)); // Update Particles this.particles.forEach(p => p.update(deltaTime)); // Update Waves this.waveManager.update(deltaTime); // Check Collisions this.checkCollisions(); // Check Player Proximity (for multiplayer damage) this.checkPlayerProximity(deltaTime); // Remove dead entities this.enemies = this.enemies.filter(enemy => !enemy.markedForDeletion); this.projectiles = this.projectiles.filter(p => !p.markedForDeletion); this.particles = this.particles.filter(p => !p.markedForDeletion); // Check Game Over condition if (this.players.every(player => player.isDead)) { this.triggerGameOver(); } // Update HUD this.updateHUD(); } draw() { // Clear canvas this.ctx.clearRect(0, 0, this.width, this.height); // Draw Background (optional) // this.ctx.fillStyle = '#222'; // this.ctx.fillRect(0, 0, this.width, this.height); // Draw Players this.players.forEach(player => player.draw(this.ctx)); // Draw Enemies (only if visible within player FoW) this.enemies.forEach(enemy => { // Basic visibility check - refine with actual FoW logic let isVisible = false; this.players.forEach(player => { if (!player.isDead) { const dx = enemy.x - player.x; const dy = enemy.y - player.y; // Use player's vision radius for check if (dx * dx + dy * dy < player.visionRadius * player.visionRadius) { isVisible = true; } } }); if (isVisible) { enemy.draw(this.ctx); } }); // Draw Projectiles this.projectiles.forEach(p => p.draw(this.ctx)); // Draw Particles this.particles.forEach(p => p.draw(this.ctx)); // Update and Draw Fog of War updateFogOfWar(this.players.filter(p => !p.isDead)); // Pass active players // Draw Debug Info (if enabled) if (this.debug) { this.drawDebug(); } } checkCollisions() { // Player auto-attack this.players.forEach(player => { if (!player.isDead) { player.checkAutoAttack(this.enemies); } }); // Enemy attacks on players this.enemies.forEach(enemy => { this.players.forEach(player => { if (!player.isDead && !enemy.markedForDeletion) { const dx = enemy.x - player.x; const dy = enemy.y - player.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < player.radius + enemy.radius) { // Basic collision damage enemy.attack(player); } } }); }); // Projectile collisions (e.g., Molotov hitting enemies) // ... TBD ... } checkPlayerProximity(deltaTime) { if (this.playerCount > 1 && this.players.length === 2) { const [p1, p2] = this.players; if (p1.isDead || p2.isDead) return; // Don't apply if one is dead const dx = p1.x - p2.x; const dy = p1.y - p2.y; const distance = Math.sqrt(dx * dx + dy * dy); const maxDistance = 400; // Max allowed distance before taking damage const damagePerSecond = 5; // Damage rate when too far if (distance > maxDistance) { const damage = damagePerSecond * deltaTime; p1.takeDamage(damage, null); // Source is environment/separation p2.takeDamage(damage, null); // Optional: Add visual indicator this.drawSeparationWarning(p1, p2); } } } drawSeparationWarning(p1, p2) { this.ctx.save(); this.ctx.strokeStyle = 'yellow'; this.ctx.lineWidth = 2; this.ctx.beginPath(); this.ctx.moveTo(p1.x, p1.y); this.ctx.lineTo(p2.x, p2.y); this.ctx.stroke(); this.ctx.fillStyle = 'rgba(255, 255, 0, 0.5)'; this.ctx.font = '14px Arial'; this.ctx.textAlign = 'center'; this.ctx.fillText('¡Demasiado lejos!', this.width / 2, 30); this.ctx.restore(); } spawnEnemy(type, x, y) { // Adjust difficulty based on player count const healthMultiplier = this.playerCount > 1 ? 1.5 : 1; // Example: 50% more health const speedMultiplier = this.playerCount > 1 ? 1.1 : 1; // Example: 10% faster const damageMultiplier = this.playerCount > 1 ? 1.25 : 1; // Example: 25% more damage this.enemies.push(new Enemy(this, x, y, type, healthMultiplier, speedMultiplier, damageMultiplier)); } updateHUD() { this.players.forEach((player, index) => { const healthElement = document.getElementById(`player${index + 1}Health`); const molotovElement = document.getElementById(`player${index + 1}Molotov`); if (healthElement) { healthElement.textContent = Math.max(0, Math.ceil(player.health)); // Ensure health doesn't go below 0 } if (molotovElement) { if (player.hasMolotov && !player.molotovUsed) { molotovElement.classList.remove('hidden'); } else { molotovElement.classList.add('hidden'); } } }); document.getElementById('waveNumber').textContent = this.waveManager.currentWave; } showWaveAnnouncement(waveNumber) { const announcement = document.getElementById('waveAnnouncement'); if (waveNumber > 0) { announcement.textContent = `Oleada ${waveNumber}`; } else { announcement.textContent = `¡JEFE!`; // Or specific boss name } announcement.classList.remove('hidden'); // Optional: Play sound // this.playSound('waveStartSound'); setTimeout(() => { announcement.classList.add('hidden'); }, 2000); // Show for 2 seconds } triggerGameOver() { if (this.gameOver) return; // Prevent multiple triggers this.gameOver = true; cancelAnimationFrame(this.gameLoopId); console.log("Game Over triggered"); // Determine unlocks based on first death this run const unlocksEarned = []; let firstDeathOccurred = false; this.players.forEach(p => { if (p.diedThisRun) { firstDeathOccurred = true; } }); // Unlock Molotov and health upgrade on the *first ever* death recorded across sessions // We check permanentUnlocks which are loaded from localStorage if (firstDeathOccurred && !this.permanentUnlocks.includes('molotov')) { unlocksEarned.push('molotov'); } if (firstDeathOccurred && !this.permanentUnlocks.includes('maxHealthUp1')) { unlocksEarned.push('maxHealthUp1'); } const scoreData = { wave: this.waveManager.currentWave, unlocks: unlocksEarned, }; if (this.onGameOver) { this.onGameOver(scoreData); } } cleanup() { // Stop game loop, remove listeners, clear arrays etc. cancelAnimationFrame(this.gameLoopId); this.inputHandler.dispose(); // Remove event listeners this.players = []; this.enemies = []; this.projectiles = []; this.particles = []; // Reset HUD elements if necessary document.getElementById('player1HUD').classList.remove('hidden'); // Ensure P1 HUD is visible by default document.getElementById('player2HUD').classList.add('hidden'); document.getElementById('waveAnnouncement').classList.add('hidden'); console.log("Game instance cleaned up"); } drawDebug() { this.ctx.save(); this.ctx.fillStyle = 'white'; this.ctx.font = '12px Arial'; this.ctx.fillText(`Players: ${this.players.length}`, 10, this.height - 70); this.ctx.fillText(`Enemies: ${this.enemies.length}`, 10, this.height - 55); this.ctx.fillText(`Wave: ${this.waveManager.currentWave}`, 10, this.height - 40); this.ctx.fillText(`State: ${this.waveManager.state}`, 10, this.height - 25); this.ctx.fillText(`Timer: ${this.waveManager.timer.toFixed(1)}s`, 10, this.height - 10); // Draw player vision radius and attack radius for debug this.players.forEach(p => { this.ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)'; this.ctx.beginPath(); this.ctx.arc(p.x, p.y, p.visionRadius, 0, Math.PI * 2); this.ctx.stroke(); this.ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)'; this.ctx.beginPath(); this.ctx.arc(p.x, p.y, p.autoAttackRange, 0, Math.PI * 2); this.ctx.stroke(); }); this.ctx.restore(); } } export default class Player { constructor(game, x, y, playerNumber, maxHealth, hasMolotov) { this.game = game; this.x = x; this.y = y; this.playerNumber = playerNumber; this.radius = 15; this.color = playerNumber === 1 ? 'cyan' : 'magenta'; this.speed = 200; // pixels per second this.keys = playerNumber === 1 ? game.inputHandler.keysP1 : game.inputHandler.keysP2; this.maxHealth = maxHealth; this.health = this.maxHealth; this.isDead = false; this.diedThisRun = false; // Track if died in the current game session // Combat this.autoAttackRange = 40; // Range for melee attack this.autoAttackCooldown = 0.5; // Seconds between attacks this.autoAttackTimer = 0; this.autoAttackDamage = 10; // Molotov this.hasMolotov = hasMolotov; // Unlocked permanently this.molotovUsed = false; this.molotovKey = playerNumber === 1 ? 'm' : '0'; // M for P1, Numpad 0 for P2 // Vision this.visionRadius = 175; // Radius for Fog of War } update(deltaTime, enemies) { if (this.isDead) return; // Movement let dx = 0; let dy = 0; if (this.keys.up) dy -= 1; if (this.keys.down) dy += 1; if (this.keys.left) dx -= 1; if (this.keys.right) dx += 1; // Normalize diagonal movement const length = Math.sqrt(dx * dx + dy * dy); if (length > 0) { dx = (dx / length) * this.speed * deltaTime; dy = (dy / length) * this.speed * deltaTime; } this.x += dx; this.y += dy; // Keep player within bounds (simple clamp) this.x = Math.max(this.radius, Math.min(this.game.width - this.radius, this.x)); this.y = Math.max(this.radius, Math.min(this.game.height - this.radius, this.y)); // Auto Attack Timer if (this.autoAttackTimer > 0) { this.autoAttackTimer -= deltaTime; } // Molotov Input Check if (this.hasMolotov && !this.molotovUsed && this.game.inputHandler.isKeyPressed(this.molotovKey)) { this.useMolotov(); } } draw(ctx) { if (this.isDead) return; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fill(); // Draw Health Bar const barWidth = 40; const barHeight = 5; const barX = this.x - barWidth / 2; const barY = this.y - this.radius - barHeight - 5; // Position above player const healthPercentage = this.health / this.maxHealth; ctx.fillStyle = '#333'; // Background of health bar ctx.fillRect(barX, barY, barWidth, barHeight); ctx.fillStyle = healthPercentage > 0.5 ? 'green' : healthPercentage > 0.2 ? 'orange' : 'red'; ctx.fillRect(barX, barY, barWidth * healthPercentage, barHeight); } checkAutoAttack(enemies) { if (this.autoAttackTimer <= 0) { let targetFound = false; enemies.forEach(enemy => { if (!targetFound && !enemy.markedForDeletion) { const dx = enemy.x - this.x; const dy = enemy.y - this.y; const distanceSq = dx * dx + dy * dy; // Use squared distance for efficiency if (distanceSq < this.autoAttackRange * this.autoAttackRange) { // Attack the first enemy in range enemy.takeDamage(this.autoAttackDamage, this); this.autoAttackTimer = this.autoAttackCooldown; targetFound = true; // Optional: Add visual effect for attack // this.game.particles.push(new AttackSlash(this.game, this.x, this.y, enemy.x, enemy.y)); } } }); } } useMolotov() { console.log(`Player ${this.playerNumber} used Molotov!`); this.molotovUsed = true; this.game.updateHUD(); // Update HUD to hide molotov indicator // TODO: Implement Molotov projectile/effect // Example: Create a Molotov projectile that creates a fire area on impact // this.game.projectiles.push(new MolotovProjectile(this.game, this.x, this.y, /* target direction/pos */)); } takeDamage(amount, source) { if (this.isDead) return; this.health -= amount; // Optional: Add damage effect (screen shake, particle) // this.game.particles.push(new DamageNumber(this.game, this.x, this.y, amount)); if (this.health <= 0) { this.health = 0; this.die(); } this.game.updateHUD(); // Update health display immediately } heal(amount) { if (this.isDead) return; this.health = Math.min(this.maxHealth, this.health + amount); this.game.updateHUD(); } // Called when defeating a boss for temporary boost applyTemporaryHealthBoost(amount) { if (this.isDead) return; this.maxHealth += amount; this.heal(amount); // Heal by the boosted amount as well console.log(`Player ${this.playerNumber} received temporary health boost! New Max HP: ${this.maxHealth}`); this.game.updateHUD(); } die() { if (!this.isDead) { console.log(`Player ${this.playerNumber} died.`); this.isDead = true; this.diedThisRun = true; // Mark that this player died during this game attempt this.color = '#555'; // Change color to indicate death visually // Optional: Add death animation/particle effect // this.game.particles.push(new DeathEffect(this.game, this.x, this.y)); // Check if all players are dead to trigger game over in the main game loop } } } export default class Enemy { constructor(game, x, y, type, healthMultiplier = 1, speedMultiplier = 1, damageMultiplier = 1) { this.game = game; this.x = x; this.y = y; this.type = type; // 'basic', 'tough', 'boss' this.markedForDeletion = false; // Base stats let baseHealth = 10; let baseSpeed = 100; let baseRadius = 10; let baseColor = 'red'; let baseDamage = 10; // Damage dealt on contact/attack let baseAttackCooldown = 1.0; // Seconds between attacks // Type-specific stats switch (type) { case 'basic': baseHealth = 15; baseSpeed = 120; baseRadius = 12; baseColor = '#ff6666'; // Lighter red baseDamage = 5; break; case 'tough': baseHealth = 40; baseSpeed = 90; // Slower but tougher baseRadius = 18; baseColor = '#cc0000'; // Darker red baseDamage = 15; break; case 'boss': baseHealth = 300; // Significantly more health baseSpeed = 70; // Even slower baseRadius = 30; baseColor = '#990000'; // Darkest red / Purpleish? baseDamage = 25; // High damage baseAttackCooldown = 1.5; break; } // Apply multipliers (from player count, wave difficulty etc.) this.maxHealth = baseHealth * healthMultiplier; this.health = this.maxHealth; this.speed = baseSpeed * speedMultiplier; this.radius = baseRadius; this.color = baseColor; this.damage = baseDamage * damageMultiplier; this.attackCooldown = baseAttackCooldown; this.attackTimer = 0; // Timer for attack cooldown } update(deltaTime, players) { if (this.markedForDeletion) return; // Attack Cooldown if (this.attackTimer > 0) { this.attackTimer -= deltaTime; } // Find nearest player let nearestPlayer = null; let minDistanceSq = Infinity; players.forEach(player => { if (!player.isDead) { const dx = player.x - this.x; const dy = player.y - this.y; const distanceSq = dx * dx + dy * dy; if (distanceSq < minDistanceSq) { minDistanceSq = distanceSq; nearestPlayer = player; } } }); // Move towards nearest player if (nearestPlayer) { const distance = Math.sqrt(minDistanceSq); const moveDx = (nearestPlayer.x - this.x) / distance; const moveDy = (nearestPlayer.y - this.y) / distance; // Stop moving if very close to allow attack animation/logic const stopDistance = this.radius + nearestPlayer.radius - 5; // Stop slightly before overlap if (distance > stopDistance) { this.x += moveDx * this.speed * deltaTime; this.y += moveDy * this.speed * deltaTime; } } } draw(ctx) { if (this.markedForDeletion) return; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fill(); // Optional: Draw Health Bar for tougher enemies/bosses if (this.type === 'tough' || this.type === 'boss') { const barWidth = 30; const barHeight = 4; const barX = this.x - barWidth / 2; const barY = this.y - this.radius - barHeight - 3; const healthPercentage = this.health / this.maxHealth; ctx.fillStyle = '#333'; ctx.fillRect(barX, barY, barWidth, barHeight); ctx.fillStyle = 'darkred'; ctx.fillRect(barX, barY, barWidth * healthPercentage, barHeight); } } // Called by collision detection in game.js attack(player) { if (this.attackTimer <= 0 && !this.markedForDeletion && !player.isDead) { player.takeDamage(this.damage, this); this.attackTimer = this.attackCooldown; // Optional: Add attack visual/sound effect } } takeDamage(amount, source) { if (this.markedForDeletion) return; this.health -= amount; // Optional: Add damage effect (flash color, particle) // this.game.particles.push(new DamageNumber(this.game, this.x, this.y, amount)); this.flashColor('#ffffff', 0.1); // Flash white briefly if (this.health <= 0) { this.die(source); // Pass the source (player) that killed it } } die(killerPlayer) { this.markedForDeletion = true; // Optional: Add death effect/sound // this.game.particles.push(new EnemyDeathEffect(this.game, this.x, this.y, this.color)); // If it was a boss, notify the game if (this.type === 'boss' && killerPlayer) { this.game.waveManager.handleBossDefeat(killerPlayer); } } // Simple visual feedback for taking damage flashColor(color, duration) { const originalColor = this.color; this.color = color; setTimeout(() => { // Check if still exists before resetting color if (!this.markedForDeletion) { this.color = originalColor; } }, duration * 1000); } } export default class WaveManager { constructor(game) { this.game = game; this.currentWave = 0; this.enemiesToSpawn = 0; this.enemiesSpawnedThisWave = 0; this.spawnTimer = 0; this.spawnInterval = 1.0; // Seconds between spawns within a wave this.waveCooldownTimer = 0; this.waveCooldownDuration = 5.0; // Seconds between waves (respite time) this.bossWaveFrequency = 5; // Boss appears every 5 waves this.state = 'idle'; // idle, spawning, cooldown, boss this.timer = 0; // General purpose timer for current state } update(deltaTime) { this.timer += deltaTime; switch (this.state) { case 'idle': // Should not stay here long, startNextWave should be called break; case 'cooldown': this.waveCooldownTimer -= deltaTime; if (this.waveCooldownTimer <= 0) { this.startNextWave(); } break; case 'spawning': this.spawnTimer -= deltaTime; if (this.spawnTimer <= 0 && this.enemiesSpawnedThisWave < this.enemiesToSpawn) { this.spawnEnemy(); this.enemiesSpawnedThisWave++; this.spawnTimer = this.spawnInterval; // Reset timer for next spawn } // Check if wave spawning is complete if (this.enemiesSpawnedThisWave >= this.enemiesToSpawn && this.game.enemies.length === 0) { this.startCooldown(); } break; case 'boss': // Boss logic is handled by the boss enemy itself and collision checks // We just wait until the boss is defeated (checked elsewhere) // If boss is defeated (game calls handleBossDefeat), we start cooldown break; } } startNextWave() { this.currentWave++; this.timer = 0; // Reset state timer console.log(`Starting Wave ${this.currentWave}`); this.game.showWaveAnnouncement(this.currentWave); // Optional: Play sound effect if (this.currentWave % this.bossWaveFrequency === 0) { this.startBossWave(); } else { this.startRegularWave(); } } startRegularWave() { this.state = 'spawning'; this.enemiesSpawnedThisWave = 0; // Increase difficulty: more enemies, faster spawns, tougher types this.enemiesToSpawn = 5 + Math.floor(this.currentWave * 1.5 * this.game.playerCount); // Base + scaling per wave and player count this.spawnInterval = Math.max(0.2, 1.0 - this.currentWave * 0.05); // Faster spawns over time this.spawnTimer = 0; // Start spawning immediately } startBossWave() { this.state = 'boss'; this.enemiesSpawnedThisWave = 0; // Reset just in case this.enemiesToSpawn = 1; // Only one boss console.log("Boss Wave!"); this.game.showWaveAnnouncement(0); // Special announcement for boss // Spawn the boss (usually at a specific location or edge) this.spawnEnemy(true); // Pass true to indicate boss spawn } spawnEnemy(isBoss = false) { // Determine spawn position (randomly around the edges) const edgeMargin = 50; let x, y; const side = Math.floor(Math.random() * 4); // 0: top, 1: right, 2: bottom, 3: left switch (side) { case 0: // Top edge x = Math.random() * this.game.width; y = -edgeMargin; break; case 1: // Right edge x = this.game.width + edgeMargin; y = Math.random() * this.game.height; break; case 2: // Bottom edge x = Math.random() * this.game.width; y = this.game.height + edgeMargin; break; case 3: // Left edge x = -edgeMargin; y = Math.random() * this.game.height; break; } if (isBoss) { this.game.spawnEnemy('boss', x, y); } else { // Determine enemy type based on wave (example logic) let enemyType = 'basic'; if (this.currentWave > 3 && Math.random() < 0.3) { // Introduce 'tough' after wave 3 enemyType = 'tough'; } // Adjust multipliers based on wave number maybe? const waveDifficultyMultiplier = 1 + (this.currentWave * 0.05); this.game.spawnEnemy(enemyType, x, y, waveDifficultyMultiplier, waveDifficultyMultiplier, waveDifficultyMultiplier); } } startCooldown() { console.log(`Wave ${this.currentWave} cleared. Starting cooldown.`); this.state = 'cooldown'; this.timer = 0; // Reset state timer this.waveCooldownTimer = this.waveCooldownDuration; // Maybe give players a small heal or reward here? } // Called from Game when a boss enemy is defeated handleBossDefeat(killerPlayer) { if (this.state === 'boss') { console.log("Boss defeated!"); // Grant temporary reward to the player(s) const tempHealthBoost = 50; // Example boost amount this.game.players.forEach(p => { if (!p.isDead) { p.applyTemporaryHealthBoost(tempHealthBoost); } }); this.startCooldown(); // Proceed to cooldown after boss defeat } } } export default class InputHandler { constructor() { this.keysP1 = { up: false, down: false, left: false, right: false }; this.keysP2 = { up: false, down: false, left: false, right: false }; this.pressedKeys = new Set(); // Track currently pressed keys for single actions // Bind event listeners using arrow functions to maintain 'this' context this.keyDownListener = (e) => this.handleKeyDown(e); this.keyUpListener = (e) => this.handleKeyUp(e); window.addEventListener('keydown', this.keyDownListener); window.addEventListener('keyup', this.keyUpListener); console.log("Input Handler Initialized"); } handleKeyDown(e) { const key = e.key.toLowerCase(); this.pressedKeys.add(key); // Player 1 Controls (WASD) if (key === 'w') this.keysP1.up = true; if (key === 's') this.keysP1.down = true; if (key === 'a') this.keysP1.left = true; if (key === 'd') this.keysP1.right = true; // Player 1 Action (Example: Molotov) // if (key === 'm') { /* Handled in Player class for now */ } // Player 2 Controls (Arrow Keys) if (key === 'arrowup') this.keysP2.up = true; if (key === 'arrowdown') this.keysP2.down = true; if (key === 'arrowleft') this.keysP2.left = true; if (key === 'arrowright') this.keysP2.right = true; // Player 2 Action (Example: Molotov - Numpad 0) if (key === '0' && e.location === KeyboardEvent.DOM_KEY_LOCATION_NUMPAD) { // Numpad 0 specifically - Handled in Player class } else if (key === 'insert' && e.location === KeyboardEvent.DOM_KEY_LOCATION_NUMPAD) { // Some keyboards map Numpad 0 to Insert when NumLock is off // Handled in Player class } // Prevent default browser behavior for arrow keys, space, etc. if needed if (['arrowup', 'arrowdown', 'arrowleft', 'arrowright', ' '].includes(key)) { // e.preventDefault(); // Uncomment if needed } } handleKeyUp(e) { const key = e.key.toLowerCase(); this.pressedKeys.delete(key); // Player 1 Controls if (key === 'w') this.keysP1.up = false; if (key === 's') this.keysP1.down = false; if (key === 'a') this.keysP1.left = false; if (key === 'd') this.keysP1.right = false; // Player 2 Controls if (key === 'arrowup') this.keysP2.up = false; if (key === 'arrowdown') this.keysP2.down = false; if (key === 'arrowleft') this.keysP2.left = false; if (key === 'arrowright') this.keysP2.right = false; } // Check if a specific key is currently held down isKeyDown(key) { return this.pressedKeys.has(key.toLowerCase()); } // Check if a specific key was just pressed (useful for single actions) // Note: This simple check might trigger repeatedly if held. // For true "just pressed", you might need to track previous state. isKeyPressed(key) { return this.pressedKeys.has(key.toLowerCase()); } // Call this method when the game instance is destroyed to prevent memory leaks dispose() { window.removeEventListener('keydown', this.keyDownListener); window.removeEventListener('keyup', this.keyUpListener); console.log("Input Handler Disposed"); } } const fogElement = document.getElementById('fogOfWar'); const baseVisionRadius = 175; // Match player's base vision const baseBlurRadius = 250; // How far the blur extends export function updateFogOfWar(activePlayers) { if (!fogElement || activePlayers.length === 0) { // Hide fog if no players or element not found if(fogElement) fogElement.style.background = 'none'; return; } // Create a combined mask based on all active player positions let gradients = activePlayers.map(player => { // Calculate position relative to the viewport/window const playerXPercent = (player.x / window.innerWidth) * 100; const playerYPercent = (player.y / window.innerHeight) * 100; // Adjust radius based on player properties if needed (e.g., power-ups) const visionRadiusPx = player.visionRadius || baseVisionRadius; const blurRadiusPx = visionRadiusPx + (baseBlurRadius - baseVisionRadius); // Keep blur extent relative // Use pixels for radius for consistency regardless of screen size return `radial-gradient(circle at ${playerXPercent}% ${playerYPercent}%, transparent ${visionRadiusPx}px, black ${blurRadiusPx}px)`; }); // Combine gradients: the browser will layer them, effectively merging the transparent areas fogElement.style.background = gradients.join(', '); } Este código establece la estructura básica HTML, CSS y los módulos JavaScript iniciales (`main.js`, `game.js`, `player.js`, `enemy.js`, `waveManager.js`, `input.js`, `lobby.js`, `fogOfWar.js`). **Próximos pasos (resumen de la lógica implementada y faltante):** * **Implementado:** * Estructura de escenas (Lobby, Juego, Pausa). * Cambio entre escenas. * Inicio de juego para 1 o 2 jugadores. * Manejo básico de entrada para 2 jugadores (WASD y Flechas). * Clases base para `Player` y `Enemy` con movimiento y salud. * Sistema de oleadas (`WaveManager`) con temporizadores y dificultad creciente (simple). * Generación de enemigos básicos y resistentes. * Generación de Jefe cada 5 oleadas. * Mecánica de reaparición en Lobby al morir todos los jugadores. * Persistencia básica de desbloqueos (Molotov, Mejora de Vida) y puntuación máxima usando `localStorage`. * Niebla de guerra básica (efecto visual CSS actualizado por JS). * Menú de pausa funcional. * Ataque cuerpo a cuerpo automático del jugador (simple, basado en proximidad). * Daño por separación en multijugador. * Recompensa temporal de vida al derrotar al jefe. * **Faltante / Por Refinar:** * Implementación detallada del proyectil/efecto del Cóctel Molotov. * Lógica de ataque específica de los enemigos (actualmente solo por contacto). * Efectos visuales (partículas para ataques, daño, muerte). * Efectos de sonido. * Refinamiento de la IA enemiga (más allá de seguir al más cercano). * Balanceo detallado de la dificultad, daño, salud, etc. * Representación visual más allá de círculos de colores. Puedes ejecutar esto abriendo `index.html` en tu navegador. Usa WASD para el Jugador 1 y las Flechas para el Jugador 2 (presiona Enter en el lobby para activar al Jugador 2). Presiona Esc para pausar.