Aplikacja: labirynt.komputerowka.pl Wersja dokumentacji: 1.0 (październik 2026) Autor: Arnold Basiński, Komputerowka.pl Dla kogo: uczniowie klas 6–8 szkoły podstawowej i szkoły średniej, nauczyciele informatyki i matematyki

Aplikacja to wizualizacja czterech klasycznych algorytmów wyszukiwania drogi: BFS, DFS, algorytmu Dijkstry i A*. Uczeń rysuje labirynt, uruchamia algorytm i na żywo widzi, które pola są sprawdzane i jaka droga zostaje znaleziona.

---

---

1. Wymagania

• Dowolna nowoczesna przeglądarka:#Chrome, #Edge, #Firefox, #Safari, także na telefonie i tablecie.
• Włączony #JavaScript.
• Nie trzeba niczego instalować ani zakładać konta.
• Na tablicy interaktywnej rysowanie palcem działa tak samo jak myszą.

2. Szybki start

1. Otwórz labirynt.komputerowka.pl. Na planszy jest otwarta siatka ze startem po lewej i metą po prawej.
2. Kliknij ▶ Szukaj. Zobaczysz, jak A* idzie wąskim paskiem prosto do mety.
3. Zmień algorytm na BFS i kliknij ▶ Szukaj jeszcze raz. Teraz fala zalewa prawie całą planszę.
4. Porównaj licznik „sprawdzone pola”: A* sprawdza ich kilkanaście, BFS ponad dwieście.
5. Kliknij 🌀 Labirynt i spróbuj jeszcze raz w prawdziwym labiryncie.

3. Budowa strony

Część	Czego uczy
Plansza na żywo	jak algorytm przeszukuje pola i odtwarza drogę
Cztery sposoby szukania	różnice między #BFS, #DFS, #Dijkstri i A*
Wyścig algorytmów	porównanie czterech algorytmów na raz
Sprawdź się	quiz, 6 pytań
Najczęstsze pytania	FAQ i zastosowania

4. Plansza i rysowanie

Rysowanie ścian

Kliknięcie pustego pola stawia ścianę, kliknięcie ściany ją usuwa. Przeciąganie maluje: jeśli zaczniesz na pustym polu, stawiasz ściany, jeśli na ścianie, wymazujesz. Działa myszą i palcem.

Start i meta

🟢 start i 🔴 metę przesuwa się przeciąganiem. Nie można postawić ściany na starcie ani na mecie.

Klawiatura

Wejdź klawiszem Tab w obszar planszy, strzałkami nie trzeba, wystarczy ustawić fokus na polu. Naciśnięcie spacji albo Enter stawia lub usuwa ścianę na polu, które ma fokus. To ważne dla osób, które nie korzystają z myszy.

Rozmiar planszy i przeszkody

Przycisk	Działanie
Rozmiar	mała 15×11, średnia 21×15, duża 29×19
🌀 Labirynt	generuje prawdziwy labirynt z jedną drogą między polami
🎲 Losowo	rozrzuca losowe ściany (około 28% pól)
Puść	czyści wszystkie ściany (pusta, otwarta plansza)

Labirynt powstaje metodą „rekurencyjnego cofania” (recursive backtracker): to ten sam pomysł co DFS, tylko użyty do drążenia korytarzy. W takim labiryncie między dwoma polami jest dokładnie jedna droga, dlatego wszystkie algorytmy znajdują tę samą trasę, a różnią się tylko liczbą sprawdzonych pól.

5. Sterowanie i animacja

Element	Działanie
Algorytm	wybór: BFS, DFS, Dijkstra, A*
▶ Szukaj / ⏸ Pauza	uruchamia i zatrzymuje animację
Krok ▸	wykonuje pojedynczy krok algorytmu (jedno zdarzenie)
Wyczyść ślad	usuwa kolorowanie, zostawia ściany, start i metę
Tempo	suwak prędkości animacji

Zmiana algorytmu lub narysowanie ściany automatycznie czyści poprzedni ślad. Po znalezieniu mety aplikacja rysuje żółtą drogę od startu do celu i wypisuje podsumowanie: długość drogi i liczbę sprawdzonych pól.

6. Cztery algorytmy

