Rozumiem. Ulepszmy menu, aby wyglądało i działało bardziej profesjonalnie. Dodamy bardziej zaawansowany styl, płynniejsze przejścia i podstawową strukturę dla przyszłej rozbudowy. Symulator Zombie - Menu Główne

Symulator Zombie

Przetrwaj apokalipsę

Rozgrywka

Poziom: 1 Wynik: 0 Gracz: Gracz

Tutaj toczy się akcja gry...

:root { --primary-bg: #1a1a1a; --secondary-bg: #2a2a2a; --tertiary-bg: #3a3a3a; --accent-color: #e44d26; /* Pomarańczowo-czerwony */ --text-color: #e0e0e0; --text-muted: #a0a0a0; --success-color: #4caf50; --error-color: #f44336; --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --border-radius: 5px; --transition-speed: 0.3s; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-main); background-color: var(--primary-bg); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; /* Zapobiega przewijaniu tła modala */ } .container { background-color: var(--secondary-bg); padding: 30px 40px; border-radius: var(--border-radius); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); text-align: center; max-width: 500px; width: 90%; position: relative; /* Dla pozycjonowania modala */ transition: all var(--transition-speed) ease; } .main-header h1 { color: var(--accent-color); margin-bottom: 5px; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .main-header .subtitle { color: var(--text-muted); margin-bottom: 30px; font-size: 1.1em; } /* --- Menu --- */ #main-menu { opacity: 0; transform: translateY(20px); transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease; } #main-menu.menu-active { opacity: 1; transform: translateY(0); } .menu-button { display: block; width: 100%; padding: 12px 20px; margin-bottom: 12px; background-color: var(--tertiary-bg); color: var(--text-color); border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 1.1em; transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease; text-align: center; /* display: flex; */ /* Odkomentuj jeśli używasz ikon */ /* align-items: center; */ /* justify-content: center; */ /* gap: 10px; */ /* Odstęp między ikoną a tekstem */ } .menu-button:hover:not(:disabled) { background-color: var(--accent-color); color: white; transform: scale(1.02); } .menu-button:active:not(:disabled) { transform: scale(0.98); } .menu-button:disabled { background-color: #444; color: #777; cursor: not-allowed; } .menu-button.small { padding: 8px 15px; font-size: 0.9em; margin-top: 15px; } .status { margin-top: 20px; min-height: 25px; font-size: 0.95em; transition: color var(--transition-speed) ease; } .status.success { color: var(--success-color); } .status.error { color: var(--error-color); } .status.info { color: var(--text-muted); } /* --- Game Content --- */ #game-content { opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--transition-speed) ease, max-height var(--transition-speed) ease; } #game-content.game-active { opacity: 1; max-height: 500px; /* Wystarczająco duża wartość */ margin-top: 20px; } .game-stats { display: flex; justify-content: space-around; background-color: var(--tertiary-bg); padding: 10px; border-radius: var(--border-radius); margin-bottom: 20px; font-size: 0.9em; } .game-stats span { color: var(--text-muted); } .game-stats span span { /* Wartości */ color: var(--text-color); font-weight: bold; } .game-area { background-color: var(--primary-bg); padding: 20px; border-radius: var(--border-radius); min-height: 150px; margin-bottom: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; } #simulate-progress { padding: 10px 15px; background-color: var(--accent-color); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; margin-top: 15px; transition: background-color var(--transition-speed); } #simulate-progress:hover { background-color: #c43d1e; } /* --- Modal --- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed) ease, visibility 0s var(--transition-speed) linear; z-index: 1000; } .modal-overlay:not(.inactive) { opacity: 1; visibility: visible; transition-delay: 0s; } .modal-content { background-color: var(--secondary-bg); padding: 30px; border-radius: var(--border-radius); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); width: 90%; max-width: 400px; transform: scale(0.9); transition: transform var(--transition-speed) ease; } .modal-overlay:not(.inactive) .modal-content { transform: scale(1); } .modal-content h2 { color: var(--accent-color); margin-bottom: 20px; text-align: center; } .option-item { margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; } .option-item label { margin-right: 10px; color: var(--text-muted); } .option-item input[type="range"], .option-item select { flex-grow: 1; padding: 5px; background-color: var(--tertiary-bg); border: 1px solid #555; color: var(--text-color); border-radius: var(--border-radius); } .option-item input[type="range"] { cursor: pointer; } #volume-value { min-width: 40px; /* Stała szerokość dla wartości % */ text-align: right; color: var(--text-color); } #close-modal { display: block; margin: 20px auto 0; /* Wyśrodkowanie i margines górny */ } /* --- Klasy pomocnicze --- */ .inactive { display: none; } /* Prostsze ukrywanie niż visibility dla modala */ .game-inactive { opacity: 0 !important; max-height: 0 !important; margin-top: 0 !important; padding: 0 !important; /* Zapobiega pokazywaniu paddingu podczas ukrywania */ overflow: hidden; } .menu-inactive { opacity: 0 !important; max-height: 0 !important; overflow: hidden; padding: 0 !important; margin-bottom: 0 !important; } document.addEventListener('DOMContentLoaded', () => { // --- Elementy DOM --- const mainMenu = document.getElementById('main-menu'); const gameContent = document.getElementById('game-content'); const statusMessage = document.getElementById('status-message'); const newGameButton = document.getElementById('new-game'); const loadGameButton = document.getElementById('load-game'); const saveGameButton = document.getElementById('save-game'); const optionsButton = document.getElementById('options'); const exitButton = document.getElementById('exit'); const backToMenuButton = document.getElementById('back-to-menu'); const simulateProgressButton = document.getElementById('simulate-progress'); // Elementy gry const gameLevelSpan = document.getElementById('game-level'); const gameScoreSpan = document.getElementById('game-score'); const playerNameSpan = document.getElementById('player-name'); // Modal opcji const optionsModal = document.getElementById('options-modal'); const closeModalButton = document.getElementById('close-modal'); const volumeSlider = document.getElementById('volume'); const volumeValueSpan = document.getElementById('volume-value'); const difficultySelect = document.getElementById('difficulty'); // --- Stan Gry --- let gameState = { level: 1, score: 0, playerName: "Ocalały", options: { volume: 80, difficulty: 'normal' } }; let isGameActive = false; // Flaga śledząca, czy gra jest aktywna // --- Funkcje Pomocnicze --- // Wyświetlanie statusu (z typami) function displayStatus(message, type = 'info', duration = 3000) { statusMessage.textContent = message; statusMessage.className = `status ${type}`; // Resetuje klasy i dodaje nową console.log(`Status [${type}]: ${message}`); // Wyczyść komunikat po określonym czasie if (duration > 0) { setTimeout(() => { statusMessage.textContent = ''; statusMessage.className = 'status'; // Reset do domyślnej klasy }, duration); } } // Aktualizacja interfejsu gry function updateGameUI() { gameLevelSpan.textContent = gameState.level; gameScoreSpan.textContent = gameState.score; playerNameSpan.textContent = gameState.playerName; } // Aktualizacja interfejsu opcji function updateOptionsUI() { volumeSlider.value = gameState.options.volume; volumeValueSpan.textContent = `${gameState.options.volume}%`; difficultySelect.value = gameState.options.difficulty; } // Przełączanie widoków (Menu / Gra) function showGameView() { mainMenu.classList.remove('menu-active'); mainMenu.classList.add('menu-inactive'); gameContent.classList.remove('game-inactive'); gameContent.classList.add('game-active'); saveGameButton.disabled = false; // Włącz przycisk zapisu isGameActive = true; updateGameUI(); // Upewnij się, że UI jest aktualne } function showMenuView() { gameContent.classList.remove('game-active'); gameContent.classList.add('game-inactive'); mainMenu.classList.remove('menu-inactive'); mainMenu.classList.add('menu-active'); saveGameButton.disabled = true; // Wyłącz przycisk zapisu w menu isGameActive = false; // Opcjonalnie: zatrzymaj symulację postępu, jeśli była aktywna } // --- Logika Zapisu/Odczytu --- const SAVE_KEY = 'zombieSimProSave'; function saveGame() { if (!isGameActive) { displayStatus("Nie można zapisać gry z menu głównego.", "error"); return; } try { // Zapisz również opcje gameState.options.volume = parseInt(volumeSlider.value, 10); gameState.options.difficulty = difficultySelect.value; localStorage.setItem(SAVE_KEY, JSON.stringify(gameState)); displayStatus("Postęp gry zapisany!", "success"); console.log("Zapisano stan gry:", gameState); } catch (error) { console.error("Błąd podczas zapisywania gry:", error); displayStatus("Błąd zapisu gry! Sprawdź konsolę.", "error"); } } function loadGame() { try { const savedState = localStorage.getItem(SAVE_KEY); if (savedState) { gameState = JSON.parse(savedState); // Ustaw domyślne opcje, jeśli ich brakuje w zapisie gameState.options = gameState.options || { volume: 80, difficulty: 'normal' }; displayStatus(`Gra wczytana! Witaj ${gameState.playerName}.`, "success"); console.log("Wczytano stan gry:", gameState); updateGameUI(); updateOptionsUI(); // Zaktualizuj też UI opcji showGameView(); // Przejdź do widoku gry } else { displayStatus("Nie znaleziono zapisu gry.", "info"); } } catch (error) { console.error("Błąd podczas wczytywania gry:", error); displayStatus("Błąd wczytywania zapisu! Plik może być uszkodzony.", "error"); // Opcjonalnie: Usuń uszkodzony zapis // localStorage.removeItem(SAVE_KEY); } } // --- Logika Modala Opcji --- function openOptionsModal() { updateOptionsUI(); // Upewnij się, że opcje są aktualne przed pokazaniem optionsModal.classList.remove('inactive'); } function closeOptionsModal() { // Zapisz zmiany w opcjach przy zamykaniu gameState.options.volume = parseInt(volumeSlider.value, 10); gameState.options.difficulty = difficultySelect.value; console.log("Zaktualizowano opcje:", gameState.options); // Opcjonalnie: Zapisz grę automatycznie po zmianie opcji // if (isGameActive) saveGame(); optionsModal.classList.add('inactive'); } // --- Event Listeners --- newGameButton.addEventListener('click', () => { // Opcjonalnie: Dodaj potwierdzenie, jeśli gra jest w toku i niezapisana // if (isGameActive && confirm("Niezapisany postęp zostanie utracony. Kontynuować?")) { ... } // Resetuj stan gry do wartości domyślnych (zachowując opcje) gameState = { ...gameState, // Zachowaj istniejące opcje level: 1, score: 0, playerName: "Nowy Ocalały" // Można by tu dodać prompt o imię }; displayStatus("Rozpoczęto nową grę!", "success"); console.log("Nowa gra rozpoczęta:", gameState); showGameView(); }); loadGameButton.addEventListener('click', loadGame); saveGameButton.addEventListener('click', saveGame); optionsButton.addEventListener('click', openOptionsModal); exitButton.addEventListener('click', () => { // W przeglądarce nie ma standardowego "wyjścia" // Można wrócić do menu lub wyświetlić komunikat if (isGameActive) { // Opcjonalnie: Zapytaj o zapis przed wyjściem do menu showMenuView(); displayStatus("Powrócono do menu głównego.", "info"); } else { displayStatus("Aby wyjść, zamknij kartę przeglądarki.", "info"); // window.close(); // Rzadko działa i jest odradzane } }); backToMenuButton.addEventListener('click', () => { // Opcjonalnie: Zapytaj o zapis przed powrotem showMenuView(); displayStatus("Powrócono do menu głównego.", "info"); }); // Symulacja postępu w grze simulateProgressButton.addEventListener('click', () => { if(isGameActive) { gameState.score += 10 * gameState.level; if (gameState.score % 100 === 0) { // Awans co 100 punktów gameState.level++; } updateGameUI(); displayStatus(`Zdobyto punkty! Wynik: ${gameState.score}`, "success", 1500); } }); // Modal listeners closeModalButton.addEventListener('click', closeOptionsModal); optionsModal.addEventListener('click', (event) => { // Zamykanie modala po kliknięciu na tło if (event.target === optionsModal) { closeOptionsModal(); } }); volumeSlider.addEventListener('input', () => { volumeValueSpan.textContent = `${volumeSlider.value}%`; // Można dodać logikę zmiany głośności audio w czasie rzeczywistym // np. gameAudio.setVolume(volumeSlider.value / 100); }); difficultySelect.addEventListener('change', () => { gameState.options.difficulty = difficultySelect.value; console.log("Zmieniono poziom trudności na:", gameState.options.difficulty); // Można dodać logikę dostosowującą grę do poziomu trudności }); // --- Inicjalizacja --- showMenuView(); // Pokaż menu na starcie updateOptionsUI(); // Ustaw początkowe wartości opcji w UI displayStatus("Witaj w Symulatorze Zombie!", "info", 5000); }); // Koniec DOMContentLoaded

Rozgrywka

Opcje