From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- files/pl/games/index.html | 84 ++++++++++++ .../bounce_off_the_walls/index.html | 111 ++++++++++++++++ .../collision_detection/index.html | 128 ++++++++++++++++++ .../create_the_canvas_and_draw_on_it/index.html | 118 +++++++++++++++++ .../move_the_ball/index.html | 147 +++++++++++++++++++++ .../odbijanie_od_scian/index.html | 111 ---------------- .../posusz_pilka/index.html | 147 --------------------- .../index.html | 118 ----------------- .../wykrywanie_kolizji/index.html | 128 ------------------ 9 files changed, 588 insertions(+), 504 deletions(-) create mode 100644 files/pl/games/index.html create mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html create mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html create mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html delete mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/odbijanie_od_scian/index.html delete mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/posusz_pilka/index.html delete mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/stworz_element_canvas_i_rysuj_na_nim/index.html delete mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/wykrywanie_kolizji/index.html (limited to 'files/pl/games') diff --git a/files/pl/games/index.html b/files/pl/games/index.html new file mode 100644 index 0000000000..cd9a3cdb47 --- /dev/null +++ b/files/pl/games/index.html @@ -0,0 +1,84 @@ +--- +title: Tworzenie gier +slug: Gry +translation_of: Games +--- +
{{GamesSidebar}}
+ +
+

Granie w gry od lat należy do naszych najczęstszych aktywności komputerowych. Stale pojawiają się nowe technologie umożliwiające tworzenie lepszych i potężniejszych gier przeglądarkowch.

+
+ +
{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}
+ +
+
+

Twórz gry przeglądarkowe.

+ +

Witaj w strefie rozwoju gier MDN. W tej części strony możesz znaleźć informacje, które pozwolą ci poznać narzędzia i techniki wykorzystywane do produkcji gier przeglądakrowych. 

+ +
+

Notka: Tworzenie gier bazuje na kilku głównych technologiach internetowych takich jak HTML, CSS i JavaScript. Learning Area jest doskonałym miejscem do poznania ich podstaw.

+
+
+ +
+

Przenieś natywne gry do internetu.

+ +

Jeśli jesteś programistą aplikacji natywnych (na przykład tworzysz gry w C++) i zastanawiasz się jak przenieść swoje aplikacje do internetu, powinieneś zapoznać się z narzędziem Emscripten — kompilatorem LLVM do JavaScript, który który kompiluje kod bajtowy do kodu asm.js.

+ +

Na początek sprawdź:

+ + +
+
+ +
+
+

Przykłady

+ +

Zapraszamy do zapoznania się z przykładami. Więcej informacji i przykładów najdziesz na openwebgames.com.

+
+
+ +

+ +

Zobacz również

+ +
+
+
+
Build New Games
+
Kolaboratywna strona z wieloma przykładami tworzenia i rozwoju gier internetowych. Ostatnio niezbyt aktywna, lecz nadal stanowi swietne źródło informacji.
+
Creative JS
+
Kolekcja przydatnych technik i trików z dziedziny JavaScript. Mimo , że nie odnosi się wyłącznie do tworzenia gier internetwoych, jest doskonałbym źródłem wiedzy.
+
Game programming patterns
+
Książka internetowa napisana przez Bob 'a Nystrom'a, w której autor omawia programistyczne wzorce projektowe w oparciu o rozwój gier internetowych.
+
Gamedev.js Weekly
+
Tygodniowy biuletyn na temat tworzenia gier w HTML5, rozsyłany w każdy piątek. Zawiera najnowsze informacje, artykuły i poradniki.
+
HTML5 Game Devs Forum
+
Forum dla programistów zajmujących się rozwojem gier internetowych. 
+
+
+ +
+
+
HTML5 Game Engine
+
Lista najpopularniejszych platform programistycznych do rozwoju gier w HTML5 wraz z opisami, ocenami oraz przykładami. 
+
JSBreakouts
+
Gra Breakout stworzona w oparciu o napopularniejsze platformy programistyczne do tworzenia gier w HTML5 dającea możliwość porównania i wyboru optymalnego narzędzia.
+
Tuts+ Game Development
+
Artykuły i tutoriale dotyczące rozwoju gier.
+
HTML5 Gamedev Starter
+
Lista przydatnych linków do różnego typu źródeł wiedzy na temat gier HTML5.
+
js13kGames
+
Zawody w tworzeniu gier HTML5 o rozmiarze do 13 KB. Na stornie wiele przykładowych gier.
+
Mozilla Hacks blog
+
Strefa gier na Mozilla Hacks blog zawierająca przydatne artykuły.
+
+
+
diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html new file mode 100644 index 0000000000..6a50d3a083 --- /dev/null +++ b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html @@ -0,0 +1,111 @@ +--- +title: Odbijanie od ścian +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/odbijanie_od_scian +tags: + - Animacja + - Canvas + - Grafika + - Gry + - Kurs + - Początkujący + - Przykład + - kolizja + - wykrywanie +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

+ +
+

To jest 3-ci z 10-ciu kroków poradnika Gra Breakout 2D w czystym JavaScript. Możesz zobaczyć kod źródłowy, który otrzymamy po ukończeniu tej lekcji, na Gamedev-Canvas-workshop/lesson3.html.

+
+ +

Widzimy naszą piłkę w ruchu, jednak szybko znika ona poza ekranem gry zanim zdążymy się nią nacieszyć! Aby temu zaradzić, zaimplementujemy bardzo proste wykrywanie kolizji (która szczegółowo zostanie wyjaśniona później) aby sprawić, żeby piłka obijałą się od każdej z czterech ścian canvasa.

+ +

Proste wykrywanie kolizji

+ +

Aby wykryć kolizję, sprawdzimy, czy nasza piłka dotyka (koliduje) ze ścianą, a jeżeli tak, odpowiednio zmienimy jej kierunek ruchu.

+ +