Algorytm	Struktura listy	Wybiera następne pole	Najkrótsza droga?	Sprawdza pól
BFS (wszerz)	kolejka #FIFO	to, które czeka najdłużej	✔ tak	dużo
DFS (w głąb)	stos #LIFO	ostatnio dodane	✘ nie zawsze	mało
Dijkstra	kolejka priorytetowa	najbliższe startu	✔ tak	dużo
A*	kolejka priorytetowa	najbliższe startu + szacunek do mety	✔ tak	mało

• BFS rozlewa się jak fala i daje najkrótszą drogę, ale sprawdza bardzo dużo pól.
• DFS idzie w jedną stronę jak najdalej. Sprawdza mało pól, lecz jego droga bywa kręta i długa.
• Dijkstra zawsze bierze pole najbliższe startu. Na planszy z jednakowymi krokami działa jak #BFS.
• A* dodaje heurystykę: szacunek odległości do mety liczony w pionie i poziomie (odległość Manhattan). Dzięki temu idzie prosto do celu i sprawdza najmniej pól, zachowując najkrótszą drogę.

Każdy ruch to jeden krok w pionie lub poziomie (bez skosów). Każdy krok kosztuje tyle samo, dlatego BFS, #Dijkstra i A* dają zawsze tę samą, najkrótszą długość drogi.

7. Liczniki i kolory

Panel z prawej strony (pod planszą na telefonie):

Licznik	Znaczenie
Sprawdzone pola	ile pól algorytm zdjął z kolejki i rozpatrzył (im mniej, tym szybciej)
Długość drogi	liczba kroków od startu do mety (im mniej, tym lepiej); „brak”, gdy drogi nie ma
W kolejce teraz	ile pól czeka jeszcze na sprawdzenie (czoło fali)

Kolory pól:

Kolor	Znaczenie
zielony	start
czerwony	meta
jasnoniebieski (czoło)	pole w kolejce, jeszcze nie sprawdzone
niebieski	pole już sprawdzone
żółty	znaleziona droga
ciemny	ściana

8. Wyścig algorytmów

Przycisk ▶ Start wyścigu uruchamia wszystkie cztery algorytmy na tym samym labiryncie, na czterech mini-planszach obok siebie. Pod każdą widać dwie liczby:

• droga — długość znalezionej trasy (mniej = lepiej),
• sprawdzone — liczba sprawdzonych pól (mniej = szybciej).

Przycisk 🌀 Nowy labirynt losuje nowy układ. Wyścig używa losowych przeszkód (nie labiryntu z jedną drogą), żeby pokazać także różnice w długości trasy: BFS, Dijkstra i A* dają najkrótszą drogę, a DFS często znacznie dłuższą.

9. Quiz

6 pytań w stałej kolejności, odpowiedzi tasowane przy każdym pytaniu. Po odpowiedzi pojawia się wyjaśnienie, na końcu wynik i przycisk „Jeszcze raz”. Wynik nie jest nigdzie zapisywany.

10. Odpowiedzi dla nauczyciela

Quiz

Pytanie	Prawidłowa odpowiedź
Który algorytm zawsze znajduje najkrótszą drogę, ale sprawdza dużo pól?	BFS (przeszukiwanie wszerz)
Czym różni się A* od algorytmu Dijkstry?	A* dodaje szacunek odległości do mety i idzie prosto do celu
Dlaczego DFS (w głąb) bywa gorszy do szukania najkrótszej drogi?	Idzie w jedną stronę jak najdalej, więc jego droga bywa kręta i długa
Co to jest #heurystyka w algorytmie A*?	Szybki, przybliżony szacunek odległości do mety
Co robi #algorytm, gdy meta jest całkiem odgrodzona ścianami?	Sprawdza wszystkie dostępne pola i zgłasza brak drogi
Gdzie naprawdę używa się szukania drogi?	W nawigacji, grach, robotach i sieciach komputerowych

Czego się spodziewać na otwartej planszy (przycisk „Puść”)

Na pustej planszy średniej (21×15) ze startem po lewej i metą po prawej wyniki są zawsze takie same:

Algorytm	Długość drogi	Sprawdzone pola
BFS	18	ok. 237
Dijkstra	18	ok. 237
A*	18	ok. 19
DFS	dłuższa (np. 72)	ok. 251

