Pod okiem mentorów - ING Coder Dojo #4

17.12.2020 | Adam Grabara

CoderDojo

Kontynuujemy nasz cykl artykułów o ING Coder Dojo, gdzie przedstawiamy Wam relację naszych mentorów. Dzisiaj poznajcie relację Adama Grabary - Dyrektora Aplikacji Detalicznych w ING Banku Śląskim.

Do udziału w programie namówił mnie Romek Tyszkowski – chyba nasz największy fascynat ING Coder Dojo. Na początku wraz z synem pojawialiśmy się na zajęciach wyłącznie jako uczestnicy. Romek przekonał mnie, abym poszedł krok dalej i został mentorem młodych Ninja. Wspólnie z Romkiem prowadziliśmy zajęcia z programowania robotów. Zdecydowaliśmy się wykorzystać do tego platformę BBC micro:bit.

BBC micro:bit

BBC micro:bit to poręczny, programowalny mikrokomputer, który można wykorzystać na dziesiątki sposobów – począwszy od wyświetlania tekstów, grania muzyczek, przesyłania sobie wiadomości do zaawansowanego sterowania robotami.

Micro:bit posiada następujące fizyczne elementy:

Wyświetlacz/ekran z 25 indywidualnie sterowanych LED
2 przyciski A i B
Złącze rozszerzeń
Czujnik światła i termperatury
Czujnik ruchu (przyspieszenia oraz kompas)
Komunikację bezprzewodową – przez radio i Bluetooth
Interfejs USB do podłączenia do komputera

Pora do kodu

MakeCode Editor ułatwia programowanie dzięki zastosowaniu techniki chwyć-i-upuść (drag-and-drop) bloczków przypominających te z języka Scratch. Sam program tworzony jest w JavaScript.

Jednym z pierwszych ćwiczeń jest programowanie kostki do gry. Cała zabawa polega na wykorzystaniu akceleratora (reakcja na potrząsanie on shake) i generatora liczb pseudolosowych Math.randomRange.

oraz kombinacji IF oraz wyświetlania poszczególnych losowanych ścian kostki do gry.

Kod źródłowy możecie podejrzeć tutaj. Zaletą micro:bita jest to, że możecie odpalić sobie ten sam kod na symulatorze. Pokazany wyżej program możecie edytować jak i uruchomić pod tym linkiem.

To jedno z najprostszych ćwiczeń, które pokazuje, że praktycznie w 10 minut można oprogramować fizyczny komputer – w interaktywny sposób. Dokładając do tego krótkie „story”, jak to przychodzą koledzy i koleżanki na domówkę i chcą zagrać w planszówkę, a tu nie ma kostki... I wtedy wkraczam ja, cały na biało... Pięć minutek i kostka oprogramowana... I to w jakim wydaniu ;)

Korzystając z komunikacji radiowej – możemy stworzyć kostkę działającą na odległość. Na początku wybieramy kanał (coś jak bezprzewodową linię telefoniczną) którym będziemy przesyłać wiadomości:

Obydwa Micro:bit muszą mieć tę samą grupę. Potem wystarczy w wysyłającym egzemplarzu skorzystać z funkcji:

Wysyłając wylosowaną liczbę, a na drugim, odbierającym wiadomość skorzystać z funkcji:

Bloczek ten czeka aż ktoś przyśle do nas liczbę – i wtedy wystarczy ją zaprezentować w dowolny sposób. Czyli mamy dwa Micro:bit – jednym potrząsamy, a wynik otrzymujemy na drugim – poprzez „radio”.

Papier, kamień, nożyce

Pierwsza prawdziwa i interaktywna gra... Jak już potrafimy przesyłać przez radio, wyświetlać różne wzorki i obsługiwać przyciski, to czas na coś poważniejszego. Po naciśnięciu przycisku A – na jednym z Micro:bit wybieramy jakim przedmiotem chcemy zagrać:

Przy założeniu, że 1 to papier, 2 to nożyce a 3 to kamień, dodajemy odpowiednią reprezentację przedmiotów. Przyciskiem B – wysyłamy wybrany numer przedmiotu do naszego adwersarza:

A na drugim Micro:bit w funkcji oczekującej na przesłany numer dzieje się cała magia gry:

Po odebraniu numerka przedmiotu – porównujemy go z wybranym przez nas. Jeśli są równe – jest remis, ale jeśli ja wybrałem papier (1) a przeciwnik kamień (3) – ja wygrywam wyświetlam wykrzyknik po lewej stronie. Jeśli jednak wybrałem papier (1) a przeciwnik nożyce (2) – przegrywam – i pokazuję wykrzyknij z prawej strony. Sam projekt mozecie zobaczyć tutaj, a pobawić się wirtualnie tu.

Zdalne zajęcia

Ponieważ zaczęła się pandemia i lockdown, musiałem zastanowić się nad nową formą zajęć – tym razem zdalnych i dopasować się do możliwości. Nie mogłem rozdystrybuować sprzętu naszym Ninja, zdecydowałem więc skorzystać z symulatora micro:bit, który na platformie działa wystarczająco – posiada większość potrzebnych funkcji. No, może poza kilkoma, których brak mocno przeszkadza – jak na przykład komunikacja z innym micro:bit. W każdym razie zaczęliśmy zajęcia na platformie Google Meet. Działa całkiem OK, ale z pewnością jest to wyzwanie :) Kolejne zajęcia to różne „wymyślane” i inspirowane Internetem zabawy z programowaniem.

