Układ współrzędnych

Z Wiki Mistrzowie Kodowania
Skocz do: nawigacji, wyszukiwania

Materiały stworzone przez trenerów programu „Mistrzowie Kodowania” finansowanego przez Samsung Electronics Polska, objęte licencją CC BY SA 3.0 PL "Creative Commons Uznanie Autorstwa 3.0 Polska".

aplikacja opisana w scenariuszu: https://scratch.mit.edu/projects/57237834/

Część I


Założenia projektu: Projekt polega na stworzeniu gry edukacyjnej, w której uczeń będzie uczył się odczytywania współrzędnych oraz nazw ćwiartek w układzie współrzędnych.

Opis projektu:

Układ współrzędnych to projekt edukacyjny, w którym użytkownik będzie musiał zaprowadzić bohaterów w odpowiednie miejsca w układzie współrzędnych. Duszki będą podążały za wskaźnikiem myszy. Dwie postacie zapytają gracza, w jakiej ćwiartce układu współrzędnych się znajdują.

Część II

Realizacja

Pracę rozpoczynamy od przygotowania jednego dowolnego duszka (nazwanego w dalszej części opisu - “Informator”) oraz tła z układem współrzędnych (xy-grid), które znajdziemy w bibliotece teł. Tło będziemy musieli edytować, nanosząc punkty w różnych kolorach.

Uw1.PNG

Rys. 1 Przykładowe tło i duszek.


Duszek Informator

Po kliknięciu zielonej flagi duszek Informator przedstawi się i poinformuje o zasadach gry. W tym celu tworzymy skrypt:

Uw2.PNG

Rys. 2 Informacja o zasadach gry.


Po wyjaśnieniu zasad gry nasz bohater znika ze sceny. Wykorzystamy do tego klocki z kategorii Wygląd Uw3.PNG i Uw4.PNG. Następnie na scenie powinna się pokazać kolejna postać. Proponujemy, aby duszki komunikowały się ze sobą za pomocą klocków Uw5.PNG, Uw6.PNG. W klocku “nadaj message1” rozwijamy listę, klikamy “nowy komunikat”, nadajemy mu dowolną nazwę np. “start”.

Przykładowy skrypt:

Uw7.PNG

Rys. 3 Skrypt duszka “Informator”.


Duszek Chrząszcz

Wybieramy kolejnego duszka. Pamiętajmy, aby ukryć go po uruchomieniu programu oraz pokazać, gdy otrzyma komunikat “start”. Na początku postać powinna poinformować gracza, gdzie chciałaby się przemieścić.

Uw8.PNG

Rys. 4 Informacja wstępna duszka “Chrząszcz”.


Proponujemy, aby duszek poruszał się za kursorem myszy, zatem użyjemy klocka Uw9.PNG oraz Uw10.PNG. Dodatkowym elementem, aby uzyskać efekt przemieszczania się postaci, będzie stworzenie dodatkowego kostiumu, a następnie dodanie skryptu odpowiedzialnego za zmianę kostiumu.

Uw11.PNG

Rys. 5 Poruszanie się i zmiana kostiumu duszka “Chrząszcz”.


Następnie dodajemy skrypt, w którym duszek będzie reagował na dotknięcie odpowiedniego miejsca w układzie współrzędnych, czyli punktu (100, -50).

Uw12.PNG

Rys. 6 Reakcja duszka “Chrząszcz” na dotarcie do odpowiedniego miejsca w układzie współrzędnych.


Powyższe puzzle dodajemy do pętli zawsze.

Uw13.PNG

Rys. 7 Skrypty duszka “Chrząszcz” - informacja, przemieszczanie, reakcja na dotarcie do celu.