Wniosek do omówienia: wszystkie prócz DFS dają drogę 18 kroków. A* sprawdza kilkanaście razy mniej pól niż BFS, bo idzie prosto do celu. DFS kluczy, więc jego droga jest znacznie dłuższa.

Czego się spodziewać w labiryncie (przycisk „🌀 Labirynt”)

W prawdziwym labiryncie między startem a metą jest tylko jedna droga, więc wszystkie cztery algorytmy znajdują tę samą długość trasy. Różnią się jedynie liczbą sprawdzonych pól: zwykle A* sprawdza najmniej, potem DFS, a najwięcej BFS i Dijkstra. To dobry moment, żeby pokazać, że „najkrótsza droga” i „ile pracy trzeba, żeby ją znaleźć” to dwie różne rzeczy.

Dlaczego na otwartej planszy A* to tylko pasek

A* szacuje odległość do mety w linii prostej (w pionie i poziomie). Na otwartej planszy ten szacunek jest idealny, więc algorytm ani razu nie zbacza z kursu i sprawdza prawie wyłącznie pola na trasie. Gdy dołożysz ściany, A* zacznie sprawdzać więcej pól, bo szacunek przestaje być idealny: ściany trzeba obejść.

11. Ściąga

Pojęcie	Wyjaśnienie
graf	zbiór punktów (pól) połączonych krawędziami; plansza to graf, w którym sąsiednie pola są połączone
BFS	przeszukiwanie wszerz; kolejka FIFO; najkrótsza droga
DFS	przeszukiwanie w głąb; stos LIFO; droga nie zawsze najkrótsza
Dijkstra	zawsze bierze najbliższe (najtańsze) pole; radzi sobie z różnymi kosztami kroków
A*	Dijkstra + heurystyka (szacunek do mety); sprawdza mniej pól
heurystyka	szybki, przybliżony szacunek; w A* odległość do mety
odległość Manhattan	suma kroków w pionie i poziomie, jak w mieście o prostopadłych ulicach
kolejka FIFO	pierwszy przyszedł, pierwszy wychodzi (jak kolejka w sklepie)
stos LIFO	ostatni przyszedł, pierwszy wychodzi (jak stos talerzy)

Szkielet algorytmu wyszukiwania:

1
2
3
4
5
6
7
8
9
dodaj start do listy "do sprawdzenia"

dopóki lista nie jest pusta:

    weź z listy pole P (który wybrać — to różni algorytmy)

    jeśli P to meta: koniec, odtwórz drogę po zapamiętanych "skąd"

    oznacz P jako sprawdzone

    dla każdego sąsiada S pola P (bez ścian i sprawdzonych):

        zapamiętaj, że do S doszliśmy z P

        dodaj S do listy

jeśli lista się opróżniła bez mety: drogi nie ma

12. Instalacja na własnym serwerze

Paczka

zawiera:

Plik	Opis
1 index.html	aplikacja z pełnym #SEO (meta, Open #Graph, dane strukturalne, FAQ)
1 og-image.png	obrazek 1200 × 630 px do podglądu linku
1 sitemap.xml	mapa strony dla wyszukiwarek
1 robots.txt	informacja dla robotów wyszukiwarek
1 README.txt	skrócona instrukcja

Kroki

1. Utwórz subdomenę #

   1	labirynt.komputerowka.pl

   .
2. Rozpakuj #zip i wgraj pliki (README.txt nie jest potrzebny) do jej głównego katalogu.
3. Sprawdź, czy otwierają się

   1	https://labirynt.komputerowka.pl/

   i

   1	https://labirynt.komputerowka.pl/og-image.png

   .

Aplikacja to jeden statyczny plik: nie potrzebuje #PHP, bazy danych ani bibliotek. Z zewnątrz pobiera tylko czcionki Google Fonts (bez nich użyte zostaną czcionki zastępcze).

Inny adres

Pliki są przygotowane pod

. Przy innym adresie zamień go:

• w

  1	index.html

  w bloku oznaczonym komentarzem ADRES STRONY,
• w danych strukturalnych #JSON-LD w

  1	index.html

  ,
• w

  1	sitemap.xml

  i

  1	robots.txt

  .

Jeśli korzystasz z wtyczki Komputerowka – Aplikacje edukacyjne, od wersji 1.9.0 Labirynt i wyszukiwanie jest tam w dziale „Algorytmy”. Inny adres zmienisz w panelu Aplikacje EDU.