Aby ułatwić sobie obliczenia, zdefiniujmy zmienną o nazwie ballRadius która będzie przechowywała promień rysowanego koła i będzie używana do obliczeń. Dodaj ten fragment do swojego kodu gdzieś poniżej deklaracji poprzednich zmiennych:

+ +
var ballRadius = 10;
+ +

Teraz zaktualizujmy linię w funkcji drawBall(), odpowiedzialną za rysowanie naszej piłki, na taką:

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

Odbijanie od góry i od dołu

+ +

Są cztery ściany od których piłka może się odbijać — na początek skupmy się na górnej. W każdej ramce musimy sprawdzić, czy piłka dotyka górnej krawędzi canvasa — jeżeli tak, zmienimy jej ruch tak, aby zaczęła poruszać się w przeciwnym kierunku i przez to pozostała w widocznych granicach. Pamiętając, iż system współrzędnych zaczyna się od górnego lewego narożnika, możemy zastosować takie rozwiązanie:

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

Jeżeli wartość y pozycji piłki jest mniejsza od zera, zmień kierunek ruchu na osi y ustawiając taką samą wartość, jednak z odwróconym znakiem. Jeżeli piłka porusza się w górę z prędkością 2 pikseli na ramkę, teraz będzie będzie poruszała się "do góry", ale z prędkością  -2 pikseli, co właściwie będzie ruchem do dołu z prędkością 2 pikseli na ramkę.

+ +

Powyższy kod ma rozwiąże problem odbicia od górnej krawędzi, więc teraz pomyślmy o krawędzi dolnej:

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

Jeżeli pozycja y piłki jest większa od wysokości canvasa, (pamiętaj, że pozycję y liczymy od góry, więc krawędź górna znajduje się na pozycji 0, natomiast dolna krawędź na pozycji  320 pikseli, czyli wysokość canvasa), wtedy odbijmy ją od krawędzi zamieniając kierunek ruchu w osi y jak zrobiliśmy to poprzednio.

+ +

Możemy połączyć te dwie instrukcje w jedną, aby zaoszczędzić na szczegółowości kodu:

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

Jeżeli którykolwiek z warunków będzie równy true, odwróć kierunek ruchu piłki.

+ +

Odbijanie od lewej i prawej

+ +

Mamy już obsługę odbicia od krawędzi górnej i dolnej, więc pomyślmy teraz o krawędziach bocznych. Właściwie kod jest bardzo podobny, więc wszystko co musisz zrobić to powtórzyć go dla x zamiast y:

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

W tym momencie powinieneś wprowadzić powyższy blok kodu do funkcji draw(), tuż przed zamykającym nawiasem klamrowym.

+ +

Piłka znika w ścianie!

+ +

Przetestuj swój kod na tym etapie, powinieneś być pod wrażeniem — mamy już piłkę, która odbija się od wszystkich krawędzi canvasa! Mamy jednak kolejny problem  — kiedy piłka uderza w ścianę, delikatnie się w niej "zatapia" przed zmianą kierunku:

+ +

+ +

To dlatego, że liczymy punkt zderzenia ściany oraz środka piłki, podczas, gdy powinniśmy to robić dla jej obwodu. Piłka powinna odbić się w momencie, kiedy tylko dotknie ściany, a nie kiedy jest w połowie "w ścianie", poprawmy zatem trochę nasze warunki odbicia. Zaktualizuj swój ostatnio dodany kod na ten:

+ +
if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

Kiedy odległość pomiędzy środkiem piłki a krawędzią jest dokładnie taka sama, jak promień piłki, zmień kierunek ruchu. Odjęcie wartości średnicy od jednej krawędzi i dodawanie do drugiej da na wrażenie właściwego wykrycia kolizji — piłka odbija się od ścian tak, jak powinna.

+ +

Porównaj swój kod

+ +

Sprawdźmy ostateczny kod dla tej części kursu z tym, co otrzymaliśmy oraz pobawmy się trochę:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

+ +
+

Ćwiczenie: spróbuj zmienić kolor piłki na losowy za każdym razem, kiedy ta uderzy w ścianę.

+
+ +

Następne kroki

+ +

Dotarliśmy do momentu, kiedy nasza piłka zarówno porusza się oraz pozostaje na planszy. W czwartym rozdziale nauczymy się w jaki sposób zaimplementować i kontrolować paletkę — zobacz Paletka i sterowanie z klawiatury.

+ +

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html new file mode 100644 index 0000000000..fea9869173 --- /dev/null +++ b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -0,0 +1,128 @@ +--- +title: Wykrywanie kolizji +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/wykrywanie_kolizji +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

+ +
+

This is the 7th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson7.html.

+
+ +

We have the bricks appearing on the screen already, but the game still isn't that interesting as the ball goes through them. We need to think about adding collision detection so it can bounce off the bricks and break them.

+ +

It's our decision how to implement this, of course, but it can be tough to calculate whether the ball is touching the rectangle or not because there are no helper functions in Canvas for this. For the sake of this tutorial we will do it the easiest way possible. We will check if the center of the ball is colliding with any of the given bricks. This won't give a perfect result every time, and there are much more sophisticated ways to do collision detection, but this will work fine for teaching you the basic concepts.

+ +

A collision detection function

+ +

To kick this all off we want to create a collision detection function that will loop through all the bricks and compare every single brick's position with the ball's coordinates as each frame is drawn. For better readability of the code we will define the b variable for storing the brick object in every loop of the collision detection:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculations
+        }
+    }
+}
+ +

If the center of the ball is inside the coordinates of one of our bricks, we'll change the direction of the ball. For the center of the ball to be inside the brick, all four of the following statements need to be true:

+ + + +

Let's write that down in code:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}
+ +

Add the above block to your code, below the keyUpHandler() function.

+ +

Making the bricks disappear after they are hit

+ +

