Rozumiem, chcesz znacznie rozbudować grę. Dodanie dużej mapy, ładnych tekstur (co jest trudne bez plików graficznych, więc użyjemy lepszych kolorów i kształtów), systemu monet, sklepu, inspekcji paczek i telefonu to sporo zmian. Zaimplementujemy te funkcje krok po kroku. Pamiętaj, że "ładne tekstury" w tym kontekście będą oznaczać bardziej zróżnicowane kolory i proste kształty, ponieważ nie możemy ładować obrazów. Prawdziwa duża mapa z przewijaniem jest skomplikowana, na razie zasymulujemy większy obszar, umieszczając elementy dalej od siebie. Oto zaktualizowany kod: Sigma Gra - Zadania Simulator

Sigma Gra - Zadania Simulator

Zadanie: Brak

Pozycja: X=0, Y=0

Monety: 0

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Lepsza czcionka */ display: flex; flex-direction: column; align-items: center; margin-top: 15px; background-color: #e8f5e9; /* Bardzo jasnozielone tło */ color: #333; } h1 { color: #1b5e20; /* Ciemny zielony */ text-shadow: 1px 1px 2px #a5d6a7; } #game-area { position: relative; /* Potrzebne do pozycjonowania overlayów */ display: flex; flex-direction: column; align-items: center; } #gameCanvas { border: 3px solid #388e3c; /* Grubsza, ciemniejsza zielona ramka */ background-color: #c8e6c9; /* Jasnozielone tło canvasu */ display: block; /* Usuwa domyślny margines pod canvasem */ } #ui { margin-top: 10px; padding: 10px 15px; background-color: #f1f8e9; border: 1px solid #a5d6a7; border-radius: 5px; min-width: 400px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } #ui p { margin: 5px 0; color: #388e3c; font-weight: bold; } #ui span { font-weight: normal; color: #555; } button { margin: 5px; padding: 10px 15px; /* Większe przyciski */ font-size: 1em; cursor: pointer; background-color: #4caf50; /* Żywy zielony */ color: white; border: none; border-radius: 4px; transition: background-color 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } button:hover { background-color: #388e3c; /* Ciemniejszy zielony */ } button:active { box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); } /* Style dla ukrytych interfejsów (Overlay) */ .overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.95); /* Lekko przezroczyste białe tło */ padding: 25px; border: 2px solid #4caf50; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 10; /* Nad canvasem */ min-width: 300px; text-align: center; } .overlay h2 { margin-top: 0; color: #1b5e20; } .overlay p { color: #333; } .hidden { display: none; } #phone-apps button { display: block; margin: 10px auto; width: 80%; } #discard-package { background-color: #f44336; /* Czerwony dla ostrzeżenia */ } #discard-package:hover { background-color: #d32f2f; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // --- Elementy UI --- const taskDescription = document.getElementById('task-description'); const playerPosXDisplay = document.getElementById('player-pos-x'); const playerPosYDisplay = document.getElementById('player-pos-y'); const playerCoinsDisplay = document.getElementById('player-coins'); const saveButton = document.getElementById('save-button'); const loadButton = document.getElementById('load-button'); // Sklep UI const shopButton = document.getElementById('shop-button'); const shopInterface = document.getElementById('shop-interface'); const closeShopButton = document.getElementById('close-shop'); const buyCapacityButton = document.getElementById('buy-capacity-upgrade'); const upgradeCostDisplay = document.getElementById('upgrade-cost'); const currentCapacityDisplay = document.getElementById('current-capacity'); // Inspekcja UI const inspectionInterface = document.getElementById('inspection-interface'); const packageContentName = document.getElementById('package-content-name'); const packageContentLegality = document.getElementById('package-content-legality'); const discardPackageButton = document.getElementById('discard-package'); const closeInspectionButton = document.getElementById('close-inspection'); // Telefon UI const phoneInterface = document.getElementById('phone-interface'); const mapAppButton = document.getElementById('map-app'); const closePhoneButton = document.getElementById('close-phone'); // --- Stan Gry --- let player = { x: canvas.width / 2, // Start na środku y: canvas.height / 2, width: 25, height: 25, color: '#2196F3', // Jasnoniebieski gracz speed: 4, coins: 0, packageCapacity: 1, currentPackages: [] // Teraz może trzymać paczki (na razie 1) }; // Symulacja większego świata przez rozmieszczenie obiektów let house = { id: 'house1', x: 150, y: 100, width: 70, height: 60, color: '#A1887F', // Szaro-brązowy doorColor: '#6D4C41', // Ciemniejszy brąz (drzwi) isSource: true // Czy można tu odebrać paczkę }; let npc = { id: 'npc1', x: canvas.width - 200, y: canvas.height - 150, radius: 18, color: '#FFB74D', // Jasnopomarańczowy isDestination: true // Czy można tu dostarczyć paczkę }; // Przykładowe inne obiekty (na razie tylko wizualne) let tree = { x: 50, y: 400, radius: 20, color: '#66BB6A' }; // Drzewo let rock = { x: 600, y: 80, width: 40, height: 30, color: '#BDBDBD'}; // Kamień let currentTask = null; // Zaczynamy bez zadania let keysPressed = {}; let showIndicator = true; // Czy pokazywać wskaźnik trasy const UPGRADE_COST = 50; // Koszt ulepszenia pojemności // --- Funkcje Pomocnicze --- function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } function generateTask() { // Proste generowanie: zawsze z domu do NPC const packageItem = Math.random() < 0.2 ? // 20% szans na nielegalny { name: "Podejrzany Proszek", isIllegal: true, value: 50 } : { name: `Zwykła Paczka #${getRandomInt(1, 100)}`, isIllegal: false, value: 10 }; currentTask = { description: `Odbierz paczkę z domu (${house.x}, ${house.y})`, pickupLocation: house, deliveryLocation: npc, packageDetails: packageItem, status: 'pickup' // 'pickup', 'delivery', 'completed' }; console.log("Nowe zadanie:", currentTask); updateTaskDescription(); } function updateTaskDescription() { if (!currentTask) { taskDescription.textContent = "Brak zadań. Poczekaj na nowe."; // Można dodać logikę np. pojawiania się zadań co jakiś czas setTimeout(generateTask, 3000); // Generuj zadanie po 3 sek. } else if (currentTask.status === 'pickup') { taskDescription.textContent = `Idź do domu (${currentTask.pickupLocation.x}, ${currentTask.pickupLocation.y}) po paczkę: ${currentTask.packageDetails.name}`; } else if (currentTask.status === 'delivery') { taskDescription.textContent = `Dostarcz paczkę (${currentTask.packageDetails.name}) do NPC (${currentTask.deliveryLocation.x}, ${currentTask.deliveryLocation.y})`; } else if (currentTask.status === 'completed') { taskDescription.textContent = "Zadanie wykonane! Oczekuj na następne."; setTimeout(generateTask, 3000); // Generuj kolejne zadanie po 3 sek. } else if (currentTask.status === 'discarded') { taskDescription.textContent = "Paczka wyrzucona. Oczekuj na następne zadanie."; setTimeout(generateTask, 3000); } } // --- Funkcje Gry --- function update() { // Ruch gracza if (keysPressed['ArrowUp'] && player.y > 0) player.y -= player.speed; if (keysPressed['ArrowDown'] && player.y < canvas.height - player.height) player.y += player.speed; if (keysPressed['ArrowLeft'] && player.x > 0) player.x -= player.speed; if (keysPressed['ArrowRight'] && player.x < canvas.width - player.width) player.x += player.speed; // Logika zadań if (currentTask) { // Odbiór paczki if (currentTask.status === 'pickup' && player.currentPackages.length < player.packageCapacity) { if (checkCollision(player, currentTask.pickupLocation)) { player.currentPackages.push(currentTask.packageDetails); currentTask.status = 'delivery'; player.color = '#FFEB3B'; // Żółty, gdy ma paczkę console.log("Paczka odebrana:", currentTask.packageDetails); updateTaskDescription(); } } // Dostawa paczki else if (currentTask.status === 'delivery' && player.currentPackages.length > 0) { if (checkCollisionCircle(player, currentTask.deliveryLocation)) { const deliveredPackage = player.currentPackages.shift(); // Usuń pierwszą paczkę z listy player.coins += deliveredPackage.value; // Dodaj monety console.log(`Paczka "${deliveredPackage.name}" dostarczona. +${deliveredPackage.value} monet.`); currentTask.status = 'completed'; player.color = '#2196F3'; // Wróć do normalnego koloru updateTaskDescription(); updateUICounters(); // Zaktualizuj licznik monet // currentTask = null; // Usuń zadanie po wykonaniu - zastąpione przez timeout } } } // Aktualizacja UI pozycji playerPosXDisplay.textContent = Math.round(player.x); playerPosYDisplay.textContent = Math.round(player.y); } function draw() { // Wyczyść canvas ctx.fillStyle = '#c8e6c9'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Rysuj elementy "mapy" ctx.fillStyle = tree.color; // Drzewo ctx.beginPath(); ctx.arc(tree.x + tree.radius, tree.y + tree.radius, tree.radius, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = rock.color; // Kamień ctx.fillRect(rock.x, rock.y, rock.width, rock.height); // Rysuj dom z "drzwiami" ctx.fillStyle = house.color; ctx.fillRect(house.x, house.y, house.width, house.height); ctx.fillStyle = house.doorColor; // Drzwi ctx.fillRect(house.x + house.width / 2 - 10, house.y + house.height - 25, 20, 25); // Proste drzwi // Rysuj NPC ctx.fillStyle = npc.color; ctx.beginPath(); ctx.arc(npc.x + npc.radius, npc.y + npc.radius, npc.radius, 0, Math.PI * 2); ctx.fill(); // Rysuj gracza ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); // Mała obwódka dla lepszej widoczności ctx.strokeStyle = '#1a237e'; ctx.lineWidth = 1; ctx.strokeRect(player.x, player.y, player.width, player.height); // Rysuj wskaźnik, jeśli aktywny if (showIndicator) { drawIndicator(); } } function drawIndicator() { if (!currentTask || currentTask.status === 'completed' || currentTask.status === 'discarded') return; ctx.strokeStyle = '#E91E63'; // Różowy wskaźnik ctx.lineWidth = 2; ctx.setLineDash([5, 5]); // Linia przerywana ctx.beginPath(); ctx.moveTo(player.x + player.width / 2, player.y + player.height / 2); if (currentTask.status === 'pickup') { // Wskaż na środek domu ctx.lineTo(currentTask.pickupLocation.x + currentTask.pickupLocation.width / 2, currentTask.pickupLocation.y + currentTask.pickupLocation.height / 2); } else if (currentTask.status === 'delivery') { // Wskaż na środek NPC ctx.lineTo(currentTask.deliveryLocation.x + currentTask.deliveryLocation.radius, currentTask.deliveryLocation.y + currentTask.deliveryLocation.radius); } ctx.stroke(); ctx.setLineDash([]); // Resetuj styl linii } function checkCollision(rect1, rect2) { return ( rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y ); } function checkCollisionCircle(rect, circle) { let closestX = Math.max(rect.x, Math.min(circle.x + circle.radius, rect.x + rect.width)); let closestY = Math.max(rect.y, Math.min(circle.y + circle.radius, rect.y + rect.height)); let distX = (circle.x + circle.radius) - closestX; let distY = (circle.y + circle.radius) - closestY; let distanceSquared = (distX * distX) + (distY * distY); return distanceSquared < (circle.radius * circle.radius); } function gameLoop() { update(); draw(); requestAnimationFrame(gameLoop); } // --- Aktualizacja UI --- function updateUICounters() { playerCoinsDisplay.textContent = player.coins; upgradeCostDisplay.textContent = UPGRADE_COST; currentCapacityDisplay.textContent = player.packageCapacity; } // --- Obsługa Klawiatury --- window.addEventListener('keydown', (e) => { keysPressed[e.key] = true; // Obsługa inspekcji paczki (R) if (e.key.toLowerCase() === 'r' && player.currentPackages.length > 0 && !inspectionInterface.classList.contains('hidden')) { // Jeśli już otwarte, zamknij closeInspectionUI(); } else if (e.key.toLowerCase() === 'r' && player.currentPackages.length > 0) { openInspectionUI(); } // Obsługa telefonu (Spacja) if (e.key === ' ' && !phoneInterface.classList.contains('hidden')) { // Jeśli już otwarte, zamknij closePhoneUI(); e.preventDefault(); // Zapobiegaj przewijaniu strony przez spację } else if (e.key === ' ') { openPhoneUI(); e.preventDefault(); // Zapobiegaj przewijaniu strony przez spację } }); window.addEventListener('keyup', (e) => { keysPressed[e.key] = false; }); // --- Interfejsy Użytkownika (Sklep, Inspekcja, Telefon) --- // Sklep shopButton.addEventListener('click', () => { shopInterface.classList.remove('hidden'); updateUICounters(); // Upewnij się, że dane w sklepie są aktualne }); closeShopButton.addEventListener('click', () => { shopInterface.classList.add('hidden'); }); buyCapacityButton.addEventListener('click', () => { if (player.coins >= UPGRADE_COST) { player.coins -= UPGRADE_COST; player.packageCapacity++; updateUICounters(); alert(`Kupiono ulepszenie! Nowa pojemność: ${player.packageCapacity}`); // Można dodać logikę zwiększania kosztu kolejnych ulepszeń } else { alert('Za mało monet!'); } }); // Inspekcja function openInspectionUI() { if (player.currentPackages.length > 0) { const packageInfo = player.currentPackages[0]; // Pokaż info o pierwszej paczce packageContentName.textContent = `Nazwa: ${packageInfo.name}`; packageContentLegality.textContent = `Legalność: ${packageInfo.isIllegal ? 'Nielegalna!' : 'Legalna'}`; if (packageInfo.isIllegal) { discardPackageButton.classList.remove('hidden'); } else { discardPackageButton.classList.add('hidden'); } inspectionInterface.classList.remove('hidden'); } } function closeInspectionUI() { inspectionInterface.classList.add('hidden'); } closeInspectionButton.addEventListener('click', closeInspectionUI); discardPackageButton.addEventListener('click', () => { if (player.currentPackages.length > 0 && player.currentPackages[0].isIllegal) { const discardedPackage = player.currentPackages.shift(); // Usuń paczkę console.log(`Nielegalna paczka "${discardedPackage.name}" wyrzucona.`); alert(`Nielegalna paczka "${discardedPackage.name}" została wyrzucona!`); if (currentTask && currentTask.packageDetails === discardedPackage) { currentTask.status = 'discarded'; // Oznacz zadanie jako anulowane przez wyrzucenie updateTaskDescription(); player.color = '#2196F3'; // Wróć do normalnego koloru } closeInspectionUI(); } }); // Telefon function openPhoneUI() { phoneInterface.classList.remove('hidden'); } function closePhoneUI() { phoneInterface.classList.add('hidden'); } closePhoneButton.addEventListener('click', closePhoneUI); mapAppButton.addEventListener('click', () => { showIndicator = !showIndicator; // Przełącz widoczność wskaźnika alert(`Wskaźnik trasy ${showIndicator ? 'WŁĄCZONY' : 'WYŁĄCZONY'}`); closePhoneUI(); // Zamknij telefon po użyciu aplikacji }); // --- Zapis/Odczyt Gry --- function saveGame() { const gameState = { playerX: player.x, playerY: player.y, playerCoins: player.coins, playerCapacity: player.packageCapacity, currentPackages: player.currentPackages, // Zapisz aktualnie trzymane paczki currentTaskState: currentTask ? { // Zapisz stan bieżącego zadania description: currentTask.description, pickupLocId: currentTask.pickupLocation.id, // Zapisz ID zamiast całego obiektu deliveryLocId: currentTask.deliveryLocation.id, packageDetails: currentTask.packageDetails, status: currentTask.status } : null, // Można dodać więcej danych }; localStorage.setItem('sigmaGameSimulatorState', JSON.stringify(gameState)); console.log('Gra zapisana!'); alert('Gra zapisana!'); } function loadGame() { const savedState = localStorage.getItem('sigmaGameSimulatorState'); if (savedState) { try { const gameState = JSON.parse(savedState); player.x = gameState.playerX; player.y = gameState.playerY; player.coins = gameState.playerCoins || 0; player.packageCapacity = gameState.playerCapacity || 1; player.currentPackages = gameState.currentPackages || []; // Przywróć zadanie (uproszczone - zakłada, że dom i npc istnieją) if (gameState.currentTaskState) { currentTask = { description: gameState.currentTaskState.description, // Znajdź obiekty po ID (na razie proste przypisanie) pickupLocation: house, // Załóżmy, że ID 'house1' to zmienna house deliveryLocation: npc, // Załóżmy, że ID 'npc1' to zmienna npc packageDetails: gameState.currentTaskState.packageDetails, status: gameState.currentTaskState.status }; // Ustaw kolor gracza jeśli ma paczkę if (currentTask.status === 'delivery') { player.color = '#FFEB3B'; } else { player.color = '#2196F3'; } } else { currentTask = null; player.color = '#2196F3'; } console.log('Gra wczytana!'); alert('Gra wczytana!'); updateUICounters(); updateTaskDescription(); // Zaktualizuj opis zadania po wczytaniu } catch (error) { console.error("Błąd podczas wczytywania gry:", error); alert("Nie udało się wczytać zapisu gry. Plik może być uszkodzony."); localStorage.removeItem('sigmaGameSimulatorState'); // Usuń uszkodzony zapis // Reset do stanu początkowego player.x = canvas.width / 2; player.y = canvas.height / 2; player.coins = 0; player.packageCapacity = 1; player.currentPackages = []; currentTask = null; generateTask(); // Wygeneruj nowe zadanie } } else { console.log('Brak zapisanego stanu gry.'); // alert('Brak zapisanego stanu gry.'); // Nie pokazuj alertu przy pierwszym uruchomieniu generateTask(); // Wygeneruj pierwsze zadanie, jeśli nie ma zapisu } updateUICounters(); // Zawsze aktualizuj UI po próbie wczytania } saveButton.addEventListener('click', saveGame); loadButton.addEventListener('click', loadGame); // --- Start Gry --- console.log("Sigma Gra - Zadania Simulator (Enhanced) załadowana!"); loadGame(); // Spróbuj wczytać grę przy starcie requestAnimationFrame(gameLoop); // Uruchom pętlę gry

Sigma Gra - Zadania Simulator

Sklep

Zawartość Paczki

Telefon