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

'''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: 2x 45minut
===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]


* '''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]

==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, wygrana i przegrana ===
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]]

'''Uwaga:''' w skrypie pojawia się funkcjonalnośc polegająca na przejściu do startu gry, wraz z kliknięciem w duszka Przegrana

==Dodatkowe opcje==
===Dodatkowe opcje Wygrana/Start===
Dotychczasowe kody duszków Wygrana/Start zostają rozwinięte w analogiczny sposób:

[[Plik:Wygrana opcja.JPG]]

===Odliczanie===
Tworzymy duszka ''odliczanie'', który będzie graficzną reprezentacją odliczania przed startem samochodu.

[[Plik:Odliczanie kostiumy.JPG]]

Skrypt duszka odliczanie umożliwia:
* ustawienie duszka w centralnym punkcie planszy
* pojawienie się duszka w chwili rozpoczęcia gry 
* zmianę kostiumów od 5 do hasła ''Go!''
* nadanie sygnału 'Start Gry'
* wyzerowanie czasomierza
'''Uwaga!''' Wprowadzając element odliczania niezbędna jest zmiana nadawania sygnału start w skrypcie sceny (nadawanie TikTak).

[[Plik:Odliczanie1.JPG]]

Dodatkowo skrypt można wzbogacić o efekty wizualne:
* zmianę rozmiaru odliczanych liczb
* efekt 'duch' widoczny jako rozpływanie się duszka [[Plik:Zmien efekt duch.JPG]]

Finałowa wersja skryptu duszka "odliczanie":

[[Plik:Odliczanie.JPG]]

===Efekt nitro===
Nitro jest potoczną nazwą tlenku diazotu (podtlenek azotu,  N<small>2</small>O), nieorganiznego związku chemicznego, stosowany m. in.: 
* w anestezjologii i stomatologii, jako gaz znieczulający (tzw. gaz rozweselający, zwany "Głupim Jasiem") 
* w samolotach typu Messerchmitt, używanych w czasie II Wojny Swiatowej, jako zwiększenie mocy silników tłokowych poprzez wstrzyknięcie podtlenku do komory spalania
* w produkcji spożywczej, jako dodatek do żywności (E942)
* w motoryzacji, ponieważ gaz ten posiada możliwości generowania przyrostów mocy w silniku spalinowym ([https://www.youtube.com/watch?v=taD6P_L8fGc&list=PL3E31C48608A2E1F1 NOS])

W proponowanej wersji gry 'Wyścigówka' dodany zostanie element nitro, mający na celu zwiększanie mocy pojazdu, czyli powodując jego przyspieszenie. Ponieważ użycie w samochodach 'dopalacza' nitro bywa widoczne jako błyski ognia, narysujemy dwa kostiumy duszka nitro:

[[Plik:Nitro.JPG]]

Skrypt nitro uwzględnia:
* pojawienie się efektu nitro wraz z wciśnięciem klawisza spacja
* osadzenie w pozycji [[Plik:Idz do 0 0.JPG]] i kierunku samochodu [[Plik:Ustaw kierunek.JPG]]
* generowanie efektu 'spalania' poprzez pojawienia się klonów duszka nitro wraz z efektem [[Plik:Zmiana efekt duch.JPG]]
* zwięszkanie prędkości [[Plik:Zmimen predkosc.JPG]] wraz z jednoczesnym zmniejszaniem się zapasu nitro w zbiorniku (zmienna nitro)
* (zmienna Los)

[[Plik:Nitro skrypt.JPG]]

==="Ładowanie nitro"===
Dodajemy kolejnego duszka, będącego uzupełnieniem duszka 'nitro'

[[Plik:Ladowanie nitro.JPG]]

'''Uwaga:''' Warto zwrócić uwagę na nazwy kostiumów, zostaną wykorzystane w kodzie odpowiadającym za zmianę kostiumu!

* w chwili rozpoczęcia gry, zbiornik nitro jest pusty (zmienna 'nitro' równa jest 0, graficznie pusty zbiornik reprezentuje kostium ''1'')
* każdorazowo zwolniony klawisz spacja powoduje podniesienie poziomu nitro w zbiorniku, aż będzie pełen (graficznie, reprezentuje to kostium ''5'')
* każdorazowo uruchomiony klawisz spacja, powoduje przyspieszenie samochodu, ale jednocześnie poziom nitro w zbiorniku maleje (zmiany kostiumów od ''5'' do ''1'')

W skrypcie zastosowane zostały następujące kody:
* zmianę kostiumów zamyka kod wykorzystujący nazwy kostiumów wyrażone w liczbach:
[[Plik:Zmiana kostiumu nitro.JPG]]
* zwiększanie poziomu nitro przy zwolnionym klawiszu spacja:
[[Plik:Jezeli nie klawisz spacja wcisniety.JPG]]

Finalnie skrypt duszka "ładowanie nitro" wygląda w następujący sposób:

[[Plik:Nitro pasek.JPG]]