The above code will work as desired and the ball changes its direction. The problem is that the bricks are staying where they are. We have to figure out a way to get rid of the ones we've already hit with the ball. We can do that by adding an extra parameter to indicate whether we want to paint each brick on the screen or not. In the part of the code where we initialize the bricks, let's add a status property to each brick object. Update the following part of the code as indicated by the highlighted line:

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+ +

Next we'll check the value of each brick's status property in the drawBricks() function before drawing it — if status is 1, then draw it, but if it's 0, then it was hit by the ball and we don't want it on the screen anymore. Update your drawBricks() function as follows:

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+ +

Tracking and updating the status in the collision detection function

+ +

Now we need to involve the brick status property in the collisionDetection() function: if the brick is active (its status is 1) we will check whether the collision happens; if a collision does occur we'll set the status of the given brick to 0 so it won't be painted on the screen. Update your collisionDetection() function as indicated below:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+ +

Activating our collision detection

+ +

The last thing to do is to add a call to the collisionDetection() function to our main draw() function. Add the following line to the draw() function, just below the drawPaddle() call:

+ +
collisionDetection();
+
+ +

Compare your code

+ +

The collision detection of the ball is now checked on every frame, with every brick. Now we can destroy bricks! :-

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}

+ +
+

Exercise: change the color of the ball when it hits the brick.

+
+ +

Next steps

+ +

We are definitely getting there now; let's move on! In the eighth chapter we will be looking at how to Track the score and win.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html new file mode 100644 index 0000000000..72e920c9a8 --- /dev/null +++ b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -0,0 +1,118 @@ +--- +title: Stwórz element Canvas i rysuj na nim +slug: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim +tags: + - 2D + - Canvas + - Gry + - HTML + - JavaScript + - Początkujący + - Poradnik +translation_of: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka")}}

+ +
+

To jest 1-wszy z 10-ciu kroków poradnika Gamedev Canvas tutorial. Możesz zobaczyć kod źródłowy, który otrzymamy po ukończeniu tej lekcji, na Gamedev-Canvas-workshop/lesson1.html.

+
+ +

Zanim zaczniemy pisać funkcjonalność gry, musimy stworzyć podstawową strukturę, w której będziemy renderować grę. Strukturę utworzymy przy wykorzystaniu języka HTML oraz elementu {{htmlelement("canvas")}}.

+ +

Struktura HTML gry

+ +

Struktura dokumentu HTML jest dosyć prosta ze względu na fakt, że całość gry będzie renderowana w elemencie {{htmlelement("canvas")}}. Korzystając ze swojego ulubionego edytora utwórz nowy dokument HTML i zapisz go jako index.html, oraz dodaj do niego poniższy fragment kodu:

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// Tutaj będzie kod JavaScript
+</script>
+
+</body>
+</html>
+
+ +

Zdefiniowaliśmy charset , {{htmlelement("title")}} oraz podstawowy styl CSS w elemencie header. Body zawiera elementy {{htmlelement("canvas")}} oraz {{htmlelement("script")}} — w pierwszym będziemy renderowali naszą grę, natomiast kod JavaScript który będzię tę grę kontrolował znajdzie w drugim. Element {{htmlelement("canvas")}} ma ustawiony parametr id z wartością myCanvas abyśmy mogli w prosty sposób pobrać odniesienie do niego, a jego wymiary ustawiliśmy na 480 pikseli szerokości oraz 360 pikseli wysokości. Cały kod, który napiszemy w tym poradniku, będzie umieszczony pomiędzy otwierającym tagiem <script> a zamykającym </script>

+ +

Podstawy Canvas

+ +

Aby faktycznie móc renderować grafikę w elemencie {{htmlelement("canvas")}}, najpierw musimy pobrać do niego referencję w JavaScript. Dodaj następujący kod tuż pod tagiem otwierającym <script>.

+ +
var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+ +

Najpierw przypisujemy referencję do elementu {{htmlelement("canvas")}} do zmiennej canvas . Następnie tworzymy zmienną ctx do przechowywania kontekstu renderowania 2D — czyli własciwego narzędzia, którego użyjemy do rysowania na elemencie Canvas.

+ +

Zobaczmy przykładowy fragment kodu który narysuje nam czerwony kwadrat. Dodaj poniższy kod pod poprzednimi liniami JavaScript, następnie otwórz swój plik index.html w przeglądarce żeby to sprawdzić.

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();
+ +

