Na blogu pojawiło się już tyle różnych wersji gry memory w wersji papierowej, że chyba przyszedł czas zrobić kolejny krok. Tym razem nie będziemy drukować kart – tym razem zaprogramujemy własną grę memory w Scratchu. 😄
Kto pamięta serię Robimy naszą pierwszą grę, ten może być już przyzwyczajony do tego, jak opisuję Wam krok po kroku kodowanie gry w Scratch. Ten wpis będzie różnił się od tamtej serii tym, że zrobimy całą grę już dziś – w tym jednym wpisie. 🤯
Od razu powiem, że jest to poziom trochę bardziej zaawansowany, więc jeśli nie znacie Scratcha ani trochę, to najpierw sprawdźcie moje pierwsze lekcje.
W tej grze naszym zadaniem będzie odkrywanie kart i szukanie pasujących par – to jest właśnie „mechanika” gry typu memory. Jeśli dwie karty mają taki sam obrazek – pozostają odkryte. Jeśli są różne – po chwili znów się zakrywają. Jak na razie brzmi prosto?
To zaczynamy!
Co będzie nam potrzebne?
Gra Memory w Scratchu polega na tworzeniu kart jako klonów jednego duszka. Każda karta losuje swój obrazek z listy, a program sprawdza, czy dwie odkryte karty tworzą parę. Projekt wykorzystuje zmienne, listy, komunikaty, klony i instrukcje warunkowe.
A zatem w tym projekcie użyjemy:
- jednego duszka „Karta”,
- kilku kostiumów z obrazkami,
- tła startowego,
- tła „Wygrana”,
- listy,
- zmiennych,
- klonów,
- komunikatów,
- warunków,
- bloczków z kategorii „Wyrażenia”.
Jeśli czujecie się przytłoczeni, to – spokojnie. Wszystko omówimy po kolei. 😄
Jak działa nasza gra?
Nasza gra będzie miała 8 kart.
Każda karta będzie klonem jednego duszka. To oznacza, że nie musimy tworzyć ośmiu osobnych duszków. Tworzymy jedną kartę, a Scratch zrobi jej kopie.
Każda karta dostanie swój numer, swoje miejsce na planszy i swój obrazek.
Krok 1. Przygotowujemy listę obrazków
Najpierw możecie pobrać obrazki, które przygotowałam specjalnie dla tej gry na bazie mojego owocowo-warzywnego memory. Zajrzyjcie do wpisu Owocowo-warzywne grafiki do gry typu Memory, gdzie znajdziecie wszystkie potrzebne grafiki. Możecie też użyć Waszych grafik, albo tych dostępnych w Scratch. A na wypadek, gdybyście zapomnieli – tu jest wyjaśnione, jak wgrać grafiki do Scratcha?
Po skompletowaniu potrzebnych grafik tworzymy listę o nazwie „obrazki kart„. Szukajcie w kategorii „Zmienne” – tam będzie przycisk „Stwórz listę”.
Wpisujemy do niej liczby: 1, 1, 2, 2, 3, 3, 4, 4 Każda liczba oznacza jeden obrazek, np.
- 1 może oznaczać truskawkę,
- 2 może oznaczać banana,
- 3 może oznaczać jabłko,
- 4 może oznaczać marchewkę.
Ponieważ w memory każda karta musi mieć parę, każda liczba pojawia się dwa razy.
Czym jest lista w Scratchu?
Lista to takie pudełko, w którym możemy przechowywać wiele rzeczy naraz. Dla porównania zmienna przechowuje jedną informację, np.: zmienna ruchy = 3
Lista może przechowywać wiele informacji: obrazki kart = 1, 1, 2, 2, 3, 3, 4, 4
W naszej grze lista działa jak worek z obrazkami. Każda karta losuje jeden element z listy, a potem ten element jest usuwany. Dzięki temu mamy pewność, że każdy obrazek pojawi się dokładnie dwa razy.
Krok 2. Ustawiamy zmienne na początku gry
Kiedy klikamy zieloną flagę, musimy przygotować grę od początku. Ustawiamy tło na planszę gry. Czyścimy listę i ponownie dodajemy do niej obrazki kart, żeby mieć pewność, że wszystkie dobrze się załadowały. Potem ustawiamy zmienne na 0. Wcześniej oczywiście musimy stworzyć te zmienne w kategorii „Zmienne”, naciskając przycisk „Utwórz zmienną”.
Wypiszę Wam teraz wszystkie zmienne, których będziemy używać i oznaczę, które z nich należy ustawić „Dla wszystkich duszków”, a które „Tylko dla tego duszka” – pamiętajcie, to ważne dla poprawnego działania kodu!
Zmienne:
| Nazwa zmiennej | Dla wszystkich, czy dla jednego duszka? | Dlaczego tak? |
| blokada kliknięcia | Dla wszystkich duszków | Gdy dwie karty są odkryte, wszystkie karty muszą wiedzieć, że chwilowo nie wolno klikać |
| pierwszy obrazek | Dla wszystkich duszków | Zapamiętujemy obrazek pierwszej karty. |
| drugi obrazek | Dla wszystkich duszków | Zapamiętujemy obrazek drugiej karty. |
| pierwsza karta | Dla wszystkich duszków | Zapamiętujemy numer pierwszej odkrytej karty. |
| druga karta | Dla wszystkich duszków | Zapamiętujemy numer drugiej odkrytej karty. |
| liczba trafionych kart | Dla wszystkich duszków | To wynik całej gry (licznik znalezionych par). |
| los | Dla wszystkich duszków | Wspólna zmienna wykorzystywana podczas losowania obrazków. |
| mój obrazek | Tylko dla tego duszka (Każda karta ma własne dane, których inne karty nie powinny zmieniać.) | Każda karta przechowuje własny owoc lub warzywo. |
| numer karty | Tylko dla tego duszka (Każda karta ma własne dane, których inne karty nie powinny zmieniać.) | Każda karta ma swój własny numer. |
| odkryta? | Tylko dla tego duszka (Każda karta ma własne dane, których inne karty nie powinny zmieniać.) | Jedna karta może być odkryta, a druga zakryta. Każda musi pamiętać swój stan niezależnie. |
| ruchy | Dla wszystkich duszków | Liczba wykonanych ruchów dotyczy całej gry. |
| licznik kart | Dla wszystkich duszków | Wspólny licznik używany podczas tworzenia kart. |
Dlaczego potrzebujemy aż tylu zmiennych?
Bo gra memory musi dużo pamiętać 😄, Scratch musi wiedzieć:
- która karta została kliknięta jako pierwsza,
- która karta została kliknięta jako druga,
- jaki obrazek ma pierwsza karta,
- jaki obrazek ma druga karta,
- ile kart już trafiliśmy,
- ile ruchów wykonał gracz,
- czy wolno teraz klikać,
- który klon jest którą kartą.
Nasz program musi przez cały czas zapisywać informacje, żeby móc sprawdzić, czy gracz znalazł parę.
Krok 3. Tworzymy klony kart
Na początku tworzymy jednego duszka o nazwie „Karta” i dodajemy mu 4 kostiumy kart (potem możecie dodać więcej).
Przy okazji dodajmy też od razu grafikę z rewersem karty (tyłem), jako piąty kostium.
Teraz ukrywamy oryginalnego duszka „Karta”, a potem tworzymy 8 klonów.
Każdy klon stanie się jedną kartą na planszy.
To bardzo wygodne, bo jeśli chcemy coś zmienić w działaniu kart, zmieniamy kod tylko jednego duszka, a wszystkie klony działają tak samo. A dlaczego 8 klonów, skoro mamy tylko 4 karty? Bo przypominam, że w memory chodzi o PARY KART – czyli mamy 4 karty, ale każdą z nich musimy wyświetlić podwójnie. 😉
Krok 4. Każdy klon losuje swój obrazek
Kiedy klon powstaje, robi kilka rzeczy:
- pokazuje się,
- zmienia kostium na rewers karty,
- ustawia zmienną „odkryta?” na 0,
- losuje obrazek z listy,
- usuwa wylosowany element z listy,
- dostaje swój numer karty,
- idzie na odpowiednie miejsce na planszy.
To bardzo ważny moment.
Dzięki liście nie musimy ręcznie mówić każdej karcie, jaki ma mieć obrazek. Scratch sam losuje obrazki, a ponieważ usuwa je z listy, nie powstaną nam przypadkowe trzy takie same karty.
Ponieważ każda karta ma swój numer, to możemy „powiedzieć” każdej z nich, gdzie ma się znajdować, np.:
- karta 1 idzie w lewy górny róg,
- karta 2 idzie obok niej,
- karta 3 idzie dalej,
- karta 4 kończy pierwszy rząd,
- karta 5 zaczyna drugi rząd.
Dlatego w kodzie mamy warunki:
jeżeli numer karty = 1, idź do wybranego miejsca
jeżeli numer karty = 2, idź do kolejnego miejsca
i tak dalej.
To może wyglądać trochę długo, ale dla początkujących jest bardzo czytelne.
Krok 5. Klikamy kartę
Kiedy gracz kliknie kartę, Scratch najpierw sprawdza dwie rzeczy:
- czy kliknięcia nie są zablokowane, czyli, czy ma nam pozwolić kliknąć,
- i czy karta nie jest już odkryta.
Jeśli karta może zostać kliknięta, zmienia kostium z rewersu na swój obrazek (losowy).
Potem Scratch sprawdza czy to pierwsza karta w ruchu, czy druga?
Jeśli pierwsza karta jest jeszcze pusta, zapisujemy:
- numer pierwszej karty,
- wylosowany obrazek pierwszej karty.
Jeśli pierwsza karta już istnieje, to znaczy, że klikamy drugą kartę. Wtedy zapisujemy:
- numer drugiej karty,
- obrazek drugiej karty,
- dodajemy 1 do liczby ruchów,
- nadajemy komunikat „sprawdź parę”, żeby program przekonał się, czy mamy trafienie, czy pudło.
Wiem, brzmi skomplikowanie – zróbmy wszystko po kolei:
Jak nadać „komunikat”?
Musimy go stworzyć w kategorii „Zdarzenia”. Tworzy się go przez rozwinięcie listy, np. w bloczku „nadaj komunikat”, na końcu tej listy jest przycisk: „Nowa wiadomość”.
A dlaczego używamy bloczków z kategorii „Wyrażenia”?
Zwróćcie uwagę na powyższy obrazek – jest tam taki skomplikowany zielony bloczek (ten pierwszy w kodzie). Jeden duży zielony bloczek obejmuje dwa mniejsze zielone bloczki… Głowa chce od tego pęknąć! 🤯 Dlaczego to musi wyglądać tak skomplikowanie? Bo czasem warunek nie jest prosty… nie wystarczy zapytać: „Czy kliknięto kartę?”
Musimy zapytać bardziej dokładnie: „Czy kliknięcia są odblokowane ORAZ czy ta karta nie jest jeszcze odkryta?” albo: „Czy numer tej karty jest taki sam jak numer pierwszej karty LUB numer drugiej karty?”
Do takich bardziej złożonych pytań używamy bloczków z kategorii Wyrażenia. To właśnie ta zielona kategoria. To tam znajdziemy bloczki:
- i,
- lub,
- równa się,
- większe niż,
- mniejsze niż.
Dzięki nim Scratch może sprawdzać bardziej skomplikowane sytuacje.
Krok 6. Sprawdzamy, czy karty tworzą parę
Teraz Scratch porównuje dwa obrazki. Jeśli pierwszy obrazek = drugi obrazek, to znaczy, że znaleźliśmy parę i wtedy zwiększamy liczbę trafionych kart o 2, bo trafiliśmy dwie karty.
Potem nadajemy komunikat: „para znaleziona„.
Natomiast jeśli obrazki są różne, nadajemy komunikat: „zakryj nietrafione„.
Po sprawdzeniu, czy karty do siebie pasują, czy nie, musimy jeszcze wyzerować zmienne: pierwsza karta, druga karta, pierwszy obrazek, drugi obrazek i blokadę kliknięcia, bo będą nam potrzebne przy kolejnym ruchu.
Krok 7. Co robi komunikat „zakryj nietrafione”?
Jeśli karty nie pasują, musimy zakryć tylko te dwie karty, które właśnie kliknęliśmy. Dlatego każdy klon sprawdza: czy mój numer karty jest taki sam jak pierwsza karta lub druga karta? Jeśli tak, karta zmienia kostium na rewers i ustawia zmienną „odkryta?” na 0.
Dzięki temu znowu można będzie ją kliknąć.
Krok 9. Co robi komunikat „para znaleziona”?
Jeśli karta jest częścią poprawnej pary, nie zakrywamy jej. Ona pozostaje odkryta. To ważne, bo w memory trafione pary zostają widoczne do końca gry. Możemy tutaj dodać dźwięk albo mały efekt, ale nie zmieniamy kostiumu na rewers.
Krok 10. Wygrana
Na końcu sprawdzamy, ile kart zostało trafionych. Ponieważ mamy 8 kart, gra kończy się wtedy, kiedy liczba trafionych kart = 8. Wtedy nadajemy komunikat „wygrana„. Po otrzymaniu tego komunikatu zmieniamy tło na ekran wygranej i zatrzymujemy grę.
Sprawdź, czy działa!
Poprawnie działająca gra powinna wyglądać mniej więcej tak:
A cały kod prezentuje się tak:
Jeśli chcecie podejrzeć go w Scratchu, to link do gry i jej kodu jest tu: Owocowo-warzywne Memory.
Czego nauczyliśmy się w tym projekcie?
Tworząc grę memory w Scratchu, użyliśmy wielu ważnych elementów programowania.
Poznaliśmy:
- listy,
- zmienne,
- klony,
- losowanie,
- komunikaty,
- warunki,
- wyrażenia,
- sprawdzanie par,
- blokowanie kliknięć,
- ekran wygranej.
To całkiem sporo jak na jedną grę!
Ale właśnie dlatego memory jest tak dobrym projektem do nauki Scratcha. Wygląda prosto, ale w środku ma dużo ciekawej logiki.
Co można dodać później?
Jeśli Wasza gra już działa, możecie ją rozbudować, np. dodać więcej kart, dodać licznik czasu, poziomy trudności, przycisk „zagraj ponownie”, czy własne obrazki. Bo najlepsze w Scratchu jest to, że kiedy już zrozumiemy, jak coś działa, możemy zacząć tworzyć własne wersje.
Do usłyszenia wkrótce!