Arkanoid: Różnice pomiędzy wersjami

Z Wiki Mistrzowie Kodowania
Skocz do: nawigacji, wyszukiwania
(Piłeczka)
 
(Nie pokazano 35 wersji utworzonych przez 3 użytkowników)
Linia 1: Linia 1:
 
[[Category:Scenariusze Scratch]] [[Category:Mistrzowie Kodowania]]
 
[[Category:Scenariusze Scratch]] [[Category:Mistrzowie Kodowania]]
'''Materiały stworzone w ramach Programu „Mistrzowie Kodowania” finansowanego przez Samsung Electronics Polska'''
+
'''Materiały stworzone przez Fundację Coder Dojo Polska w ramach Programu „Mistrzowie Kodowania” finansowanego przez Samsung Electronics Polska, objęte licencją CC BY 3.0 PL "Creative Commons Uznanie Autorstwa 3.0 Polska".'''
  
 
== Informacje ==
 
== Informacje ==
 
===Cele===
 
===Cele===
Celem projektu jest stworzenie gry zręcznościowej, polegającej na odbijaniu piłeczki tak, aby zbić wszystkie "klocki" na planszy, jednocześnie nie pozwalając piłeczce opaść poniżej "paletki".
+
Celem projektu jest stworzenie gry zręcznościowej, polegającej na odbijaniu piłeczki tak, aby zbić wszystkie "klocki" na planszy, jednocześnie nie pozwalając piłeczce opaść poniżej "paletki". Projekt jest  wersją popularnej gry [//en.wikipedia.org/wiki/Arkanoid "Arkanoid"]
# a
+
# Przypomnienie i utrwalenie poznanych wcześniej poleceń i konstrukcji języka Scratch
# b
+
# Wykorzystanie opcji dostępnej w Bloku [[Plik:Blok dane.png]]
# c
+
# Implementacja gry w środowisku Scratch
  
===Poziom trudności===
+
===Poziom trudności i proponowane wersje ===
Poziom trudności dla klas 4-6 ✪✪✰✰ Działający projekt [//scratch.mit.edu/projects/25323412/ Arkanoid]
+
Poziom trudności dla klas 4-6 ✪✪✰✰ Działający projekt [http://scratch.mit.edu/projects/26836173/ Arkanoid]
  
Poziom trudności dla gimnazjum ✪✰✰✰ - przejdź do [[Arkanoid (wersja B)]] Działający projekt projekt [Maszynka losująca]
+
Poziom trudności dla gimnazjum ✪✰✰✰ - przejdź do [[Arkanoid (wersja B)]] / Działający projekt [http://scratch.mit.edu/projects/26839468/ "Arkanoid wersja B"]
  
== Instrukcje ==
+
===Orientacyjny czas realizacji===
=== Główne problemy postawione przed programistą ===
+
Orientacyjny czas realizacji jednej z proponowanych wersji: 2x 45minut
 +
 
 +
== Etapy==
 +
Główne problemy postawione przed programistą:
 
# Jak zaprogramować sterowanie ruchem paletki?
 
# Jak zaprogramować sterowanie ruchem paletki?
 
# Jak zaprogramować odbijanie się piłeczki?
 
# Jak zaprogramować odbijanie się piłeczki?
Linia 21: Linia 24:
 
# Jak wychwycić moment "przegranej" ?
 
# Jak wychwycić moment "przegranej" ?
  
=== Instrukcja krok po kroku ===
+
=== Duszek - Paletka ===
 
+
==== Paletka ====
+
 
* Pierwszym krokiem implementacji naszej gry jest utworzenie duszka "Paletka" który odpowiedzialny będzie za odbijanie piłeczki.
 
* Pierwszym krokiem implementacji naszej gry jest utworzenie duszka "Paletka" który odpowiedzialny będzie za odbijanie piłeczki.
<center>[[Plik:Button nowy duszek.jpg|wybierz ikonkę nowego duszka]]</center>
+
[[Plik:Button nowy duszek.jpg|wybierz ikonkę nowego duszka]]
  
 
* Po wybraniu "nowy duszek" przy użyciu kreatora duszków rysujemy paletkę (np.: prostokąt)
 
* Po wybraniu "nowy duszek" przy użyciu kreatora duszków rysujemy paletkę (np.: prostokąt)
Linia 31: Linia 32:
 
* Następnie ustawiamy startowe położenie paletki, oraz programujemy sterowanie paletką, tj. ruch w lewo i prawo za pomocą strzałek, odbywajacy się poprzez zmienianie współrzędnej X.  
 
* Następnie ustawiamy startowe położenie paletki, oraz programujemy sterowanie paletką, tj. ruch w lewo i prawo za pomocą strzałek, odbywajacy się poprzez zmienianie współrzędnej X.  
  
<center>[[Plik:Paletka.jpg]]</center>
+
[[Plik:Paletka nowy.JPG]]
  
==== Piłeczka ====
+
=== Duszek - Piłeczka ===
 
* Następnym krokiem jest utworzenie duszka "piłeczka"
 
* Następnym krokiem jest utworzenie duszka "piłeczka"
 
'''Wskazówka ->''' W trybie wektorowym edytora graficznego, do narysowania koła wykorzystujemy narzędzie 'elipsa' jednocześnie trzymając włączony klawisz Shift.  
 
'''Wskazówka ->''' W trybie wektorowym edytora graficznego, do narysowania koła wykorzystujemy narzędzie 'elipsa' jednocześnie trzymając włączony klawisz Shift.  
Linia 39: Linia 40:
 
* Skrypt duszka "Piłeczka" zawiera pozycję "startową" np.: (x: 0 , y: 0), informację na temat kierunku w którym ma się poruszać (spadanie, np.: 190 stopni) oraz prędkość jej poruszania. Dodatkowo ustawiamy odbicie od krawędzi sceny oraz od paletki.
 
* Skrypt duszka "Piłeczka" zawiera pozycję "startową" np.: (x: 0 , y: 0), informację na temat kierunku w którym ma się poruszać (spadanie, np.: 190 stopni) oraz prędkość jej poruszania. Dodatkowo ustawiamy odbicie od krawędzi sceny oraz od paletki.
  
<center>[[Plik:Kulka_pierwszy_krok.jpg]]</center>
+
[[Plik:Kulka_pierwszy_krok.jpg]]
  
* Istotnym atrybutem duszka "piłeczka" jest sposób obrotu. Aby uniknąć sytuacji kiedy środek obrazka nie jest "idealnie po środku" przez co obrót piłeczki powoduje ponowne "zderzenie" z paletką, potrzebujemy wybrać sposób obrotu duszka "wokół własnej osi".
+
'''Uwaga:''' Istotnym atrybutem duszka "piłeczka" jest sposób obrotu. Aby uniknąć sytuacji, w której środek duszka nie znajduje się "idealnie po środku", ustawiamy sposób obrotu duszka w opcji "wokół własnej osi". Uchroni to przed sytuacją, w której piłeczka odbijając się od paletki, wykona obrót powodując tym samym ponowne "zderzenie" z paletką.
  
<center>[[Plik:Obrot.jpg]]</center>
+
[[Plik:Obrot.jpg]]
  
==== Porażka ====
+
=== Porażka - duszek ''pod paletką''===
* Aby zaprogramować sytuację "porażki" potrzebujemy stworzyć kolejnego duszka, który będzie obejmował całą przesteń w której pojawienie się piłeczki będzie oznaczać porażkę.
+
* Jedną z możliwości zaprogramowania sytuacji "porażki" jest stworzenie duszka, który będzie obejmował całą przestrzeń poniżej duszka "paletka". Ten duszek pozostaje bez skryptu, ponieważ kod odpowiadający za nadanie informacji o położeniu piłki poniżej paletki, umieszczony zostanie w skrypcie duszka ''piłka''.
<center>[[Plik:Bottom pasek.jpg]]</center>
+
[[Plik:Bottom pasek.jpg]]
* Po utworzeniu tego duszka dodajemy w skryptach piłeczki zdarzenie dotknięcia duszka "przestrzeni przegrywającej" powodujące zakończenie gry.
+
<center>[[Plik:Pileczka dodaj przegrana.jpg]]</center>
+
  
==== Klocki ====
+
* Po utworzeniu tego duszka dodajemy w skryptach piłeczki zdarzenie dotknięcia duszka "przestrzeni przegrywającej". W prezentowanym projekcie, takie położenie piłki powoduje zakończenie gry.  
1. Ostatnim elementem naszej gry są klocki które będziemy zbijać uderzeniami piłeczki. Analogicznie do paletki tworzymy duszka (kształt oraz kolor dowolne wedle pomysłu programisty). <br />
+
[[Plik:Pileczka dodaj przegrana.jpg]]
2. Aby nie powtarzać tej samej funkcjonalności wiele razy użyjemy kontrolki kopiującej duszki - dzieki temu tylko w jednym miejscu będziemy programować zachowanie klocka.<br />
+
3. Tworzymy więc duszka<br />
+
<center>[[Plik:Listaduszkow duszek1.jpg]]</center><br />
+
  
4. Tak stworzony duszek odpowiadać będzie za tworzenie swoich klonów. * Ukrywamy duszka "rodzica"<br />
+
=== Duszki - Klocki ===
* Ustawiamy startowe miejsce duszka
+
1. Ostatnim elementem gry są klocki, zbijane uderzeniami piłeczki. Analogicznie do wcześniejszych duszków, klocki tworzymy w edytorze graficznym, dowolnie wybierając kształt oraz kolor. <br />
* 5 razy w pętli uruchamiamy instrukcje odpowiedzialne za stworzenie klonu oraz przesunięcie "rodzica" w prawo - aby każdy kolejny klon był przesunięty w prawo względem poprzedniego
+
2. Tworzymy duszka "Cel A"<br />
* Każdy z utworzonych klonów przy pomocy kontrolki ('kiedy zaczynam jako klon') dostaje końcową funkcjonalność klocka. tj:<br /> ♦ Pokaż klocek,<br /> ♦ W momencie zetknięcia się z piłeczką wysyłamy do systemu informację o tym że wystąpiło zdefiniowane przez nas zdarze "hit_on_target"<br />
+
[[Plik:Listaduszkow duszek1.jpg]]
<center>[[Plik:Duszek1 klony.jpg]]</center>
+
  
5. To samo zdarzenie odbieramy w skrypcie pileczki
+
3. Aby nie powtarzać tej samej funkcjonalności wiele razy, poprzez tworzenie wielu identycznych duszków, użyjemy kontrolki kopiującej duszki dostępne w Bloku [[Plik:Sklonuj.png]]. Dzieki temu, tylko w jednym miejscu będziemy programować zachowanie klocka.<br /> Tak stworzony duszek odpowiadać będzie za tworzenie swoich klonów.
 +
* Ustawiamy startowe miejsce duszka
 +
* 6 razy w pętli uruchamiamy instrukcje odpowiedzialne za stworzenie klonu oraz zmianę pozycji "rodzica" tak, aby każdy kolejny klon był przesunięty w prawo względem poprzedniego
 +
* Ukrywamy duszka "rodzica"<br />
 +
[[Plik:Ukryj.JPG]]
  
<center>[[Plik:Koncowa pileczka.jpg]]</center>
+
* Każdy z utworzonych klonów przy pomocy kontrolki ('kiedy zaczynam jako klon') dostaje końcową funkcjonalność klocka. tj:<br /> ♦ Pokaż klocek,<br /> ♦ W momencie zetknięcia się z piłeczką wysyłamy do systemu informację o tym, że wystąpiło zdefiniowane przez nas zdarzenie "uderzenie w cel"<br />
 +
[[Plik:CelAnowy.JPG]]
 +
 
 +
5. To samo zdarzenie odbieramy w skrypcie piłeczki
 +
 
 +
[[Plik:Kulka nowy.JPG]]
  
 
6. Tak zmieniony skrypt piłeczki (odbierającej wiadomość o zdarzeniu zetknięcia piłeczki z klockiem) zapewni nam efekt "odbicia" piłeczki od klocka.
 
6. Tak zmieniony skrypt piłeczki (odbierającej wiadomość o zdarzeniu zetknięcia piłeczki z klockiem) zapewni nam efekt "odbicia" piłeczki od klocka.
  
==== Kolejne klocki ====
+
=== Duszki - Kolejne klocki ===
* Po zaprogramowaniu w ten sposób pierwszego duszka , tworzymy kolejnego - będzie posiadać tą samą funkcjonalność, ale zmienimy mu wygląd - oraz pozycję startową - ten zestaw klocków będzie widniał wiersz wyżej.
+
* Po zaprogramowaniu w ten sposób pierwszego duszka, tworzymy kolejnego ''Cel B'', który będzie posiadać tą samą funkcjonalność, ale inny wygląd oraz pozycję startową.
<center>[[Plik:Duszek2 kloc.jpg]]
+
 
[[Plik:Duszek2 skrpy.jpg]]</center>
+
[[Plik:CelBnowy.JPG]]  
* Oraz kolejnego, który będzie posiadać 2 życia
+
 
<center>[[Plik:Duszek2hp.jpg]]
+
* Następnie tworzymy duszka ''Cel C'', który poza funkcjonalnością, posiadaną przez pozostałe duszki, ma również lokalną zmienną "uderzenie" odpowiedzialną za zbieranie informacji o ilości trafień piłki w cel. Ta opcja pozwala stworzyć klocki, których zbicie wymaga dwukrotnego uderzenia piłeczką (tzw. dwa życia)
[[Plik:Duszek3 skrpy.jpg]]</center>
+
'''Uwaga:''' zmienna "uderzenie" jest widziana tylko dla danego duszka. Ustawienie tej zmiennej jako globalnej, widocznej dla wszystkich duszków, spowodowałoby, że już pierwsze trafienie w klocek z tą zmienną (Cel C) pomniejszałoby wartość ''uderzenie'' dla wszystkich duszków (czyli również dla Cel A i Cel B).
 +
Po każdym uderzeniu kulki zmienna zmniejsza się o jeden. Jeżeli wartość spadnie poniżej 1., uznajemy, że klocek został "zbity" i go ukrywamy. Dodana jest również kontrolka "czekaj, aż nie dotyka kulka", aby od razu po dotknięciu przez kulkę odjąć ''uderzenie'' tylko o 1 i zaczekać, aż kulka się odbije. Jest to konieczne, aby uniknąć sytuacji, w której jedno odbicie pomniejsza wartość zmiennej o więcej niż 1.
  
* Ten duszek poza funkcjonalnością, jakie posiadały duszki poprzednie, ma również lokalną zmienną "hp" (widzianą tylko dla danego duszka - w przypadku gdybyśmy zrobili tą zmienną widoczną dla wszystkich duszków, wtedy już pierwsze trafienie w pierwszy klocek z 2hp pomniejszaloby wartosc hp dla wszystkich duszków). Po każdym uderzeniu kulki hp zmniejsza się o jeden. Jeżeli spadnie poniżej jednego uznajemy, że klocek został "zbity" i go ukrywamy. Dodana jest również kontrolka "czekaj, aż nie dotyka kulka", aby od razu po dotknięciu przez kulke odjąć hp tylko o 1 i zaczekać, aż kulka się odbije - aby jedno odbicie nie pomniejszało od razu całego hp.
+
[[Plik:Cel Cnowy.JPG]]

Aktualna wersja na dzień 12:00, 7 lis 2014

Materiały stworzone przez Fundację Coder Dojo Polska w ramach Programu „Mistrzowie Kodowania” finansowanego przez Samsung Electronics Polska, objęte licencją CC BY 3.0 PL "Creative Commons Uznanie Autorstwa 3.0 Polska".

Informacje

Cele

Celem projektu jest stworzenie gry zręcznościowej, polegającej na odbijaniu piłeczki tak, aby zbić wszystkie "klocki" na planszy, jednocześnie nie pozwalając piłeczce opaść poniżej "paletki". Projekt jest wersją popularnej gry "Arkanoid"

  1. Przypomnienie i utrwalenie poznanych wcześniej poleceń i konstrukcji języka Scratch
  2. Wykorzystanie opcji dostępnej w Bloku Blok dane.png
  3. Implementacja gry w środowisku Scratch

Poziom trudności i proponowane wersje

Poziom trudności dla klas 4-6 ✪✪✰✰ Działający projekt Arkanoid

Poziom trudności dla gimnazjum ✪✰✰✰ - przejdź do Arkanoid (wersja B) / Działający projekt "Arkanoid wersja B"

Orientacyjny czas realizacji

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

Etapy

Główne problemy postawione przed programistą:

  1. Jak zaprogramować sterowanie ruchem paletki?
  2. Jak zaprogramować odbijanie się piłeczki?
  3. Jak możemy edytować "żywotność" poszczególnych klocków?
  4. Jak wychwycić moment "przegranej" ?

Duszek - Paletka

  • Pierwszym krokiem implementacji naszej gry jest utworzenie duszka "Paletka" który odpowiedzialny będzie za odbijanie piłeczki.

wybierz ikonkę nowego duszka

  • Po wybraniu "nowy duszek" przy użyciu kreatora duszków rysujemy paletkę (np.: prostokąt)
  • Następnie ustawiamy startowe położenie paletki, oraz programujemy sterowanie paletką, tj. ruch w lewo i prawo za pomocą strzałek, odbywajacy się poprzez zmienianie współrzędnej X.

Paletka nowy.JPG

Duszek - Piłeczka

  • Następnym krokiem jest utworzenie duszka "piłeczka"

Wskazówka -> W trybie wektorowym edytora graficznego, do narysowania koła wykorzystujemy narzędzie 'elipsa' jednocześnie trzymając włączony klawisz Shift.

  • Skrypt duszka "Piłeczka" zawiera pozycję "startową" np.: (x: 0 , y: 0), informację na temat kierunku w którym ma się poruszać (spadanie, np.: 190 stopni) oraz prędkość jej poruszania. Dodatkowo ustawiamy odbicie od krawędzi sceny oraz od paletki.

Kulka pierwszy krok.jpg

Uwaga: Istotnym atrybutem duszka "piłeczka" jest sposób obrotu. Aby uniknąć sytuacji, w której środek duszka nie znajduje się "idealnie po środku", ustawiamy sposób obrotu duszka w opcji "wokół własnej osi". Uchroni to przed sytuacją, w której piłeczka odbijając się od paletki, wykona obrót powodując tym samym ponowne "zderzenie" z paletką.

Obrot.jpg

Porażka - duszek pod paletką

  • Jedną z możliwości zaprogramowania sytuacji "porażki" jest stworzenie duszka, który będzie obejmował całą przestrzeń poniżej duszka "paletka". Ten duszek pozostaje bez skryptu, ponieważ kod odpowiadający za nadanie informacji o położeniu piłki poniżej paletki, umieszczony zostanie w skrypcie duszka piłka.

Bottom pasek.jpg

  • Po utworzeniu tego duszka dodajemy w skryptach piłeczki zdarzenie dotknięcia duszka "przestrzeni przegrywającej". W prezentowanym projekcie, takie położenie piłki powoduje zakończenie gry.

Pileczka dodaj przegrana.jpg

Duszki - Klocki

1. Ostatnim elementem gry są klocki, zbijane uderzeniami piłeczki. Analogicznie do wcześniejszych duszków, klocki tworzymy w edytorze graficznym, dowolnie wybierając kształt oraz kolor.
2. Tworzymy duszka "Cel A"
Listaduszkow duszek1.jpg

3. Aby nie powtarzać tej samej funkcjonalności wiele razy, poprzez tworzenie wielu identycznych duszków, użyjemy kontrolki kopiującej duszki dostępne w Bloku Sklonuj.png. Dzieki temu, tylko w jednym miejscu będziemy programować zachowanie klocka.
Tak stworzony duszek odpowiadać będzie za tworzenie swoich klonów.

  • Ustawiamy startowe miejsce duszka
  • 6 razy w pętli uruchamiamy instrukcje odpowiedzialne za stworzenie klonu oraz zmianę pozycji "rodzica" tak, aby każdy kolejny klon był przesunięty w prawo względem poprzedniego
  • Ukrywamy duszka "rodzica"

Ukryj.JPG

  • Każdy z utworzonych klonów przy pomocy kontrolki ('kiedy zaczynam jako klon') dostaje końcową funkcjonalność klocka. tj:
    ♦ Pokaż klocek,
    ♦ W momencie zetknięcia się z piłeczką wysyłamy do systemu informację o tym, że wystąpiło zdefiniowane przez nas zdarzenie "uderzenie w cel"

CelAnowy.JPG

5. To samo zdarzenie odbieramy w skrypcie piłeczki

Kulka nowy.JPG

6. Tak zmieniony skrypt piłeczki (odbierającej wiadomość o zdarzeniu zetknięcia piłeczki z klockiem) zapewni nam efekt "odbicia" piłeczki od klocka.

Duszki - Kolejne klocki

  • Po zaprogramowaniu w ten sposób pierwszego duszka, tworzymy kolejnego Cel B, który będzie posiadać tą samą funkcjonalność, ale inny wygląd oraz pozycję startową.

CelBnowy.JPG

  • Następnie tworzymy duszka Cel C, który poza funkcjonalnością, posiadaną przez pozostałe duszki, ma również lokalną zmienną "uderzenie" odpowiedzialną za zbieranie informacji o ilości trafień piłki w cel. Ta opcja pozwala stworzyć klocki, których zbicie wymaga dwukrotnego uderzenia piłeczką (tzw. dwa życia)

Uwaga: zmienna "uderzenie" jest widziana tylko dla danego duszka. Ustawienie tej zmiennej jako globalnej, widocznej dla wszystkich duszków, spowodowałoby, że już pierwsze trafienie w klocek z tą zmienną (Cel C) pomniejszałoby wartość uderzenie dla wszystkich duszków (czyli również dla Cel A i Cel B). Po każdym uderzeniu kulki zmienna zmniejsza się o jeden. Jeżeli wartość spadnie poniżej 1., uznajemy, że klocek został "zbity" i go ukrywamy. Dodana jest również kontrolka "czekaj, aż nie dotyka kulka", aby od razu po dotknięciu przez kulkę odjąć uderzenie tylko o 1 i zaczekać, aż kulka się odbije. Jest to konieczne, aby uniknąć sytuacji, w której jedno odbicie pomniejsza wartość zmiennej o więcej niż 1.

Cel Cnowy.JPG