Wszystkie instrukcje znajdują się pomiędzy metodami {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} oraz {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Definiujemy prostokąt używając {{domxref("CanvasRenderingContext2D.rect()","rect()")}}: gdzie pierwsze dwie wartości określają współrzędne położenia prostokąta od górnego lewego narożnika, natomiast dwie następne określają jego wysokość i szerokość. W naszym przypadku prostokąt będzie narysowany 20 pikseli od lewej krawędzi oraz 40 pikseli od górnej krawędzi, oraz będzie miał wymiary 50 pikseli szerokości oraz 50 pikseli wysokości, czyli uzyskamy idealny kwadrat. Właściwość {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} przechowuje kolor, który zostanie użyty przez metodę {{domxref("CanvasRenderingContext2D.fill()","fill()")}} aby narysować kwadrat, w naszym przypadku, czerwony.

+ +

Nie jesteśmy ograniczeni tylko do prostokątów  — poniższy fragment kodu narysuje nam zielone koło. Spróbuj dodać go do poprzedniego kodu JavaScript, następnie zapisz plik i odśwież przeglądarkę:

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

Jak widzisz ponownie użyliśmy metod  {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} oraz {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Pomiędzy nimi, najważniejszą częścią powyższego kodu jest metoda {{domxref("CanvasRenderingContext2D.arc()","arc()")}}. Przyjmuje ona sześć parametrów:

+ + + +

Właściwość {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} wygląda inaczej, niż poprzednio. To dlatego, że tak, jak w CSS, kolor może być określony w postaci wartości szeznastkowej, słowa kluczowego określającego kolor, funkcji  rgba(), lub innych z dostępnych metod przypisywania koloru.

+ +

Zamiast używać metody {{domxref("CanvasRenderingContext2D.fill()","fill()")}} króra wypełnia całe figury kolorem, możemy użyć {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} aby tylko pokolorować zewnętrzny obrys. Spróbuj dodać ten fragment do swojego kodu JavaScript:

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

Powyższy kod narysuje pusty prostokąd z niebieskim obrysem. Dzięki wykorzystaniu kanału alpha w funkcji  rgba(), niebieski kolor jest półprzezroczysty.

+ +

Porównaj swój kod

+ +

Poniżej znajdziesz pełny kod źródłowy pierwszej lekcji z podglądem na żywo:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","395")}}

+ +
+

Ćwiczenie: spróbuj pozmieniać wymiary i kolory poszczególnych figur.

+
+ +

Następne kroki

+ +

Mamy już skonfigurowany podstawową strukturę HTML oraz poznaliśmy trochę podstaw o elemencie canvas, przejdźmy teraz do rozdziału drugiego i dowiedzmy się w jaki sposób Poruszyć piłkę w naszej grze.

+ +

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka")}}

diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html new file mode 100644 index 0000000000..3d21b5f72e --- /dev/null +++ b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html @@ -0,0 +1,147 @@ +--- +title: Porusz piłką +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka +tags: + - 2D + - Canvas + - Gry + - JavaScript + - Początkujący + - Poradnik + - Pętla + - ruch +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/odbijanie_od_scian")}}

+ +
+

To jest 2-gi z 10-ciu kroków poradnika Gra Breakout 2D w czystym JavaScript. Możesz zobaczyć kod źródłowy, który otrzymamy po ukończeniu tej lekcji, na Gamedev-Canvas-workshop/lesson2.html.

+
+ +

Z poprzedniej części dowiedziałeś się w jaki sposób narysować piłkę, a teraz ją poruszymy. Z technicznego punktu widzenia, będziemy malować piłkę na ekranie, czyścić ten ekran i malować ją ponownie w nieco innej pozycji w każdej klatce aby uzyskać wrażenie ruchu — dokładnie tak, jak uzyskujemy ruch w filmach.

+ +

Definiowanie pętli rysowania

+ +

Aby stale aktualizować rysunek w każdej klatce, musimy zdefiniować funkcję rysowania, która będzie działała w kółko, za każdym razem z różnym zestawem wartości zmiennych aby zmieniać pozycję sprite'a, itd.  Możesz uruchomiać funkcję w kółko używając wbudowanych w JavaScript funkcji takich, jak  {{domxref("WindowTimers.setInterval()", "setInterval()")}} lub {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

+ +

Usuń cały poprzedni kod JavaScript który miałeś dotychczas w swoim pliku HTML z wyjątkiem pierwszych dwóch linijek oraz dodaj pod nimi poniższy kod. Funkcja draw() będzie wykonywana w środku setInterval co 10 milisekund:

+ +
function draw() {
+    // kod rysowania
+}
+setInterval(draw, 10);
+ +

Dzięki wykorzystaniu setInterval, funkcja draw() będzie wywoływana co 10 milisekund bez przerwy, lub do czasu, kiedy ją zatrzymamy. Narysujmy więc teraz piłkę — dodaj ten kod do swojej funkcji draw():

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

Wypróbuj swój kod — piłka powinna być przerysowywana przy każdej klatce.

+ +

Poruszmy piłkę

+ +

W tym momencie nie będziesz w stanie zauważyć, że piłka stale jest przerysowywana, jako że nie zmienia swojej pozycji. Zmieńmy więc to. Po pierwsze, zamiast wpisanej na stałe pozycji (50,50), ustalmy punkt początkowy w dolnej środkowej części Canvas za pomocą zmiennych o nazwach x i y, a następnie użyjemy tych zmiennych do zdefiniowania pozycji na której będzie rysowana nasza piłka.

+ +

Najpierw dodaj poniższe dwie linie kodu nad twoją funkcją draw() aby zdefiniować x i y:

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

Następnie zmień swoją funkcję draw() tak, aby używała zmiennych x i y w metodzie {{domxref("CanvasRenderingContext2D.arc()","arc()")}} tak, jak zaznaczyliśmy to w poniższej linijce:

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+ +

Teraz czas na najważniejszą część: po narysowaniu każdej ramki, będziemy dodawać niewielkie wartości do zmiennych x oraz y aby wyglądało na to, że nasza piłka się porusza. Zdefiniujmy te małe wartości jako dx i dy oraz przypiszmy do nich wartości kolejno 2 oraz -2. Dodaj ten kod poniżej definicji zmiennych x i y:

+ +
var dx = 2;
+var dy = -2;
+
+ +

Ostatnią rzeczą do zrobienia jest zaktualizowanie x i y o wartości zmiennych dx i dy w każdej ramce, dzięki czemu piłka będzie rysowana w nowej pozycji przy każdym odświeżeniu. Dodaj dwie, poniżej zaznaczone, linie do swojej funkcji draw():

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+ +

Zapisz ponownie kod i wypróbuj go w przeglądarce. Działa ok, jednak zdaje się, że piłka zostawia za sobą ślad:

+ +

+ +

Czyszczenie canvas przed każdą ramką

+ +

Piłka pozostawia ślad, ponieważ za każdym razem rysujemy nowe koło jednak bez usunięcia poprzedniego. Nie martw się, ponieważ dostępna jest metoda do czyszczenia całej zawartości canvas: {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Przekazujemy do niej cztery parametry: pozycję x i y górnego lewego narożnika oraz pozycję x i y dolnego prawego narożnika prostokąta. Cała powierzchnia pokryta przez ten prostokąt zostanie wyczyszczona ze wszystkich wcześniej namalowanych tam elementów.

+ +

Dodaj podświetloną linie do funkcji draw():

+ +
function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+
+ +

Zapisz kod i uruchom go jeszcze raz. Tym razem zobaczysz poruszają się piłkę bez żadnego śladu. Co 10 millisekund canvas jest czyszczony, niebieskie koło (nasza piłka) jest rysowana na podanych współrzędnych x i y po czym ich wartości są aktualizowane.

+ +

Oczyszczanie naszego kodu

+ +

Do naszej funkcji draw() będziemy dodawać coraz więcej i więcej poleceń w następnych krokach, więc dobrze jest utrzymać ją jak najbardziej przejrzystą i czytelną. Zacznijmy więc od przeniesienia kodu odpowiedzialnego za rysowanie piłki do osobnej funkcji.

+ +

Zastąp naszą funkcję draw() poniższymi dwiema funkcjami:

+ +
function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+}
+ +

Porównaj swój kod

+ +

Możesz porównać kod z tego etapu ze swoim kodem w poniższym podglądem na żywo, oraz spróbować pobawić się nim, aby lepiej zrozumieć jak to działa:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}

+ +
+

Ćwiczenie: spróbuj zmienić prędkość i kierunek pooruszania się piłki.

+
+ +

Następne kroki

+ +

Narysowaliśmy naszą piłkę i nadaliśmy jej ruch, jednak znika ona poza krawędzią canvasa. W rozdziale trzecim odkryjemy w jaki sposób spraić, aby odbijała się od ścian.

+ +

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/odbijanie_od_scian")}}

diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/odbijanie_od_scian/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/odbijanie_od_scian/index.html deleted file mode 100644 index 6a50d3a083..0000000000 --- a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/odbijanie_od_scian/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Odbijanie od ścian -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/odbijanie_od_scian -tags: - - Animacja - - Canvas - - Grafika - - Gry - - Kurs - - Początkujący - - Przykład - - kolizja - - wykrywanie -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

- -
-

To jest 3-ci z 10-ciu kroków poradnika Gra Breakout 2D w czystym JavaScript. Możesz zobaczyć kod źródłowy, który otrzymamy po ukończeniu tej lekcji, na Gamedev-Canvas-workshop/lesson3.html.

-
- -

Widzimy naszą piłkę w ruchu, jednak szybko znika ona poza ekranem gry zanim zdążymy się nią nacieszyć! Aby temu zaradzić, zaimplementujemy bardzo proste wykrywanie kolizji (która szczegółowo zostanie wyjaśniona później) aby sprawić, żeby piłka obijałą się od każdej z czterech ścian canvasa.

- -

Proste wykrywanie kolizji

- -

Aby wykryć kolizję, sprawdzimy, czy nasza piłka dotyka (koliduje) ze ścianą, a jeżeli tak, odpowiednio zmienimy jej kierunek ruchu.

- -

Aby ułatwić sobie obliczenia, zdefiniujmy zmienną o nazwie ballRadius która będzie przechowywała promień rysowanego koła i będzie używana do obliczeń. Dodaj ten fragment do swojego kodu gdzieś poniżej deklaracji poprzednich zmiennych:

- -
var ballRadius = 10;
- -

Teraz zaktualizujmy linię w funkcji drawBall(), odpowiedzialną za rysowanie naszej piłki, na taką:

- -
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
- -

Odbijanie od góry i od dołu

- -

Są cztery ściany od których piłka może się odbijać — na początek skupmy się na górnej. W każdej ramce musimy sprawdzić, czy piłka dotyka górnej krawędzi canvasa — jeżeli tak, zmienimy jej ruch tak, aby zaczęła poruszać się w przeciwnym kierunku i przez to pozostała w widocznych granicach. Pamiętając, iż system współrzędnych zaczyna się od górnego lewego narożnika, możemy zastosować takie rozwiązanie:

- -
if(y + dy < 0) {
-    dy = -dy;
-}
- -

Jeżeli wartość y pozycji piłki jest mniejsza od zera, zmień kierunek ruchu na osi y ustawiając taką samą wartość, jednak z odwróconym znakiem. Jeżeli piłka porusza się w górę z prędkością 2 pikseli na ramkę, teraz będzie będzie poruszała się "do góry", ale z prędkością  -2 pikseli, co właściwie będzie ruchem do dołu z prędkością 2 pikseli na ramkę.

- -

Powyższy kod ma rozwiąże problem odbicia od górnej krawędzi, więc teraz pomyślmy o krawędzi dolnej:

- -
if(y + dy > canvas.height) {
-    dy = -dy;
-}
- -

Jeżeli pozycja y piłki jest większa od wysokości canvasa, (pamiętaj, że pozycję y liczymy od góry, więc krawędź górna znajduje się na pozycji 0, natomiast dolna krawędź na pozycji  320 pikseli, czyli wysokość canvasa), wtedy odbijmy ją od krawędzi zamieniając kierunek ruchu w osi y jak zrobiliśmy to poprzednio.

- -

Możemy połączyć te dwie instrukcje w jedną, aby zaoszczędzić na szczegółowości kodu:

- -
if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

Jeżeli którykolwiek z warunków będzie równy true, odwróć kierunek ruchu piłki.

- -

Odbijanie od lewej i prawej

- -

Mamy już obsługę odbicia od krawędzi górnej i dolnej, więc pomyślmy teraz o krawędziach bocznych. Właściwie kod jest bardzo podobny, więc wszystko co musisz zrobić to powtórzyć go dla x zamiast y:

- -
if(x + dx > canvas.width || x + dx < 0) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

W tym momencie powinieneś wprowadzić powyższy blok kodu do funkcji draw(), tuż przed zamykającym nawiasem klamrowym.

- -

Piłka znika w ścianie!

- -

Przetestuj swój kod na tym etapie, powinieneś być pod wrażeniem — mamy już piłkę, która odbija się od wszystkich krawędzi canvasa! Mamy jednak kolejny problem  — kiedy piłka uderza w ścianę, delikatnie się w niej "zatapia" przed zmianą kierunku:

- -

- -

To dlatego, że liczymy punkt zderzenia ściany oraz środka piłki, podczas, gdy powinniśmy to robić dla jej obwodu. Piłka powinna odbić się w momencie, kiedy tylko dotknie ściany, a nie kiedy jest w połowie "w ścianie", poprawmy zatem trochę nasze warunki odbicia. Zaktualizuj swój ostatnio dodany kod na ten:

- -
if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-if(y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

Kiedy odległość pomiędzy środkiem piłki a krawędzią jest dokładnie taka sama, jak promień piłki, zmień kierunek ruchu. Odjęcie wartości średnicy od jednej krawędzi i dodawanie do drugiej da na wrażenie właściwego wykrycia kolizji — piłka odbija się od ścian tak, jak powinna.

- -

Porównaj swój kod

- -

Sprawdźmy ostateczny kod dla tej części kursu z tym, co otrzymaliśmy oraz pobawmy się trochę:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

- -
-

Ćwiczenie: spróbuj zmienić kolor piłki na losowy za każdym razem, kiedy ta uderzy w ścianę.

-
- -

Następne kroki

- -

Dotarliśmy do momentu, kiedy nasza piłka zarówno porusza się oraz pozostaje na planszy. W czwartym rozdziale nauczymy się w jaki sposób zaimplementować i kontrolować paletkę — zobacz Paletka i sterowanie z klawiatury.

- -

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/posusz_pilka/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/posusz_pilka/index.html deleted file mode 100644 index 3d21b5f72e..0000000000 --- a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/posusz_pilka/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Porusz piłką -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka -tags: - - 2D - - Canvas - - Gry - - JavaScript - - Początkujący - - Poradnik - - Pętla - - ruch -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/odbijanie_od_scian")}}

- -
-

To jest 2-gi z 10-ciu kroków poradnika Gra Breakout 2D w czystym JavaScript. Możesz zobaczyć kod źródłowy, który otrzymamy po ukończeniu tej lekcji, na Gamedev-Canvas-workshop/lesson2.html.

-
- -

Z poprzedniej części dowiedziałeś się w jaki sposób narysować piłkę, a teraz ją poruszymy. Z technicznego punktu widzenia, będziemy malować piłkę na ekranie, czyścić ten ekran i malować ją ponownie w nieco innej pozycji w każdej klatce aby uzyskać wrażenie ruchu — dokładnie tak, jak uzyskujemy ruch w filmach.

- -

Definiowanie pętli rysowania

- -

Aby stale aktualizować rysunek w każdej klatce, musimy zdefiniować funkcję rysowania, która będzie działała w kółko, za każdym razem z różnym zestawem wartości zmiennych aby zmieniać pozycję sprite'a, itd.  Możesz uruchomiać funkcję w kółko używając wbudowanych w JavaScript funkcji takich, jak  {{domxref("WindowTimers.setInterval()", "setInterval()")}} lub {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

- -

Usuń cały poprzedni kod JavaScript który miałeś dotychczas w swoim pliku HTML z wyjątkiem pierwszych dwóch linijek oraz dodaj pod nimi poniższy kod. Funkcja draw() będzie wykonywana w środku setInterval co 10 milisekund:

- -
function draw() {
-    // kod rysowania
-}
-setInterval(draw, 10);
- -

Dzięki wykorzystaniu setInterval, funkcja draw() będzie wywoływana co 10 milisekund bez przerwy, lub do czasu, kiedy ją zatrzymamy. Narysujmy więc teraz piłkę — dodaj ten kod do swojej funkcji draw():

- -
ctx.beginPath();
-ctx.arc(50, 50, 10, 0, Math.PI*2);
-ctx.fillStyle = "#0095DD";
-ctx.fill();
-ctx.closePath();
-
- -

Wypróbuj swój kod — piłka powinna być przerysowywana przy każdej klatce.

- -

Poruszmy piłkę

- -

W tym momencie nie będziesz w stanie zauważyć, że piłka stale jest przerysowywana, jako że nie zmienia swojej pozycji. Zmieńmy więc to. Po pierwsze, zamiast wpisanej na stałe pozycji (50,50), ustalmy punkt początkowy w dolnej środkowej części Canvas za pomocą zmiennych o nazwach x i y, a następnie użyjemy tych zmiennych do zdefiniowania pozycji na której będzie rysowana nasza piłka.

- -

Najpierw dodaj poniższe dwie linie kodu nad twoją funkcją draw() aby zdefiniować x i y:

- -
var x = canvas.width/2;
-var y = canvas.height-30;
-
- -

Następnie zmień swoją funkcję draw() tak, aby używała zmiennych x i y w metodzie {{domxref("CanvasRenderingContext2D.arc()","arc()")}} tak, jak zaznaczyliśmy to w poniższej linijce:

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
-
- -

Teraz czas na najważniejszą część: po narysowaniu każdej ramki, będziemy dodawać niewielkie wartości do zmiennych x oraz y aby wyglądało na to, że nasza piłka się porusza. Zdefiniujmy te małe wartości jako dx i dy oraz przypiszmy do nich wartości kolejno 2 oraz -2. Dodaj ten kod poniżej definicji zmiennych x i y:

- -
var dx = 2;
-var dy = -2;
-
- -

Ostatnią rzeczą do zrobienia jest zaktualizowanie x i y o wartości zmiennych dx i dy w każdej ramce, dzięki czemu piłka będzie rysowana w nowej pozycji przy każdym odświeżeniu. Dodaj dwie, poniżej zaznaczone, linie do swojej funkcji draw():

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-    x += dx;
-    y += dy;
-}
- -

Zapisz ponownie kod i wypróbuj go w przeglądarce. Działa ok, jednak zdaje się, że piłka zostawia za sobą ślad:

- -

- -

Czyszczenie canvas przed każdą ramką

- -

Piłka pozostawia ślad, ponieważ za każdym razem rysujemy nowe koło jednak bez usunięcia poprzedniego. Nie martw się, ponieważ dostępna jest metoda do czyszczenia całej zawartości canvas: {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Przekazujemy do niej cztery parametry: pozycję x i y górnego lewego narożnika oraz pozycję x i y dolnego prawego narożnika prostokąta. Cała powierzchnia pokryta przez ten prostokąt zostanie wyczyszczona ze wszystkich wcześniej namalowanych tam elementów.

- -

Dodaj podświetloną linie do funkcji draw():

- -
function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-    x += dx;
-    y += dy;
-}
-
- -

Zapisz kod i uruchom go jeszcze raz. Tym razem zobaczysz poruszają się piłkę bez żadnego śladu. Co 10 millisekund canvas jest czyszczony, niebieskie koło (nasza piłka) jest rysowana na podanych współrzędnych x i y po czym ich wartości są aktualizowane.

- -

Oczyszczanie naszego kodu

- -

Do naszej funkcji draw() będziemy dodawać coraz więcej i więcej poleceń w następnych krokach, więc dobrze jest utrzymać ją jak najbardziej przejrzystą i czytelną. Zacznijmy więc od przeniesienia kodu odpowiedzialnego za rysowanie piłki do osobnej funkcji.

- -

Zastąp naszą funkcję draw() poniższymi dwiema funkcjami:

- -
function drawBall() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
-
-function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    drawBall();
-    x += dx;
-    y += dy;
-}
- -

