initial commit

6 files changed, 589 insertions, 0 deletions

diff --git a/files/pl/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/index.html
new file mode 100644
index 0000000000..969badb79d
--- /dev/null
+++ b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/index.html
@@ -0,0 +1,58 @@
+---
+title: Gra Breakout 2D w czystym JavaScript
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
+tags:
+  - 2D
+  - Canvas
+  - Gry
+  - JavaScript
+  - Początkujący
+  - Poradnik
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{Next("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim")}}</p>
+
+<p class="summary">W tym poradniku krok po kroku stworzymy prostą grę <strong>MDN Breakout</strong> napisaną w całości w czystym języku JavaScript oraz renderowaną w elemencie HTML5 {{htmlelement("canvas")}}.</p>
+
+<p>Każdy krok ma edytowalne, dostępne na żywo próbki do gry, dzięki czemu możesz zobaczyć, jak powinny wyglądać poszczególne etapy pośrednie. Nauczysz się podstaw używania elementu {{htmlelement("canvas")}} do implementowania podstawowych mechanik gry jak renderowanie, przesuwanie grafik, wykrywanie kolizji, mechanizmu sterowania oraz stanu wygrania/przegrania.</p>
+
+<p>Aby w pełni wykorzystać tę serię artykułów, powinieneś mieć już podstawową lub średnio zaawansowaną wiedzę z zakresu <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>. Po zakończeniu tego poradnika powinieneś być w stanie budować swoje własne proste gry Webowe.</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="Szczegóły_lekcji">Szczegóły lekcji</h2>
+
+<p>Wszystkie lekcje  — oraz poszczególne wersje gry <a href="http://breakout.enclavegames.com/lesson10.html">MDN Breakout</a> którą wspólnie tworzymy — są <a href="https://github.com/end3r/Canvas-gamedev-workshop">dostępne na GitHubie</a>:</p>
+
+<ol>
+ <li><a href="/pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim">Stwórz element Canvas i rysuj na nim</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">Move the ball</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">Bounce off the walls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">Paddle and keyboard controls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">Game over</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">Build the brick field</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">Collision detection</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">Track the score and win</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">Mouse controls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">Finishing up</a></li>
+</ol>
+
+<p>Zaczynanie od nauki czystego języka JavaScript jest najlepszym sposobem aby uzyskać solidną wiedzę na temat tworzenia gier webowych. Później będziesz mógł wybrać i używać dowolnego frameworka najlepiej pasującego do twoich projektów. Jednak frameworki są tylko narzędziami zbudowanymi z wykorzystaniem języka JavaScript; więc jeśli nawet planujesz pracę z ich wykorzystaniem, dobrze jest nauczyć się najpierw języka, aby później wiedzieć co własciwie dzieje się "pod maską". Frameworki przyspieszają czas tworzenia i zajmują się "nudnymi" częściami podczas pisania gry, jeśli jednak coś nie zadziała zgodnie z oczekiwaniami, zawsze możesz zdebugować lub po prostu samemu napisać własne rozwiązanie korzystając z czystego JavaScript.</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Jeśli chcesz dowiedzieć się więcej na temat tworzenia gier internetowych 2D za pomocą bibliotek zapoznaj się z odpowiednikiem tej serii <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Tę serię artykułów można wykorzystać jako materiał do praktycznych warsztatów poświęconych tworzeniu gier. Możesz także skorzystać z zestawu <a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content</a> opartego na tym samouczku, jeśli chcesz wygłosić wykład nt. tworzenia gier.</p>
+</div>
+
+<h2 id="Następne_kroki">Następne kroki</h2>
+
+<p>Ok zaczynajmy! Przejdź do pierwszego rozdziału — <a href="/pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim">Stwórz element Canvas i rysuj na nim</a>.</p>
+
+<p>{{Next("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Stworz_element_Canvas_i_rysuj_na_nim")}} </p>
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
new file mode 100644
index 0000000000..6a50d3a083
--- /dev/null
+++ b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/odbijanie_od_scian/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
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p>
+
+<div class="summary">
+<p>To jest <strong>3-ci</strong> z 10-ciu kroków poradnika <a href="https://developer.mozilla.org/pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Gra Breakout 2D w czystym JavaScript</a>. Możesz zobaczyć kod źródłowy, który otrzymamy po ukończeniu tej lekcji, na <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html">Gamedev-Canvas-workshop/lesson3.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">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 <a href="/pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/wykrywanie_kolizji">później</a>) aby sprawić, żeby piłka obijałą się od każdej z czterech ścian canvasa.</span></p>
+
+<h2 id="Proste_wykrywanie_kolizji">Proste wykrywanie kolizji</h2>
+
+<p>Aby wykryć kolizję, sprawdzimy, czy nasza piłka dotyka (koliduje) ze ścianą, a jeżeli tak, odpowiednio zmienimy jej kierunek ruchu.</p>
+
+<p>Aby ułatwić sobie obliczenia, zdefiniujmy zmienną o nazwie <code>ballRadius</code> 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:</p>
+
+<pre class="brush: js">var ballRadius = 10;</pre>
+
+<p>Teraz zaktualizujmy linię w funkcji <code>drawBall()</code>, odpowiedzialną za rysowanie naszej piłki, na taką:</p>
+
+<pre class="brush: js">ctx.arc(x, y, ballRadius, 0, Math.PI*2);</pre>
+
+<h3 id="Odbijanie_od_góry_i_od_dołu">Odbijanie od góry i od dołu</h3>
+
+<p>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:</p>
+
+<pre class="brush: js">if(y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>Jeżeli wartość <code>y</code> pozycji piłki jest mniejsza od zera, zmień kierunek ruchu na osi <code>y</code> 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ę.</p>
+
+<p>Powyższy kod ma rozwiąże problem odbicia od górnej krawędzi, więc teraz pomyślmy o krawędzi dolnej:</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height) {
+    dy = -dy;
+}</pre>
+
+<p>Jeżeli pozycja <code>y</code> piłki jest większa od wysokości canvasa, (pamiętaj, że pozycję <code>y</code> 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 <code>y</code> jak zrobiliśmy to poprzednio.</p>
+
+<p>Możemy połączyć te dwie instrukcje w jedną, aby zaoszczędzić na szczegółowości kodu:</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>Jeżeli którykolwiek z warunków będzie równy <code>true</code>, odwróć kierunek ruchu piłki.</p>
+
+<h3 id="Odbijanie_od_lewej_i_prawej">Odbijanie od lewej i prawej</h3>
+
+<p>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 <code>x</code> zamiast <code>y</code>:</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width || x + dx &lt; 0) {
+    dx = -dx;
+}
+
+if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>W tym momencie powinieneś wprowadzić powyższy blok kodu do funkcji <code>draw()</code>, tuż przed zamykającym nawiasem klamrowym.</p>
+
+<h3 id="Piłka_znika_w_ścianie!">Piłka znika w ścianie!</h3>
+
+<p>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:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10432/ball-in-wall.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<p>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:</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width - ballRadius || x + dx &lt; ballRadius) {
+    dx = -dx;
+}
+if(y + dy &gt; canvas.height - ballRadius || y + dy &lt; ballRadius) {
+    dy = -dy;
+}</pre>
+
+<p>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.</p>
+
+<h2 id="Porównaj_swój_kod">Porównaj swój kod</h2>
+
+<p>Sprawdźmy ostateczny kod dla tej części kursu z tym, co otrzymaliśmy oraz pobawmy się trochę:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}</p>
+
+<div class="note">
+<p><strong>Ćwiczenie</strong>: spróbuj zmienić kolor piłki na losowy za każdym razem, kiedy ta uderzy w ścianę.</p>
+</div>
+
+<h2 id="Następne_kroki">Następne kroki</h2>
+
+<p>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 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls">Paletka i sterowanie z klawiatury</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p>
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
new file mode 100644
index 0000000000..3d21b5f72e
--- /dev/null
+++ b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/posusz_pilka/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
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{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")}}</p>
+
+<div class="summary">
+<p>To jest <strong>2-gi</strong> z 10-ciu kroków poradnika <a href="/pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Gra Breakout 2D w czystym JavaScript</a>. Możesz zobaczyć kod źródłowy, który otrzymamy po ukończeniu tej lekcji, na <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html">Gamedev-Canvas-workshop/lesson2.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">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.</span></p>
+
+<h2 id="Definiowanie_pętli_rysowania">Definiowanie pętli rysowania</h2>
+
+<p>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()")}}.</p>
+
+<p>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 <code>draw()</code> będzie wykonywana w środku <code>setInterval</code> co 10 milisekund:</p>
+
+<pre class="brush: js">function draw() {
+    // kod rysowania
+}
+setInterval(draw, 10);</pre>
+
+<p>Dzięki wykorzystaniu <code>setInterval</code>, funkcja <code>draw()</code> 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 <code>draw()</code>:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+</pre>
+
+<p>Wypróbuj swój kod — piłka powinna być przerysowywana przy każdej klatce.</p>
+
+<h2 id="Poruszmy_piłkę">Poruszmy piłkę</h2>
+
+<p>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 <code>x</code> i <code>y</code>, a następnie użyjemy tych zmiennych do zdefiniowania pozycji na której będzie rysowana nasza piłka.</p>
+
+<p>Najpierw dodaj poniższe dwie linie kodu nad twoją funkcją <code>draw()</code> aby zdefiniować <code>x</code> i <code>y</code>:</p>
+
+<pre class="brush: js">var x = canvas.width/2;
+var y = canvas.height-30;
+</pre>
+
+<p>Następnie zmień swoją funkcję <code>draw()</code> tak, aby używała zmiennych <code>x</code> i <code>y</code> w metodzie {{domxref("CanvasRenderingContext2D.arc()","arc()")}} tak, jak zaznaczyliśmy to w poniższej linijce:</p>
+
+<pre class="brush: js; highlight:[3]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+</pre>
+
+<p>Teraz czas na najważniejszą część: po narysowaniu każdej ramki, będziemy dodawać niewielkie wartości do zmiennych <code>x</code> oraz <code>y</code> aby wyglądało na to, że nasza piłka się porusza. Zdefiniujmy te małe wartości jako <code>dx</code> i <code>dy</code> oraz przypiszmy do nich wartości kolejno 2 oraz -2. Dodaj ten kod poniżej definicji zmiennych x i y:</p>
+
+<pre class="brush: js">var dx = 2;
+var dy = -2;
+</pre>
+
+<p>Ostatnią rzeczą do zrobienia jest zaktualizowanie <code>x</code> i <code>y</code> o wartości zmiennych <code>dx</code> i <code>dy</code> 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 <code>draw()</code>:</p>
+
+<pre class="brush: js; highlight:[7,8]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}</pre>
+
+<p>Zapisz ponownie kod i wypróbuj go w przeglądarce. Działa ok, jednak zdaje się, że piłka zostawia za sobą ślad:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10430/ball-trail.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="Czyszczenie_canvas_przed_każdą_ramką">Czyszczenie canvas przed każdą ramką</h2>
+
+<p>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.</p>
+
+<p>Dodaj podświetloną linie do funkcji <code>draw()</code>:</p>
+
+<pre class="brush: js; highlight:[2]">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;
+}
+</pre>
+
+<p>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 <code>x</code> i <code>y</code> po czym ich wartości są aktualizowane.</p>
+
+<h2 id="Oczyszczanie_naszego_kodu">Oczyszczanie naszego kodu</h2>
+
+<p>Do naszej funkcji <code>draw()</code> 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.</p>
+
+<p>Zastąp naszą funkcję <code>draw()</code> poniższymi dwiema funkcjami:</p>
+
+<pre class="brush: js">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;
+}</pre>
+
+<h2 id="Porównaj_swój_kod">Porównaj swój kod</h2>
+
+<p>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:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}</p>
+
+<div class="summary">
+<p>Ćwiczenie: spróbuj zmienić prędkość i kierunek pooruszania się piłki.</p>
+</div>
+
+<h2 id="Następne_kroki">Następne kroki</h2>
+
+<p>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 <a href="/pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/odbijanie_od_scian">odbijała się od ścian</a>.</p>
+
+<p>{{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")}}</p>
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
new file mode 100644
index 0000000000..72e920c9a8
--- /dev/null
+++ b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/stworz_element_canvas_i_rysuj_na_nim/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
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka")}}</p>
+
+<div class="summary">
+<p>To jest <strong>1-wszy</strong> z 10-ciu kroków poradnika <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Możesz zobaczyć kod źródłowy, który otrzymamy po ukończeniu tej lekcji, na <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">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")}}.</span></p>
+
+<h2 id="Struktura_HTML_gry">Struktura HTML gry</h2>
+
+<p>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 <code>index.html</code>, oraz dodaj do niego poniższy fragment kodu:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Gamedev Canvas Workshop&lt;/title&gt;
+    &lt;style&gt;
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;canvas id="myCanvas" width="480" height="320"&gt;&lt;/canvas&gt;
+
+&lt;script&gt;
+	// Tutaj będzie kod JavaScript
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Zdefiniowaliśmy <code>charset</code> , {{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 <code>id</code> z wartością <code>myCanvas</code> 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 <code>&lt;script&gt;</code> a zamykającym <code>&lt;/script&gt;</code></p>
+
+<h2 id="Podstawy_Canvas">Podstawy Canvas</h2>
+
+<p>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 <code>&lt;script&gt;</code>.</p>
+
+<pre class="brush: js">var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");</pre>
+
+<p>Najpierw przypisujemy referencję do elementu {{htmlelement("canvas")}} do zmiennej <code>canvas</code> . Następnie tworzymy zmienną <code>ctx</code> do przechowywania kontekstu renderowania 2D — czyli własciwego narzędzia, którego użyjemy do rysowania na elemencie Canvas.</p>
+
+<p>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 <code>index.html</code> w przeglądarce żeby to sprawdzić.</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>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.</p>
+
+<p>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ę:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>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:</p>
+
+<ul>
+ <li><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Współrzędne </span></font><code>x</code> oraz <code>y</code> środka łuku</li>
+ <li>średnica łuku</li>
+ <li>kąt początkowy oraz kąt końcowy (kąt rozpoczęcia i zakończenia rysowania podany w radianach)</li>
+ <li>kierunek rysowania (domyślna wartość <code>false</code> aby rysować zgodnie z ruchem wskazówek, lub <code>true</code> aby rysować przeciwnie do wskazówek zegara.) This last parameter is optional.</li>
+</ul>
+
+<p>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  <code>rgba()</code>, lub innych z dostępnych metod przypisywania koloru.</p>
+
+<p>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:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();</pre>
+
+<p>Powyższy kod narysuje pusty prostokąd z niebieskim obrysem. Dzięki wykorzystaniu kanału alpha w funkcji  <code>rgba()</code>, niebieski kolor jest półprzezroczysty.</p>
+
+<h2 id="Porównaj_swój_kod">Porównaj swój kod</h2>
+
+<p>Poniżej znajdziesz pełny kod źródłowy pierwszej lekcji z podglądem na żywo:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","395")}}</p>
+
+<div class="note">
+<p><strong>Ćwiczenie</strong>: spróbuj pozmieniać wymiary i kolory poszczególnych figur.</p>
+</div>
+
+<h2 id="Następne_kroki">Następne kroki</h2>
+
+<p>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 <a href="/pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka">Poruszyć piłkę w naszej grze</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/posusz_pilka")}}</p>
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
new file mode 100644
index 0000000000..fea9869173
--- /dev/null
+++ b/files/pl/games/tutorials/2d_breakout_game_pure_javascript/wykrywanie_kolizji/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
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
+
+<div class="summary">
+<p>This is the <strong>7th step</strong> out of 10 of the <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. You can find the source code as it should look after completing this lesson at <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">We have the bricks appearing on the screen already, but the game still isn't <em>that</em> 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.</span></p>
+
+<p>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.</p>
+
+<h2 id="A_collision_detection_function">A collision detection function</h2>
+
+<p>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 <code>b</code> variable for storing the brick object in every loop of the collision detection:</p>
+
+<pre class="brush: js">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculations
+        }
+    }
+}</pre>
+
+<p>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:</p>
+
+<ul>
+ <li>The x position of the ball is greater than the x position of the brick.</li>
+ <li>The x position of the ball is less than the x position of the brick plus its width.</li>
+ <li>The y position of the ball is greater than the y position of the brick.</li>
+ <li>The y position of the ball is less than the y position of the brick plus its height.</li>
+</ul>
+
+<p>Let's write that down in code:</p>
+
+<pre class="brush: js">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}</pre>
+
+<p>Add the above block to your code, below the <code>keyUpHandler()</code> function.</p>
+
+<h2 id="Making_the_bricks_disappear_after_they_are_hit">Making the bricks disappear after they are hit</h2>
+
+<p>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 <code>status</code> property to each brick object. Update the following part of the code as indicated by the highlighted line:</p>
+
+<pre class="brush: js; highlight:[5]">var bricks = [];
+for(var c=0; c&lt;brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r&lt;brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}</pre>
+
+<p>Next we'll check the value of each brick's <code>status</code> property in the <code>drawBricks()</code> function before drawing it — if <code>status</code> is <code>1</code>, then draw it, but if it's <code>0</code>, then it was hit by the ball and we don't want it on the screen anymore. Update your <code>drawBricks()</code> function as follows:</p>
+
+<pre class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14]">function drawBricks() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;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();
+            }
+        }
+    }
+}</pre>
+
+<h2 id="Tracking_and_updating_the_status_in_the_collision_detection_function">Tracking and updating the status in the collision detection function</h2>
+
+<p>Now we need to involve the brick <code>status</code> property in the <code>collisionDetection()</code> function: if the brick is active (its status is <code>1</code>) we will check whether the collision happens; if a collision does occur we'll set the status of the given brick to <code>0</code> so it won't be painted on the screen. Update your <code>collisionDetection()</code> function as indicated below:</p>
+
+<pre class="brush: js; highlight:[5,6,7,8,9,10]">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}</pre>
+
+<h2 id="Activating_our_collision_detection">Activating our collision detection</h2>
+
+<p>The last thing to do is to add a call to the <code>collisionDetection()</code> function to our main <code>draw()</code> function. Add the following line to the <code>draw()</code> function, just below the <code>drawPaddle()</code> call:</p>
+
+<pre class="brush: js">collisionDetection();
+</pre>
+
+<h2 id="Compare_your_code">Compare your code</h2>
+
+<p>The collision detection of the ball is now checked on every frame, with every brick. Now we can destroy bricks! :-</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}</p>
+
+<div class="note">
+<p><strong>Exercise</strong>: change the color of the ball when it hits the brick.</p>
+</div>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>We are definitely getting there now; let's move on! In the eighth chapter we will be looking at how to <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win">Track the score and win</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
diff --git a/files/pl/games/tutorials/index.html b/files/pl/games/tutorials/index.html
new file mode 100644
index 0000000000..8833f364a3
--- /dev/null
+++ b/files/pl/games/tutorials/index.html
@@ -0,0 +1,27 @@
+---
+title: Tutorials
+slug: Games/Tutorials
+tags:
+  - Canvas
+  - Gry
+  - JavaScript
+  - Web
+  - workflow
+translation_of: Games/Tutorials
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>Ta strona zawiera poradniki, które wyróżniają wiele sposobów pracy w celu skutecznego wszelkiego rodzaju gier internetowych.</p>
+
+<dl>
+ <dt><a href="/pl/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Gra Breakout 2D w czystym JavaScript</a></dt>
+ <dd>W tym poradniku krok po kroku stworzysz prosty klon gry Breakout napisany w całości w czystym języku JavaScript. Nauczysz się podstaw używania elementu {{htmlelement("canvas")}} do implementowania podstawowych mechanik gry jak renderowanie, przesuwanie grafik, wykrywanie kolizji, mechanizmu sterowania oraz stanu wygrania/przegrania. </dd>
+ <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a></dt>
+ <dd>In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using the<a class="external external-icon" href="http://phaser.io/">Phaser</a> HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D maze game with device orientation</a></dt>
+ <dd>This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="/en-US/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a href="http://phaser.io/">Phaser</a> framework.</dd>
+ <dt><a href="https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/">2D platform game with Phaser</a></dt>
+ <dd>This tutorial series shows how to create a simple platform game using <a href="http://phaser.io/">Phaser</a>, covering fundamentals such as sprites, collisions, physics, collectables, and more.</dd>
+</dl>