Spadające kamyki

Pierwsza gra – trochę inspirowana Flappy Bird... Polega na unikaniu spadających z góry kamyków. Poruszamy się przyciskami A i B odpowiednio w lewo i prawo. Od czasu do czasu pojawia się spadające „drzewo” – w którym jest wąski przesmyk i właśnie przez niego trzeba się przecisnąć.

Pierwszy raz zaczęliśmy używać „duszków” (Sprite) oraz tablic. Nie było to proste. Czym jest sprite? To graficzny obiekt, który posiada dodatkowe właściwości. Jest bardzo pomocny w programowaniu gier. Ponieważ jest umieszony na ekranie – posiada współrzędne: x oraz y.

Ekran micro:bit w lewym górnym rogu – ma współrzędne (0,0), w prawym dolnym (4,4). Trzeba było zrozumieć dlaczego komputery zaczynają liczyć od zera :) Niby ekran ma 5 na 5 pikseli, a liczy się od 0 do 4... Dziwne...

Dodatkowo Sprite posiada:

jasność (brightness) – czyli może świecić blado lub bardzo jasno.
migotanie (blink) – z jaką częstotliwością ma migać
ma jeszcze kierunek poruszania się (direction), ale nie korzystamy z niego.

Oprócz duszków zaczęliśmy korzystać z tablic (lub połączenia tablicy, listy i sterty). To obiekt, dzięki któremu możemy przechowywać więcej informacji lub innych obiektów w uporządkowanej formie.

Pustą tablicę tworzy się przy pomocy:

Chociaż można od razu tworzyć tablice zawierające np. liczby lub litery:

My postanowiliśmy wykorzystać tablicę kamyki do przechowywania „duszków” – graficznych obiektów symbolizujących spadające kamienie. Skoro można tworzyć puste tablice – musi być możliwość wkładania do nich czegoś. Do tego służy:

Która dodaje „coś” na samym końcu tablicy (listy). Podobnie jak w wysokopoziomowych językach programowania można wcisnąć się przed kolejkę na sam początek, wkładać elementy w inne miejsca tablicy (insert at) lub usuwać (remove) czy też odczytać zawartość tablicy na konkretnej pozycji.

Na początku gry tworzymy pierwszego duszka – będzie to ptaszek i ustawiamy go na pozycji (2,4), czyli w środku na samym dole ekranu. Aby można rozpoznać, że to nasz ptaszek, którym poruszamy – dajemy mu niezbyt wysoką jasność (100) oraz migotanie (300).

Po naciśnięciu przycisków – przesuwamy ptaszka w lewo lub prawo – wystarczy zmienić właściwości „duszka” - współrzędną x. Co ważne, program sam pilnuje aby „duszek” nie opuścił ekranu.

Podczas gry – tworzymy spadające kamienie. Każdy z nich („duszek” – create sprite) ma losową pozycję w poziomie – na samej górze ekranu (współrzędna x ustawiana przy pomocy pick random od 0 do 4) . Duszek wkładany jest do tablicy „kamyki” – na sam koniec.

Spadanie kamyków obsługujemy – przeszukując tablicę „kamyki” i dla każdego znalezionego w niej duszka - zmieniamy współrzędną y. Powoduje to przesunięcie się wszystkich utworzonych kamyków w dół ekranu.

Teraz trzeba sprawdzić, czy kamyki nie wypadają już z dołu ekranu. To trudniejsza sprawa. Musimy najpierw sprawdzić, czy w tablicy z kamykami jest „coś” – inaczej program zgłosi nam błąd. Najprościej sprawdzić czy rozmiar tablicy jest większy od 0. Dodatkowo dla pierwszego w kolejności kamyka sprawdzamy czy nie spadł już na dół ekranu (czy współrzędna y ma wartość 4) – jeśli tak jest – kasujemy go (znika z ekranu) – przy pomocy delete (usuwa duszka) oraz remove value at 0 (usuwa obiekt z tablicy – przekazując go jako wynik).

Od czasu do czasu tworzymy „drzewo” składające się z 4 kamyków. Najpierw losujemy w którym miejscy będzie przesmyk (dziura), a potem w pętli od 0 do 4 (w sumie 5 razy) tworzymy nowe kamyki – pomijając oczywiście ten, gdzie powinna być wylosowana dziura.

Pozostaje już tylko sprawdzić, czy udało nam się uniknąć zderzenia z kamykami (pojedynczymi lub tworzącymi „drzewo”). Robimy to sprawdzając czy współrzędne któregokolwiek z kamyków w tablicy są takie same jak współrzędne naszego ptaszka. Oznacza to, że kamyk w nas uderzył.

Kod znajdziecie tutaj a symulację odpalicie tu.

Podsumowanie

Micro:bit daje mnóstwo możliwości dla małych i dużych. Udało nam się napisać klasycznego węża, grę inspirowaną Space Invaders, statki, sterowanie serwomechanizmem czy światłami dla pieszych :) Kolejne zajęcia postanowiliśmy poświęcić już na programowanie w JavaScript – uczyliśmy się przy pomocy algorytmów sortowania bąbelkowego i przez wybieranie. Ale to już osobna historia ;)