Porównaj swój kod

- -

Możesz porównać kod z tego etapu ze swoim kodem w poniższym podglądem na żywo, oraz spróbować pobawić się nim, aby lepiej zrozumieć jak to działa:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}

- -
-

Ćwiczenie: spróbuj zmienić prędkość i kierunek pooruszania się piłki.

-
- -

Następne kroki

- -

Narysowaliśmy naszą piłkę i nadaliśmy jej ruch, jednak znika ona poza krawędzią canvasa. W rozdziale trzecim odkryjemy w jaki sposób spraić, aby odbijała się od ścian.

- -

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/odbijanie_od_scian")}}

diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/stworz_element_canvas_i_rysuj_na_nim/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/stworz_element_canvas_i_rysuj_na_nim/index.html deleted file mode 100644 index 72e920c9a8..0000000000 --- a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/stworz_element_canvas_i_rysuj_na_nim/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Stwórz element Canvas i rysuj na nim -slug: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim -tags: - - 2D - - Canvas - - Gry - - HTML - - JavaScript - - Początkujący - - Poradnik -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka")}}

- -
-

To jest 1-wszy z 10-ciu kroków poradnika Gamedev Canvas tutorial. Możesz zobaczyć kod źródłowy, który otrzymamy po ukończeniu tej lekcji, na Gamedev-Canvas-workshop/lesson1.html.