Kolejnym zadaniem (po dotarciu do celu) będzie zapytanie użytkownika o nazwę ćwiartki, w której znajduje się punkt, używając klocka Uw14.PNG. Musimy również zweryfikować odpowiedź gracza, korzystając z pętli Uw15.PNG. Powinniśmy uwzględnić dwie odpowiedzi użytkownika - numer ćwiartki wpisany cyfrą arabską oraz rzymską, czyli jeżeli “odpowiedź” = 4 lub “odpowiedź” = IV Uw16.PNG. Dołączamy reakcję duszka na możliwe odpowiedzi. Jeśli odpowiedź jest poprawna to np.: duszek pomyśli “Super!”, a w przypadku błędnej np.: poda poprawną odpowiedź. Gotowa pętla powinna wyglądać następująco:

Uw17.PNG

Rys. 8 Pytanie o numer ćwiartki w układzie współrzędnych.


Działanie duszka “Chrząszcz” zostało zakończone. Teraz bohater powinien “poinformować” kolejną postać, że może już pojawić się na scenie. Możemy do tego wykorzystać klocek nadaj komunikat i umieścić go w pętli jeżeli po udzieleniu poprawnej oraz błędnej odpowiedzi.

Ostateczny skrypt dla duszka “Chrząszcz” może wyglądać następująco:

Uw18.PNG

Rys. 9 Skrypty duszka “Chrząszcz”.


Duszek “Motyl”

Kolejnym duszkiem, którego proponujemy dodać, jest postać z biblioteki: “motyl”. Działanie tego bohatera jest analogiczne do poprzedniego duszka, zatem możemy skopiować skrypty Chrząszcza, zmieniając wybrane klocki. Gotowe skrypty duszka Motyl mogą wyglądać w poniższy sposób:

Uw19.PNG

Rys. 10 Skrypty duszka “Motyl”.


Duszek “Nietoperz”

Pierwsze kroki w zaprogramowaniu kolejnego duszka będą analogiczne do poprzednich dwóch postaci. Ukrywamy naszego bohatera po uruchomieniu programu, pokazujemy po otrzymaniu komunikatu “nietoperz”. Ustawiamy go w wybranym miejscu oraz informujemy użytkownika, gdzie ma zaprowadzić naszego duszka.

Uw20.PNG

Rys. 11 Informacja wstępna duszka “Nietoperz”.


Teraz proponujemy, aby “Nietoperz” zapytał użytkownika, do jakiego koloru kropki należy zaprowadzić nietoperza. Układamy również skrypty odpowiedzialne za weryfikację odpowiedzi.

Uw21.PNG

Rys. 12 Pytanie o kolor kropki i weryfikacja odpowiedzi u duszka “Nietoperz”.


Proponujemy, aby duszek “Nietoperz” ruszył do odpowiedniego punktu dopiero wtedy, gdy użytkownik udzieli poprawnej odpowiedzi. W tym celu użyjemy pętli powtarzaj aż, dodając do niej klocki “odpowiedź” = zielonego lub “odpowiedź” = zielony.

Uw22.PNG

Do tak przygotowanej pętli dołączamy skrypty pokazane na rys. 12. Zanim nasz duszek poleci do odpowiedniej kropki, powinien otrzymać komunikat. Nowy komunikat o nazwie np. ruszamy dodajemy do pętli jeżeli, gdy użytkownik poda właściwą odpowiedź.

Uw23.PNG

Rys. 13 Skrypt duszka “Nietoperz” po dołożeniu klocka “nadaj ruszamy”.


Kiedy duszek Nietoperz otrzyma komunikat “ruszamy”, powinien przemieścić się do punktu o współrzędnych (-200, -100). W tym celu możemy wykorzystać klocek Uw24.PNG z kategorii Ruch. Zatrzymujemy program, jeśli duszek dotknie koloru zielonego. Przykładowy skrypt dla duszka Nietoperz:

Uw25.PNG

Rys. 14 Przemieszczanie duszka “Nietoperz” do celu.


Dodatkowym elementem może być dodanie efektu poruszania się postaci, czyli skryptu odpowiadającego za zmianę kostiumu.

Uw26.PNG

Rys. 15 Zmiana kostiumu duszka “Nietoperz”.