1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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>
|