-
- -

Zanim zaczniemy pisać funkcjonalność gry, musimy stworzyć podstawową strukturę, w której będziemy renderować grę. Strukturę utworzymy przy wykorzystaniu języka HTML oraz elementu {{htmlelement("canvas")}}.

- -

Struktura HTML gry

- -

Struktura dokumentu HTML jest dosyć prosta ze względu na fakt, że całość gry będzie renderowana w elemencie {{htmlelement("canvas")}}. Korzystając ze swojego ulubionego edytora utwórz nowy dokument HTML i zapisz go jako index.html, oraz dodaj do niego poniższy fragment kodu:

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Gamedev Canvas Workshop</title>
-    <style>
-    	* { padding: 0; margin: 0; }
-    	canvas { background: #eee; display: block; margin: 0 auto; }
-    </style>
-</head>
-<body>
-
-<canvas id="myCanvas" width="480" height="320"></canvas>
-
-<script>
-	// Tutaj będzie kod JavaScript
-</script>
-
-</body>
-</html>
-
- -

Zdefiniowaliśmy charset , {{htmlelement("title")}} oraz podstawowy styl CSS w elemencie header. Body zawiera elementy {{htmlelement("canvas")}} oraz {{htmlelement("script")}} — w pierwszym będziemy renderowali naszą grę, natomiast kod JavaScript który będzię tę grę kontrolował znajdzie w drugim. Element {{htmlelement("canvas")}} ma ustawiony parametr id z wartością myCanvas abyśmy mogli w prosty sposób pobrać odniesienie do niego, a jego wymiary ustawiliśmy na 480 pikseli szerokości oraz 360 pikseli wysokości. Cały kod, który napiszemy w tym poradniku, będzie umieszczony pomiędzy otwierającym tagiem <script> a zamykającym </script>

- -

Podstawy Canvas

- -

Aby faktycznie móc renderować grafikę w elemencie {{htmlelement("canvas")}}, najpierw musimy pobrać do niego referencję w JavaScript. Dodaj następujący kod tuż pod tagiem otwierającym <script>.

- -
var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
- -

Najpierw przypisujemy referencję do elementu {{htmlelement("canvas")}} do zmiennej canvas . Następnie tworzymy zmienną ctx do przechowywania kontekstu renderowania 2D — czyli własciwego narzędzia, którego użyjemy do rysowania na elemencie Canvas.

- -

Zobaczmy przykładowy fragment kodu który narysuje nam czerwony kwadrat. Dodaj poniższy kod pod poprzednimi liniami JavaScript, następnie otwórz swój plik index.html w przeglądarce żeby to sprawdzić.

- -
ctx.beginPath();
-ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
-ctx.fill();
-ctx.closePath();
- -

Wszystkie instrukcje znajdują się pomiędzy metodami {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} oraz {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Definiujemy prostokąt używając {{domxref("CanvasRenderingContext2D.rect()","rect()")}}: gdzie pierwsze dwie wartości określają współrzędne położenia prostokąta od górnego lewego narożnika, natomiast dwie następne określają jego wysokość i szerokość. W naszym przypadku prostokąt będzie narysowany 20 pikseli od lewej krawędzi oraz 40 pikseli od górnej krawędzi, oraz będzie miał wymiary 50 pikseli szerokości oraz 50 pikseli wysokości, czyli uzyskamy idealny kwadrat. Właściwość {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} przechowuje kolor, który zostanie użyty przez metodę {{domxref("CanvasRenderingContext2D.fill()","fill()")}} aby narysować kwadrat, w naszym przypadku, czerwony.

- -

Nie jesteśmy ograniczeni tylko do prostokątów  — poniższy fragment kodu narysuje nam zielone koło. Spróbuj dodać go do poprzedniego kodu JavaScript, następnie zapisz plik i odśwież przeglądarkę:

- -
ctx.beginPath();
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
-ctx.fillStyle = "green";
-ctx.fill();
-ctx.closePath();
- -

Jak widzisz ponownie użyliśmy metod  {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} oraz {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Pomiędzy nimi, najważniejszą częścią powyższego kodu jest metoda {{domxref("CanvasRenderingContext2D.arc()","arc()")}}. Przyjmuje ona sześć parametrów:

- - - -

Właściwość {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} wygląda inaczej, niż poprzednio. To dlatego, że tak, jak w CSS, kolor może być określony w postaci wartości szeznastkowej, słowa kluczowego określającego kolor, funkcji  rgba(), lub innych z dostępnych metod przypisywania koloru.

- -

Zamiast używać metody {{domxref("CanvasRenderingContext2D.fill()","fill()")}} króra wypełnia całe figury kolorem, możemy użyć {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} aby tylko pokolorować zewnętrzny obrys. Spróbuj dodać ten fragment do swojego kodu JavaScript:

- -
ctx.beginPath();
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
- -

Powyższy kod narysuje pusty prostokąd z niebieskim obrysem. Dzięki wykorzystaniu kanału alpha w funkcji  rgba(), niebieski kolor jest półprzezroczysty.

- -

Porównaj swój kod

- -

Poniżej znajdziesz pełny kod źródłowy pierwszej lekcji z podglądem na żywo:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","395")}}

- -
-

Ćwiczenie: spróbuj pozmieniać wymiary i kolory poszczególnych figur.

-
- -

Następne kroki

- -

Mamy już skonfigurowany podstawową strukturę HTML oraz poznaliśmy trochę podstaw o elemencie canvas, przejdźmy teraz do rozdziału drugiego i dowiedzmy się w jaki sposób Poruszyć piłkę w naszej grze.

- -

{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka")}}

diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/wykrywanie_kolizji/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/wykrywanie_kolizji/index.html deleted file mode 100644 index fea9869173..0000000000 --- a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/wykrywanie_kolizji/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Wykrywanie kolizji -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/wykrywanie_kolizji -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

- -
-

This is the 7th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson7.html.

-
- -

We have the bricks appearing on the screen already, but the game still isn't that interesting as the ball goes through them. We need to think about adding collision detection so it can bounce off the bricks and break them.

- -

It's our decision how to implement this, of course, but it can be tough to calculate whether the ball is touching the rectangle or not because there are no helper functions in Canvas for this. For the sake of this tutorial we will do it the easiest way possible. We will check if the center of the ball is colliding with any of the given bricks. This won't give a perfect result every time, and there are much more sophisticated ways to do collision detection, but this will work fine for teaching you the basic concepts.

- -

A collision detection function

- -

To kick this all off we want to create a collision detection function that will loop through all the bricks and compare every single brick's position with the ball's coordinates as each frame is drawn. For better readability of the code we will define the b variable for storing the brick object in every loop of the collision detection:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            // calculations
-        }
-    }
-}
- -

If the center of the ball is inside the coordinates of one of our bricks, we'll change the direction of the ball. For the center of the ball to be inside the brick, all four of the following statements need to be true:

- - - -

Let's write that down in code:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                dy = -dy;
-            }
-        }
-    }
-}
- -

