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