Symulator Szpitala - Symulacja Gra

Proszę użyć Three.js, aby wygenerować **grę zorientowaną na urządzenia mobilne (mobile-first)** o temacie "Symulator Szpitala: Klinika Chirurgii Oka". Najpierw zapoznaj się z poniższymi szczegółowymi wymaganiami dotyczącymi projektu gry, a następnie wygeneruj kod zgodnie z nimi: ### 1. Zasoby i Środowisko * **Styl wizualny:** Estetyka low-poly, kreskówkowa 3D, podobna do "Surgeon Simulator", ale czystsza. Jasne, wysycone kolory. * **Kluczowe modele:** * **Pacjent:** Stylizowana, low-poly głowa postaci leżąca na stole operacyjnym. Oczy powinny być przerysowanie duże i animowane (mrugające, nerwowo rozglądające się). * **Dolegliwości:** Proceduralnie generowane "ciała obce" na oku (np. małe poszarpane kamienie, odłamki szkła reprezentowane przez proste kształty geometryczne) i czerwone "zakażone miejsca". * **Narzędzia:** Modele 3D Pęsety (do usuwania obiektów), Wacika (do czyszczenia czerwonych miejsc) i Kropli do oczu (finiśer). * **Środowisko:** Sterylne niebieskie tło szpitalne z płytkowanymi ścianami. Prosta konfiguracja oświetlenia (AmbientLight + DirectionalLight) symulująca lampę operacyjną. * **Optymalizacja dla urządzeń mobilnych:** Użyj prostych materiałów (MeshLambertMaterial), aby zapewnić wysokie FPS na urządzeniach mobilnych. Ogranicz efekty cząsteczkowe do prostych wybuchów po udanych akcjach. ### 2. Wymagania dźwiękowe * **Muzyka w tle (BGM):** Lekka, lekko zwariowana melodia "muzak" lub bossa nova, która spokojnie zapętla się w tle (zapętlony dźwięk HTML5). * **Efekty dźwiękowe (SFX):** * **Wybór:** Miękki dźwięk "pop" przy wyborze narzędzia. * **Akcja:** Satysfakcjonujący dźwięk "szarpnięcia" przy usuwaniu obiektu. "Mięsisty" dźwięk pocierania przy czyszczeniu infekcji. * **Sukces:** Dźwięk "Dzyń!" lub dzwonka po zakończeniu operacji. * **Porażka/Ból:** Komediowe "Auć!" lub jęk pacjenta, jeśli gracz chybi lub go zrani. ### 3. Pętla Rozgrywki * **Faza 1 (Diagnoza):** Kamera przybliża się na twarz pacjenta. Gracz widzi dolegliwości (np. 3 kamienie, 2 czerwone plamy). * **Faza 2 (Operacja):** * Gracz wybiera narzędzie z paska interfejsu. * **Logika Pęsety:** Przeciągnij pęsetę nad ciałem obcym. Obiekt zostaje podświetlony. Puść (lub stuknij), aby go wyjąć. Jeśli kąt jest niewłaściwy (symulowany przez losowy przypadek lub precyzję), pacjent otrzymuje obrażenia od „Bólu”. * **Logika Wacika:** Przetrzyj (ruch przeciągnięcia) czerwone plamy, aż znikną. * **Faza 3 (Rezultat):** Po usunięciu wszystkich dolegliwości pacjent się uśmiecha. Pojawia się interfejs „Operacja zakończona sukcesem” pokazujący zarobione pieniądze. Przycisk „Następny pacjent” resetuje scenę z nowymi, losowymi dolegliwościami. * **Warunek przegranej:** Jeśli pasek „Licznik Bólu” się zapełni (z powodu złych kliknięć/przeciągnięć), pacjent ucieka, a poziom rozpoczyna się od nowa. ### 4. Sterowanie i interakcja na urządzeniach mobilnych * **Orientacja ekranu:** Preferowana jest orientacja **pozioma**, aby pomieścić pasek narzędzi i twarz pacjenta obok siebie. * **Sterowanie dotykowe:** * **Pasek narzędzi:** Stały pasek interfejsu na dole lub z prawej strony z dużymi ikonami (min. 60x60px) do wyboru narzędzia. Stuknij, aby wyposażyć. * **Raycasting:** Użyj Three.js Raycaster, aby zmapować współrzędne dotyku na przestrzeń 3D. * **Gestykulacja:** * **Stuknięcie:** Aby wybrać obiekty Pęsetą. * **Przeciągnięcie:** Aby wyczyścić ruchem Wacikiem. * **Informacja zwrotna:** * **Wizualna:** Gdy narzędzie jest nad prawidłowym celem, cel powinien świecić (zmiana materiału emisyjnego). * **Wibracje:** Wywołaj `navigator.vibrate(50)` przy udanym usunięciu obiektu lub ukończeniu zadania czyszczenia. * **Kamera:** Lekkie drżenie kamery, jeśli gracz zrani pacjenta. Stwórz grę typu "Kliknij monetę" w HTML, CSS i JavaScript. Użytkownik widzi monetę na ekranie. Kiedy klikną w monetę, powinna się obrócić i pokazać przeciwną stronę, a licznik kliknięć ma się zwiększyć. Użyj płynnej animacji obrotu 3D. Wymagania: 1. **HTML:** Umieść monetę w `<div id="coin"></div>`. Dołącz też `<p id="counter">Liczba kliknięć: 0</p>`. 2. **CSS:** Stylizuj monetę jako okrąg z dwoma stronami (`front` i `back`). Użyj `transform-style: preserve-3d` i `transition: transform 1s`. Ukryj tylną stronę za pomocą `backface-visibility: hidden`. 3. **JavaScript:** Nasłuchuj zdarzenia `click` na monecie. Przy każdym kliknięciu przełączaj klasę (np. `.flipped`) na elemencie monety, która zmienia `transform: rotateY(...)`. Aktualizuj licznik w elemencie `#counter`. 4. **Efekt:** Pełny obrót monety o 180 stopni przy każdym kliknięciu, płynnie odsłaniając drugą stronę. Kod szkieletowy: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Coin Click Game</title> <style> #coin { width: 150px; height: 150px; position: relative; transform-style: preserve-3d; transition: transform 1s; cursor: pointer; } #coin .front, #coin .back { position: absolute; width: 100%; height: 100%; border-radius: 50%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: white; } #coin .front { background-color: gold; } #coin .back { background-color: silver; transform: rotateY(180deg); } #coin.flipped { transform: rotateY(180deg); } body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; font-family: Arial, sans-serif; } #counter { font-size: 20px; margin-top: 20px; } </style> </head> <body> <div id="coin"> <div class="front">Głowa</div> <div class="back">Reszka</div> </div> <p id="counter">Liczba kliknięć: 0</p> <script> const coin = document.getElementById('coin'); const counterElement = document.getElementById('counter'); let clickCount = 0; coin.addEventListener('click', function() { this.classList.toggle('flipped'); clickCount++; counterElement.textContent = `Liczba kliknięć: ${clickCount}`; }); </script> </body> </html>