Add the above block to your code, below the keyUpHandler() function.

- -

Making the bricks disappear after they are hit

- -

The above code will work as desired and the ball changes its direction. The problem is that the bricks are staying where they are. We have to figure out a way to get rid of the ones we've already hit with the ball. We can do that by adding an extra parameter to indicate whether we want to paint each brick on the screen or not. In the part of the code where we initialize the bricks, let's add a status property to each brick object. Update the following part of the code as indicated by the highlighted line:

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0, status: 1 };
-    }
-}
- -

Next we'll check the value of each brick's status property in the drawBricks() function before drawing it — if status is 1, then draw it, but if it's 0, then it was hit by the ball and we don't want it on the screen anymore. Update your drawBricks() function as follows:

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            if(bricks[c][r].status == 1) {
-                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-                bricks[c][r].x = brickX;
-                bricks[c][r].y = brickY;
-                ctx.beginPath();
-                ctx.rect(brickX, brickY, brickWidth, brickHeight);
-                ctx.fillStyle = "#0095DD";
-                ctx.fill();
-                ctx.closePath();
-            }
-        }
-    }
-}
- -

Tracking and updating the status in the collision detection function

- -

Now we need to involve the brick status property in the collisionDetection() function: if the brick is active (its status is 1) we will check whether the collision happens; if a collision does occur we'll set the status of the given brick to 0 so it won't be painted on the screen. Update your collisionDetection() function as indicated below:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                }
-            }
-        }
-    }
-}
- -

Activating our collision detection

- -

The last thing to do is to add a call to the collisionDetection() function to our main draw() function. Add the following line to the draw() function, just below the drawPaddle() call:

- -
collisionDetection();
-
- -

Compare your code

- -

The collision detection of the ball is now checked on every frame, with every brick. Now we can destroy bricks! :-

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}

- -
-

Exercise: change the color of the ball when it hits the brick.

-
- -

Next steps

- -

We are definitely getting there now; let's move on! In the eighth chapter we will be looking at how to Track the score and win.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

-- cgit v1.2.3-54-g00ecf