Tekst źródłowy strony Wyścigówka (wersja B)


'''Materiały stworzone w ramach Programu „Mistrzowie Kodowania” finansowanego przez Samsung Electronics Polska'''

== Informacje==
===Cel===

Celem projektu jest stworzenie przez uczniów gry zręcznościowej typu wyścig. W proponowanym projekcie jest to [http://scratch.mit.edu/projects/25909243/ Gra wyścigowa] jednak możliwe jest zastąpienie duszka samochód innymi postaciami, zgodnie z zainteresowaniami uczniów (np.: duszek koń dla miłośników hippiki, duszek rower dla osób zainteresowanych kolarstwem)

==== Cele ogólne: ====
* przypomnienie i utrwalenie poznanych wcześniej poleceń i konstrukcji języka Scratch
* opracowanie projektu gry zręcznościowej
* implementacja projektu w środowisku Scratch

==== Cele szczegółowe ====

* uczeń rozumie i potrafi stosować odpowiednie instrukcje strukturalne
* uczeń potrafi konstruować skrypty i implementować grę w środowisku Scratch

====Zgodność z Podstawą Programową ====
Zajęcia komputerowe. Uczeń:
* posługuje się komputerem w podstawowym zakresie: uruchamia program, korzystając z myszy i klawiatury; 
* wie, jak trzeba korzystać z komputera, żeby nie narażać własnego zdrowia; 
* stosuje się do ograniczeń dotyczących korzystania z komputera.

* Plastyka - perspektywa, pojęcie perspektywy, rodzaje perspektyw
* Geometria - rzutowanie

===Orientacyjny czas realizacji===
Orientacyjny czas realizacji jednej z proponowanych wersji: '''2 x 45 minut'''

===Poziom trudności i proponowane wersje===
* dla klas 1-3 ✪✪✪✰ Wyścigówka [http://scratch.mit.edu/projects/25909243/ Wersja A]
* dla klas 4-6 ✪✪✪✰ Wyścigówka [http://scratch.mit.edu/projects/25488659/ Wersja B]
* dla gimnazjum ✪✪✰✰ Wyścigówka [http://scratch.mit.edu/projects/25955675/ Wersja C]

Gotowe projekty:
* Wersja z grafiką, bez skryptu dostępna jest [http://scratch.mit.edu/projects/25996540/ tutaj]
* Poglądowy projekt [http://scratch.mit.edu/projects/25826861/ Gra wyścigowa] 
*[http://scratch.mit.edu/projects/25827069/ Wersja z rankingiem zwycięstw]
===Orientacyjny czas realizacji===
Orientacyjny czas realizacji jednej z proponowanych wersji: 2x 45minut

==Etapy==
Wprowadzenie teoretyczne do projektowania gry typu “wyścig”, przygotowanie kostiumów duszków “droga” i “samochód”.
==== Wprowadzenie. ====
Czas realizacji 10 minut

Przedstawienie koncepcji projektu stworzenia gry zręcznościowej. Przypomnienie realizowanych na dotychczasowych zajęciach, wcześniejszych modułów dotyczących sterowania postaciami poprzez użycie klawiszy “strzałka lewo/prawo”, “strzałka góra/dół” Rozmowa odnosząca się do doświadczeń uczniów związanych z rodzajami gier typu “wyścig”. Skoncentrowanie się na grach, w których występuje element poruszania bohaterem widocznym “z lotu ptaka” (np.: River Ride, Pro Racing GT, Extreme Rally lub [[https://www.youtube.com/watch?v=T4Gq5NSnvK4 Reckless Racing ]] ).

=====Przygotowanie elementu startowego=====
W rozmowie na temat gier zręcznościowych, warto poruszyć kwestię momentu rozpoczęcia jazdy samochodu. Analogicznie do sytuacji z rzeczywistego toru wyścigowego, pojazdy zwykle stoją na linii startu w gotowości i czekają, na odmierzenie czasu do startu. W proponowanej wersji gry stworzony został zegar, nadający sygnał cały czas. Zegar najlepiej stworzyć w polu  scenie ponieważ będzie on przydatny dla wszystkich duszków. Dodatkowo stworzymy też nadawanie startu, ułatwi nam to w przyszłości stworzenie menu. W rozwinięciu gry, między inicjowaniem programu poprzez kliknięcie w zieloną flagę, a nadaniem sygnału ''start!'' można dodać element wizualny lub dźwiękowy w postaci odliczania (np.: 3, 2, 1...). 

[[Plik:Wa scena skrypt.PNG]]

==== Przygotowanie duszka pojazdu oraz trasy wyścigu. ====
Czas realizacji 20 minut.

'''Uwaga!'''
Jeśli dysponujemy ograniczonym czasem pracy, możemy wykorzystać projekt posiadający gotowe grafiki ( [http://scratch.mit.edu/projects/25996540/ Wyścigówka - podstawy]) lub możemy zaproponować uczniom stworzenie zarysu duszków, które mogą zostać dopracowane graficznie samodzielnie podczas indywidualnej pracy uczniów w domu.
Pierwsze zadanie dotyczy stworzenia podstawowych duszków, tj. pojazdu oraz drogi będącej trasą wyścigu. Kolejność powstawania obu kostiumów nie ma znaczenia, na potrzeby tego skryptu rozpoczniemy od tworzenia duszka “droga”. 

W programie Scratch istnieją dwie opcje rysowania kostiumów: tryb bitmapy oraz tryb rysowania wektorowego. Wybór opcji rysowania w trybie wektorowym umożliwia swobodne przybliżanie i oddalanie obrazka, bez utraty jego jakości. Dodatkowo tryb wektorowy oferuje inny zestaw narzędzi graficznych, niż tryb bitmapy.

===== Tworzenie duszka “Tor Wyścigowy” ===== 
Jedną z możliwości narysowania trasy jest użycie narzędzia “Elipsa”. Po narysowaniu bazowego kształtu używając narzędzia “Przekształć” modyfikujemy trasę wzbogacając ją o zakręty.

[[Plik:Wa torwyscigowy.PNG]]

===== Tworzenie duszka samochodu. ===== 
Przygotowujemy grafikę pojazdu, uwzględniając proporcje duszków "TorWyścigowy" i "Samochód"

[[Plik:Wa samochód.PNG]]

=== Budowanie skryptu sterowania i poruszania się, tworzenie menu gry. ===
Czas realizacji: 15 minut
====Skrypt duszka "Samochód"====
Intuicyjnym jest rozpoczęcie tworzenia skryptu “ruchu” od postaci samochodu. W rozmowie na temat przygotowania takiego skryptu warto ustalić istotne punkty, np.:

*W jaki sposób zapewnić płynność obrotu pojazdu? Aby poruszać się płynnie po krzywiznach drogi korzystnie jest połączyć warunek “jeśli klawisz strzałka w lewo/prawo wciśnięty” z klockiem “obróć o X stopni”.
*Co zrobić aby samochód był stale widoczny na planszy (unikanie sytuacji, w której pojazd “ucieka” poza planszę)? Rozwiązaniem może być osadzenie pojazdu np.: w centralnym punkcie planszy.
*Wówczas należy odpowiedzieć na kolejne pytanie: W jaki sposób uzyskać efekt “jazdy samochodem”, jeśli “osadzimy” pojazd w centralnym punkcie planszy? Rozwiązanie może nasunąć obserwacja konstrukcji gry “rakieta” tj.: nadanie efektu “ruchu” postaci droga, czyli trasie wyścigu.

Aby uniknąć sytuacji w której pojazd “ucieka” poza ekran, '''ustawiamy w zakładce skryptów informację określającą pozycję duszka “samochód” zawsze na środku ekranu.''' Określamy warunek umożliwiający obracanie pojazdem poprzez sterowanie klawiszami “strzałka lewo/prawo”.

[[Plik:Wa skrypt samochod.PNG]]
====Skrypt duszka "Tor Wyścigowy"====

Konsekwencją osadzenia duszka “samochód” w centralnym punkcie ekranu, jest konieczność niestandardowego podejścia do kodowania jego “jazdy”. W proponowanym rozwiązaniu, to nie samochód będzie się poruszał, tylko droga po której jedzie. W tym celu tworzymy skrypt ruchu w zakładce duszka “droga”:

[[Plik:Wa skrypt droga.PNG]]

Uwaga! W ustawieniach stylu obrotu duszka “droga” należy ustawić tryb “nie obracaj”. Wówczas duszek nie reaguje na zmianę kierunku, porusza się zgodnie ze swoim kierunkiem:

[[Plik:Gra wyscigowa skrypt droga.jpg]]

====Przeszkody====
Czas realizacji: 30 minut

Jednym ze sposobów uniemożliwiającym graczom przejechanie z linii startu do mety "na skróty", jest umiejscowienie wewnątrz Toru Wyścigowego naturalnej przeszkody. W prezentowanym projekcie jest to jezioro, przygotowane jako kopia duszka droga oraz wypełnienie środkowej części kolorem niebieskim. Jezioro można upiększyć roślinami i zwierzakami. Aby uniemożliwić pojazdom ucieczkę daleko poza tor wyścigowy, wokół drogi będą do obszary zieleni.

[[Plik:Wa woda.PNG]] [[Plik:Wa obszarzielony.PNG]]

'''Uwaga:'''
Analogicznie do ustawień duszka "TorWyścigowy", w ustawieniach grafiki włączony został styl obrotów w opcji nie obracaj.

Część kodu odpowiedzialna za poruszanie się wody oraz obszaru zieleni, może wyglądać w następujący sposób:

[[Plik:Wa skrypt1.PNG]]

A po dodaniu zderzenie, jeżeli samochód dotknie przeszkody gra zostanie zatrzymana:

[[Plik:Wa skrypt2.PNG]]

'''Uwaga:''' 
Ten sam fragment kodu wprowadzamy w skrypcie obu duszków.

===== Ustawienie zmiennej “prędkość” =====
Dotychczas zrealizowane etapy umożliwiają osiągnięcie efektu poruszania się samochodu po drodze. Aby urozmaicić i rozwinąć grę można wprowadzić:
# zmienną “prędkość”:
#* zastępującą wartość wyrażającą liczbę kroków 
#* umożliwiajacą uzyskanie efektu przyspieszenia (zwiększanie prędkości)
#* ustawioną w opcji “dla wszystkich duszków”
#* wprowadzoną w skrypcie duszka “droga”
# zmienną ”maksymalna prędkość”
#* umożliwiającą kontrolę maksymmalnej prędkości pojazdu
#* ustawioną w opcji “tylko dla tego duszka”
#* określoną jako wartość maksymalna 5.

Na tym etapie skrypt duszka “droga” może wyglądać następująco:

[[Plik:Gra wyscigowa skrypt droga32.jpg]]

==== Tworzenie planszy startowej oraz budowanie menu gry. ====
Czas realizacji 15 minut.

Menu prezentowanej wersji gry zawiera jedynie:

* nazwę gry umieszczoną na scenie;  
* przycisk rozpoczynający grę oraz nadający sygnał ‘Start’; 

===== Plansza startowa (intro)=====

[[Plik:Wyscigowka intro.PNG]]

'''Wskazówka.'''
Uczniowie mogą przygotować własne wersje menu startowego. Prace nad zaawansowaną grafiką można zorganizować również w formie zadania do samodzielnego wykonania po zajęciach.

===== Przycisk “Start” =====
Przycisk “Start” rozpoczynający grę również warto przygotować w trybie wektorowym edytora grafiki programu Scratch. Wówczas zachowa on wyraźne kontury niezależnie od późniejszej modyfikacji wielkości. Podstawowy skrypt przycisku “Start” może wyglądać następująco:

[[Plik:Wyscigowka start.PNG]]

'''Uwaga:''' Jednocześnie należy wprowadzić we wcześniejszych skryptach korektę o ukrycie duszka po kliknięciu w zieloną flagę oraz pojawienie się go wraz z otrzymaniem komunikatu ''Start''.

=== Meta, check point, dodatki do samochodu. ===
Czas realizacji 20 minut

====Cień samochodu====

Grafikę gry może uatrakcyjnić dodanie cienia pod samochodem. W tym celu można zduplikowac duszka ''samochód'' oraz pomalować na czarno. 
Skrypty zastępujemy nowymi, umożliwiającymi poruszanie się duszka ''cień'' razem z duszkiem ''samochód'':

[[Plik:Wyscigowka cien.PNG]]

'''Uwaga:'''
Na tym etapie można uzupełnić skrypty wszystkich duszków o informacje na temat warstwy (np.: duszek '''Tor Wyścigowy''' może zasłaniać duszka '''samochód''' jeśli nie ustalimy odpowiedniej kolejności warstw). W dalszej części prac należy kontrolować sytuację w której potrzebne będzie uzupełnienie tych informacji. Aby ustalić kolejność warstw używamy klocków z bloku [[Plik:Klocek warstwy.png]]

==== Meta i Check Point. ====

Aby wygrać wyścig trzeba dotrzeć do mety pokonując całą trasę. Tworzymy dwa punkty kontrolne (tzw. ''check point'') sprawdzające czy gracz na pewno przejechał przez wyznaczoną trasę. W skrypcie umieszczony został kod, umożliwiający zasygnalizowanie graczowi zaliczenie punktu kontrolnego (zmiana kostiumu na jaśniejszy kolor):

[[Plik:Wyscigowka skrypt checkpoint.PNG]]

Kolejnym etapem jest stworzenie duszka ''meta'', reprezentowanego graficznie jako jasny, prosty odcinek. Duszek mety również w ustawieniach [[styl obrotów]] ma zaznaczoną opcję ''nie obracaj''. Dodatkowo ustalamy, jaka liczba okrążeń gwarantuje wygraną. Tworzymy zmienną ''Okrążenia'', kodujemy w skrypcie warunek wygranej (jeżeli liczba okrążeń równa jest 3) wynikających ze spełnienia warunku przejechania samochodem przez trzykrotnie przez oba punkty kontrolne.

[[Plik:Wyscigowka meta.PNG]]

==== Wygrana! ====
Dodatkowo można stworzyć duszka ''wygrana''

[[Plik:Wyscigowka wygrana2.PNG]]

==== Porażka ====
Do gry można dodać duszka sygnalizującego przegraną, w sytuacji, gdy samochód wjedzie do jeziora. Skrypt takiego napisu ''porażka'' może wyglądać w następujący sposób:

[[Plik:Wyscigowka porazka2.PNG]]