Wyścigówka (wersja B): Różnice pomiędzy wersjami

Z Wiki Mistrzowie Kodowania
Skocz do: nawigacji, wyszukiwania
(Przeszkody)
(Zaawansowane opcje gry - nitro, przeszkoda, dodatki do samochodu oraz meta i check point.)
Linia 146: Linia 146:
 
[[Plik:Wyscigowka start.PNG]]
 
[[Plik:Wyscigowka start.PNG]]
  
=== Zaawansowane opcje gry - nitro, przeszkoda, dodatki do samochodu oraz meta i check point. ===
+
=== Zaawansowane opcje gry - meta, check point, dodatki do samochodu. ===
====Cień samochodu i światła.====
+
====Cień samochodu====
 +
Czas realizacji 5 minut.
  
 
Grafikę gry może uatrakcyjnić dodanie cienia pod samochodem. W tym celu można zduplikowac duszka ''samochód'' oraz pomalować na czarno.  
 
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'':
 
Skrypty zastępujemy nowymi, umożliwiającymi poruszanie się duszka ''cień'' razem z duszkiem ''samochód'':
  
[[Plik:Wyscigówka cien.jpg]]
+
[[Plik:Wyscigowka cien.PNG]]
  
Dodatkowo można przygotować duszka ''światła''
+
==== Meta i Check Point. ====
  
[[Plik:Wyscigówka swiatla.jpg]]
+
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):
  
Do świateł wykorzystujemy opcję [[zmienna lokalna]], która będzie przechowywała stan świateł (włączone/wyłączone).
+
[[Plik:Wyscigowka skrypt checkpoint.PNG]]
  
[[Plik:Wyscigowka skrypt swiatla.jpg]]
+
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.
  
====Wielka przeszkoda. Jezioro!====
+
[[Plik:Wyscigowka meta.PNG]]
  
Jednym ze sposobów uniemożliwiającym graczom przejechanie z linii startu do mety "na skróty" jest umiejscowienie wewnątrz pętli ''droga'' 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.
+
==== Wygrana! ====
 +
Dodatkowo można stworzyć duszka ''wygrana''
  
[[Plik:Jezioro grafika.jpg]]
+
[[PPlik:Wyscigowka wygrana2.PNG]]
 
+
W ustawieniach grafiki włączony został [[styl obrotów]] w opcji ''nie obracaj''.
+
 
+
[[Plik:Jezioro nie obracaj.jpg]]
+
 
+
Część kodu odpowiedzialna za poruszanie się naszej wody może wyglądać w następujący sposób:
+
 
+
[[Plik:Jezioro skrypt.jpg]]
+
 
+
==== Meta i Check Point. ====
+
 
+
Aby wygrać wyścig trzeba dotrzeć do mety pokonując trasę. Tworzymy duszka ''meta'' oraz tzw. ''check point'' sprawdzające czy gracz na pewno przejechał przez wyznaczoną trasę. W prezentowanej wersji stworzone zostały tylko dwa punkty kontrolne, położone tuż przed metą. W skrypcie umieszczone zostały zmienne: ''okrążenie'' przechowujące ilość pokonanych okrążeń, ''pierwsze_sprawdzenie'' oraz ''drugie_ sprawdzenie'', informujące czy dane punkty kontrolne (check point) zostały zaliczone.
+
 
+
[[Plik:Check point meta1.jpg]]
+
 
+
[[Plik:Check point meta2.jpg]]
+
 
+
Teraz stworzymy metę - reprezentowaną graficznie jako jasny, prosty odcinek. Duszek mety również w ustawieniach [[styl obrotów]] ma zaznaczoną opcję ''nie obracaj''.
+
 
+
[[Plik:Skrypt meta.jpg]]
+
  
 
==== Przegrana ====
 
==== Przegrana ====
Linia 194: Linia 176:
  
 
Innym rozwiązaniem może być wypowiedź kierowcy samochodu np. „O nie! Toniemy! Przegraliśmy!”.
 
Innym rozwiązaniem może być wypowiedź kierowcy samochodu np. „O nie! Toniemy! Przegraliśmy!”.
 
==== Wygrana! Ranking zwycięstw ====
 
Gra jest gotowa. Można ożywić ranking poprzez stworzenie duszka ''wygrana''. Będzie to napis informujący o wygranej, a przy okazji sprawdzający czy nasz znaleźliśmy się na podium. Opcjonalnie cały ranking można wyzerować przypisanym klawiszem.
 
 
[[Plik:Ranking.png]]
 

Wersja z 18:11, 28 sie 2014

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 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

  • dla klas 1-3 ✪✪✪✰ Wyścigówka Wersja A
  • dla klas 4-6 ✪✪✪✰ Wyścigówka Wersja B
  • dla gimnazjum ✪✪✰✰

Gotowe projekty

Wersja z grafiką, bez skryptu dostępna jest tutaj Poglądowy projekt Gra wyścigowa oraz 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 15 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 [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...).

Wa scena skrypt.PNG

Przygotowanie duszka pojazdu oraz trasy wyścigu.

Czas realizacji 30 minut.

Uwaga! Jeśli dysponujemy ograniczonym czasem pracy, możemy wykorzystać projekt posiadający gotowe grafiki ( 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.

Wa torwyscigowy.PNG

Tworzenie duszka samochodu.

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

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”.

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”:

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:

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.

Wa woda.PNG 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:

Wa skrypt1.PNG

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

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ć:

  1. 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”
  2. 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:

Gra wyscigowa skrypt droga32.jpg

Tworzenie planszy startowej oraz budowanie menu gry.

Czas realizacji 20 minut.

Menu prezentowanej wersji gry zawiera jedynie:

  • nazwę gry umieszczoną na scenie;
  • przycisk rozpoczynający grę oraz nadający sygnał ‘Start’;
Plansza startowa (intro)

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:

Wyscigowka start.PNG

Zaawansowane opcje gry - meta, check point, dodatki do samochodu.

Cień samochodu

Czas realizacji 5 minut.

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:

Wyscigowka cien.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):

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.

Wyscigowka meta.PNG

Wygrana!

Dodatkowo można stworzyć duszka wygrana

PPlik:Wyscigowka wygrana2.PNG

Przegrana

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

Duszek przegrana.jpg

Innym rozwiązaniem może być wypowiedź kierowcy samochodu np. „O nie! Toniemy! Przegraliśmy!”.