Po wgraniu

1. Google Search Console: dodaj subdomenę i zgłoś

   1	sitemap.xml

   .
2. Sprawdź dane strukturalne: search.google.com/test/rich-results. Strona zawiera m.in. sekcję FAQ.
3. Sprawdź podgląd linku: developers.facebook.com/tools/debug.

13. Pomysły na lekcję

Lekcja (45 min): Jak komputer szuka drogi

Czas	Aktywność
5 min	Pytanie na start: skąd nawigacja wie, którędy jechać? Zbierz pomysły.
10 min	Otwarta plansza: uruchom A*, potem BFS. Porównajcie liczniki sprawdzonych pól.
10 min	Cztery algorytmy: omówienie, który jak wybiera następne pole.
10 min	Labirynt: uczniowie rysują własny i sprawdzają, czy A* dalej wygrywa.
5 min	Wyścig algorytmów: dlaczego DFS daje dłuższą drogę?
5 min	Quiz.

BFS na papierze

Kartka w kratkę, start i meta. Uczniowie wpisują w pola liczby: 0 na starcie, 1 we wszystkich sąsiadach, 2 w ich sąsiadach i tak dalej (to właśnie fala BFS). Gdy dojdą do mety, idą po malejących liczbach z powrotem do startu i dostają najkrótszą drogę. Potem porównują wynik z aplikacją.

Żywy labirynt

Uczniowie ustawiają się w siatce na sali (np. 5×5). Jedna osoba to start. „Fala BFS”: w pierwszej rundzie rękę podnoszą sąsiedzi startu, w drugiej ich sąsiedzi. Widać, jak fala dociera do mety i że dotarła najkrótszą drogą.

Pytania do dyskusji

• Dlaczego BFS zawsze daje najkrótszą drogę, a DFS nie?
• Kiedy warto użyć DFS, skoro jego droga bywa dłuższa? (np. gdy chcemy tylko sprawdzić, czy da się dojść)
• Dlaczego dobra heurystyka nie może zawyżać odległości do mety?
• Co zmieniłoby się, gdyby niektóre pola były „wolniejsze” (np. błoto)? (wtedy błyszczy Dijkstra)

Łączenie przedmiotów

• Matematyka: współrzędne, odległość Manhattan kontra odległość w linii prostej, symetria fali.
• Geografia: mapa i trasa; dlaczego nawigacja czasem prowadzi okrężnie (koszty dróg).
• Informatyka: kolejka i stos jako struktury danych; pojęcie grafu.

Dla starszych uczniów

Napiszcie BFS w Pythonie na planszy 2-wymiarowej (lista list, 0 i 1). Użyjcie kolejki (

) i słownika „skąd”. Porównajcie znalezioną długość drogi z wynikiem aplikacji na tym samym labiryncie.

14. Rozwiązywanie problemów

Problem	Rozwiązanie
Rysowanie nie działa na telefonie	Dotykaj samej planszy; w tym miejscu strona się nie przewija.
Pola są bardzo małe	Wybierz mniejszą planszę. Na telefonie najwygodniejsza jest mała.
Wszystkie algorytmy dają tę samą drogę	To normalne w labiryncie z jedną drogą (przycisk 🌀). Różnicę długości pokazuje „🎲 Losowo” i wyścig.
Animacja za szybka lub za wolna	Przesuń suwak Tempo.
„Nie ma drogi do mety”	Meta jest odgrodzona ścianami. Usuń kawałek ściany albo kliknij „Puść”.
DFS daje raz krótką, raz długą drogę	DFS zależy od kolejności sprawdzania sąsiadów, więc jego trasa bywa różna. To cecha tego algorytmu.
Włączony tryb ograniczonego ruchu	Przy ustawieniu „ogranicz animacje” w systemie aplikacja od razu pokazuje wynik bez animacji.

15. Prywatność

• Wszystko działa w przeglądarce ucznia. Nic nie jest wysyłane.
• Aplikacja nie zapisuje niczego w pamięci przeglądarki, nie używa plików cookie ani narzędzi śledzących.

---

Zobacz też: wszystkie aplikacje, Wyścig sortowania, Gra w życie, Zgadnij liczbę, GPS po Gdańsku i Jak uczy się AI.

© 2026 Komputerowka.pl · Arnold Basiński