WebQuest — Wisielec: zaprojektuj i wygeneruj grę (AI + własne grafiki)
Krok po kroku: od konceptu, przez prompt dla AI, do publikacji gry. Na końcu — działające demo, które możesz podmienić grafikami.
1. Wprowadzenie
Wisielec (Hangman) to prosta gra słowna: komputer wybiera słowo, gracz zgaduje litery; za błędne odpowiedzi rysowany jest kolejny element „wisielca”. W tej lekcji nauczysz się: zaplanować mechanikę, napisać prompt dla AI, wstawić własne grafiki i uruchomić grę w przeglądarce.
2. Cele
Zrozumieć elementy gry (słowo, sprawdzanie liter, limit prób).
Nauczyć się formułować prompt dla AI, by wygenerować kod gry.
Przygotuj własne grafiki (max 7 etapów) i podmień w kodzie (upload na stronie demo lub linki).
Przetestuj grę, zapisz refleksję i wyślij link/nagranie ekranu nauczycielowi.
Uwaga etyczna: jeśli używasz AI do generowania kodu lub grafik, zawsze sprawdź poprawność i prawa licencyjne wygenerowanych treści.
Przykładowe prompt'y do AI — generuj kod Wisielec
Skopiuj i wklej do modelu: edytuj „TEMAT” i „LICZBA_ETAPÓW”. Poproś model o krótkie wyjaśnienia i komentarze.
Prompt — kod HTML/JS gry (prosty, z obsługą własnych grafik)
Proszę wygeneruj kompletny plik HTML z prostą grą "Wisielec" w JavaScript.
Wymagania:
- Gra powinna losować słowo z listy (temat: TEMAT, np. "zwierzęta").
- Pokazywać podkreślenia dla nieodgadniętych liter, akceptować wpisanie pojedynczej litery.
- Limit błędów: LICZBA_ETAPÓW (np. 7).
- Domyślnie grafika wisielca rysowana jest na canvas, ale pozwól na podmianę etapów przez wgranie do max LICZBA_ETAPÓW plików; jeśli pliki wgrane — użyj ich zamiast rysunku.
- Dodaj przycisk "Nowa gra" i licznik zwycięstw/przegranych.
- Dodaj komentarze w kodzie i krótki opis jak podmienić grafiki.
- Nie używaj zewnętrznych bibliotek (tylko czysty JS / HTML / CSS).
Dostarcz też krótki przykład listy słów (20 słów) i komentarz jak rozszerzyć listę.
Prompt — generuj grafiki dla etapów
Proszę wygeneruj 7 wariantów ilustracji w stylu flat/vektor (baner 800x600) przedstawiających etapy gry "wisielec": 0 błędów (puste), 1 błąd (słup), 2 błędy (belka), ... 7 błędów (pełny wisielec). Użyj prostych kształtów, jasnej palety, bez tekstu. Podaj też alternatywne prompt'y do DALL·E i informacje o dozwolonym użyciu.
Porada: poproś AI dodatkowo o krótką listę testów (unit/edge cases), np. słowa z powtórzeniami liter, polskie znaki.
Interaktywne demo Wisielec (uruchom tutaj & podmień grafiki)
Demo zawiera prostą logikę: losowanie słowa z listy, sprawdzanie liter, rysowanie na canvas. Możesz wgrać do 7 plików graficznych — zostaną użyte jako kolejne etapy.
Wgraj maks. 7 plików (etapy obrazu):
Słowo (temat domyślny: zwierzęta)
_ _ _ _ _ _
Próby: 0 / 7
Zgadnięte litery: -
Wynik:
Gotowy starter code — pobierz plik HTML
Jeśli chcesz pobrać przykładowy starter (ten plik), kliknij poniżej. Możesz edytować listę słów i style.
Zadania (WebQuest) — ocena i produkty
Utwórz listę słów tematycznych (min. 20 słów) — dołączyć plik .txt lub wkleić do dokumentu.
Skorzystaj z podanego prompta w AI, wygeneruj kod i opisz zmiany, które wprowadziłeś (max 200 słów).
Podmień grafiki (min. 3 etapy własne), przetestuj grę lokalnie.
Opublikuj grę (np. GitHub Pages, Netlify, lub jako plik HTML) i podaj link.
Załącz krótką refleksję: co AI zrobiło dobrze, co wymagało korekty i jakie problemy napotkałeś.
Produkt końcowy: link do działającej gry + plik źródłowy (.zip) z grafikami i opisem.
Rubryka oceniania (sugerowana)
Obszar
4
3
2
Funkcjonalność
Gra działa bez błędów, wszystkie wymagania
Ma drobne błędy, ale grywalna
Duże błędy uniemożliwiają granie
Użycie AI
Prompt poprawny, AI użyte mądrze i oznaczone
AI użyte, wymagane poprawki
AI użyte bez korekt / brak oznaczenia
Własne grafiki
Grafiki estetyczne i dopasowane
Grafiki działające, ale słabsza jakość
Brak lub niepasujące grafiki
FAQ — pomocne wskazówki
Jak podmienić obrazy: w demo użyj pola upload. W wygenerowanym kodzie możesz podmienić elementy tablicy stageImages na URL-e do plików lub wczytywać z input type="file".
Polskie znaki: jeśli chcesz mieć słowa z polskimi znakami, upewnij się, że kod obsługuje Unicode (JS string OK). Maskowanie traktuje litery podobnie — możesz dopasować regex.
Rozszerzenia: dodaj timer, ranking, zapis wyników w LocalStorage.
Szablon raportu ucznia (wklej do dokumentu)
Tytuł gry:
Temat listy słów:
Jak użyłem AI (prompt):
Zmiany w kodzie (krótkie):
Liczba własnych grafik i źródła:
Link do gry:
Refleksja (max 200 słów):