Zadanie 120: Kostka do gry - sterowanie z konsoli

Wstęp

DOM (Document Object Model) pozwala językowi JavaScript na manipulowanie elementami strony. Jednym z podstawowych atrybutów, które możemy zmieniać, jest źródło obrazka (src). W tym zadaniu połączysz umiejętności pracy z grafiką, HTML oraz JavaScript, aby stworzyć interaktywną kostkę do gry, którą będziesz sterować "ręcznie" z poziomu konsoli przeglądarki.

Cel zadania

Stworzenie strony wyświetlającej kostkę do gry. Uczeń musi samodzielnie przygotować grafiki ścianek kostki. Zmiana liczby oczek na kostce ma odbywać się poprzez wywołanie przygotowanej funkcji TypeScript/JavaScript bezpośrednio w konsoli deweloperskiej przeglądarki.

Wymagania

1. Grafika: Przygotuj 6 grafik reprezentujących ścianki kostki (1-6 oczek).
   • Format: PNG lub JPG.
   • Wymiary: np. 200x200 pikseli.
   • Nazwy plików: przemyślane, np. k1.png, k2.png itd., aby łatwo było nimi zarządzać w kodzie.
   • Uwaga: Grafiki wykonaj samodzielnie w dowolnym programie graficznym (Paint, GIMP, Photoshop, Canva itp.).
2. HTML: Strona powinna zawierać obrazek (<img>) wyświetlający domyślnie jedną ze ścianek.
3. CSS: Wyśrodkuj kostkę na ekranie i dodaj estetyczne tło.
4. JavaScript:
   • Napisz funkcję o nazwie ustawKostke(n), gdzie n to liczba oczek (1-6).
   • Funkcja ta ma zmieniać atrybut src obrazka na odpowiedni plik graficzny.
   • Funkcja powinna sprawdzać, czy podany argument jest prawidłowy (liczba całkowita od 1 do 6). Jeśli nie – wypisz błąd w konsoli (console.error).
   • Ważne: Funkcja nie ma być podpięta pod żaden przycisk na stronie! Ma być dostępna w zakresie globalnym, aby można ją było wywołać ręcznie.

Instrukcja

1. Stwórz folder projektu i umieść w nim swoje 6 grafik kostki.
2. Stwórz plik index.html.
3. Dodaj tag <img> z id (np. id="kostka").
4. W pliku .js (lub w tagu <script>) pobierz element obrazka do zmiennej.
5. Zdefiniuj funkcję ustawKostke(liczba).
   • Wewnątrz funkcji zbuduj nazwę pliku na podstawie argumentu (np. "k" + liczba + ".png").
   • Podmień src elementu.
6. Otwórz stronę w przeglądarce.

Weryfikacja

1. Otwórz Konsolę Deweloperską (F12 -> zakładka Console).
2. Wpisz komendę: ustawKostke(3) i naciśnij Enter.
3. Obrazek na stronie powinien zmienić się na kostkę z 3 oczkami.
4. Wpisz komendę: ustawKostke(6). Obrazek powinien pokazać 6 oczek.
5. Wpisz: ustawKostke(10). W konsoli powinien pojawić się komunikat błędu, a kostka nie powinna zniknąć (powinna zostać poprzednia).