initial commit

27 files changed, 2727 insertions, 0 deletions

diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
new file mode 100644
index 0000000000..1e5796777e
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
@@ -0,0 +1,109 @@
+---
+title: Отскок от стен
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
+tags:
+  - Анимация
+  - Графика
+  - Игры
+  - Начинающим
+  - Обучение
+  - Примеры
+  - столкновения
+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/Переместить_мяч", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p>
+
+<div class="summary">
+<p>Это 3-й этап из 10  <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код как он должен выглядеть после завершения этого урока в <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html">Gamedev-Canvas-workshop/lesson3.html</a>.</p>
+</div>
+
+<p>Приятно наблюдать за нашим мяч, но он быстро исчезает с экрана, удовольствие длится недолго! Чтобы продлить, мы реализуем некоторое очень простое обнаружение столкновений (о которых будет рассказано <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">далее</a> более подробно), чтобы сделать отскок мяча от четырех краев холста.</p>
+
+<h2 id="Простое_обнаружение_столкновений">Простое обнаружение столкновений</h2>
+
+<p>Для обнаружения столкновения мы будем проверять -  касается ли мяч стены, и если это так, изменим направление его движения в нужную сторону.</p>
+
+<p>Чтобы сделать расчеты проще, давайте определим переменную <code>ballRadius</code>, что задаст радиус нарисованного круга и будет использоваться для вычислений. Добавьте это в ваш код, где-то ниже существующих переменных:</p>
+
+<pre class="brush: js">var ballRadius = 10;</pre>
+
+<p>Теперь обновите строку, которая рисует шарик, внутри функции <code>drawBall() </code>:</p>
+
+<pre class="brush: js">ctx.arc(x, y, ballRadius, 0, Math.PI*2);</pre>
+
+<h3 id="Отскакивание_от_верхней_и_нижней_стены">Отскакивание от верхней и нижней стены</h3>
+
+<p>Есть четыре стены, от которых мяч будет отскакивать — давайте сначала сосредоточимся на верхней. При каждом кадре нужно проверять, коснулся ли мяч верхней границы — если да, то будет обратное движение мяча, поэтому он начнет двигаться в противоположном направлении и остановится в пределах видимой границы. Вспомнив, что система координат начинается с левого верхнего угла, мы можем придумать что-то вроде этого:</p>
+
+<pre class="brush: js">if(y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>Если значение <code>y</code> положения шара ниже нуля, изменить направление движения по оси <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">y</span></font> установив его с тем же значением но с другим знаком. Если мяч движется вверх со скоростью 2 пикселя на кадр, теперь он будет двигаться "вверх" со скоростью -2 пикселя, что на самом деле означает движение вниз со скоростью 2 пикселя.</p>
+
+<p>Приведенный выше код описывает отражение только от верхней границы, так что теперь давайте думать о нижнем крае:</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height) {
+    dy = -dy;
+}</pre>
+
+<p>Если положение мяча по оси <code>y</code> больше, чем высота полотна (помните, что мы рассчитываем значения <code>y</code> от верхнего левого, чтобы верхний край начинался с 0, а нижний край — 480 пикселей, высота нашего <code>&lt;canvas&gt;</code>), затем после отскока от нижней кромки обратное движение по оси <code>y</code>.</p>
+
+<p>Мы можем объединить эти две конструкции в одну, чтобы уменьшить код:</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>Если одно из двух утверждений верно, тогда направление мяча меняется.</p>
+
+<h3 id="Отскоки_влево_и_вправо">Отскоки влево и вправо</h3>
+
+<p>Мы сделали отражение от верхней и нижней границ, нельзя забывать и про боковины. Задача очень похожа на самом деле, все, что вам нужно сделать, это повторить конструкцию заменив Y на X:</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>На этом этапе вы должны вставить этот блок кода в функцию Draw (), непосредственно перед закрывающей фигурной скобкой.</p>
+
+<h3 id="Мяч_продолжает_исчезать_в_стене!">Мяч продолжает исчезать в стене!</h3>
+
+<p>Проверьте сейчас свой код, и вы будете впечатлены — теперь мяч, отскакивает от всех четерёх краёв нашего <code>&lt;canvas&gt;</code>!  Однако есть некоторая проблема - когда мяч попадает в любую стену, он немного заходит за границы <code>&lt;canvas&gt;</code> перед отскоком:</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>Это происходит потому, что мы проверяем касание стены и центра мяча, а не его края. Мяч должен отскакивать сразу после касания, а не когда он уже на половину в стене, так что давайте корректировать наш код включив в него небольшое выражение. Обновите последний код добавив к нему:</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>Когда расстояние между центром шара и краем стены равно радиусу шарика, шарик изменит направление движения. Вычитая радиус при отскоке от одной стены и добавляя при отскоке от другой, мы получили простое обнаружение столкновений. Шарик отскакивает от стен как надо.</p>
+
+<h2 id="Сравните_ваш_код">Сравните ваш код</h2>
+
+<p>Давайте еще раз провериим готовый код для этой части, и код, что у вас есть, и играйте:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}</p>
+
+<div class="note">
+<p><strong>Упражнение: </strong>попробуйте изменить цвет шарика на случайный цвет каждый раз, когда он попадает в стену.</p>
+</div>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Теперь мы добрались до стадии, где наш мяч одновременно двигается и остаётся на игровом поле. В четвертой главе мы рассмотрим реализацию управления — см. <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls">Paddle and keyboard controls</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p>
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html
new file mode 100644
index 0000000000..bb944fae5d
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html
@@ -0,0 +1,95 @@
+---
+title: Game over
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over
+tags:
+  - Canvas
+  - JavaScript
+  - game over
+  - Начинающий
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаем_зону_кирпичей")}}</p>
+
+<div class="summary">
+<p>Это - 5-й шаг из 10 из <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код к этому уроку в <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html">Gamedev-Canvas-workshop/lesson5.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Конечно интересно наблюдать за отражающимся мячом  и двигать биту, но кроме этого игра ничего не делает и не имеет никакого прогресса или конечной цели. Было бы хорошо с точки зрения геймплея иметь возможность проигрыша. Логика проигрыша в потере мяча. Если вы пропустите мяч и дадите ему добраться до нижнего края экрана, то на этом игра закончится.</span></p>
+
+<h2 id="Реализация_окончания_игры">Реализация окончания игры</h2>
+
+<p>Давайте попытаемся реализовать "Конец Игры" в нашей игре. Вот часть кода от третьего урока, где мы заставили шар отталкиваться от стен:</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>Вместо того, чтобы позволить шару отталкиваться от всех четырех стен, давайте позволим отталкиваться только от трех стен — левую, верхнюю и правую. Удар об нижнюю стенку закончит игру. Мы отредактируем второй блок if, таким образом, что if else вызовит "Конец Игры" , когда шар столкнется  с нижней стенкой холста. Сохраните документ, взгляните на выводящееся сообщение перезагрузите игру путем презагрузки страницы.</p>
+
+<p>Во-первых, измените код, где вы изначально вызывали <code>setInterval()</code></p>
+
+
+
+<pre><code>setInterval(draw, 10);</code>
+</pre>
+
+<p>на следующий:</p>
+
+<pre><code>var interval = setInterval(draw, 10);</code>
+</pre>
+
+
+
+<p>Затем замените второй оператор if следующим:</p>
+
+<pre class="brush: js">if(y + dy &lt; ballRadius) {
+    dy = -dy;
+} else if(y + dy &gt; canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+    clearInterval(interval); // Needed for Chrome to end game
+}</pre>
+
+
+
+<h2 id="Отбить_шар">Отбить шар</h2>
+
+<p>Последняя вещь, которую нyжно сделать на этом уроке состоит в том, чтобы создать некоторое обнаружение столкновений между шаром и битой, таким образом, шар оттолкнется от биты и возвратиться в область игры. Самая простая вещь состоит в том, чтобы проверить, является ли центр шара между левыми и правыми краями биты. Обновите последний бит кода, который Вы изменили:</p>
+
+<pre class="brush: js">if(y + dy &lt; ballRadius) {
+    dy = -dy;
+} else if(y + dy &gt; canvas.height-ballRadius) {
+    if(x &gt; paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+    }
+}</pre>
+
+<p>Если мяч направляется к нижнему краю Canvas, мы должны проверить, касается ли он биты. Если да, то шар возвращается прочь точно так же, как Вы ожидали бы; если не тогда игра заканчивется.</p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вот рабочий код для Вас, чтобы сравнить Ваш с:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/L61c9y50/","","395")}}</p>
+
+<div class="note">
+<p><strong>Упражнение: заставить мяч двигаться быстрее, когда он попадает в биту.</strong></p>
+</div>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>Все идет хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все еще не хватает чего-то. Перейдем к шестой главе — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Build_the_brick_field">Build the brick field</a> — и создадим некоторые кирпичи для шара, чтобы их уничтожить.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}</p>
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.html
new file mode 100644
index 0000000000..2a30bbadb5
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.html
@@ -0,0 +1,59 @@
+---
+title: 2D игра на чистом JavaScript
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
+tags:
+  - 2D
+  - Canvas
+  - JavaScript
+  - TopicStub
+  - Игры
+  - Начинающий
+  - Руководство
+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/Создание_Canvas_и_рисование_на_нём")}}</p>
+
+<p class="summary">В этом пошаговом руководстве мы создадим простую игру <strong>MDN Breakout,</strong> написанную на чистом JavaScript и отрендеренную на HTML5 {{htmlelement("canvas")}}.</p>
+
+<p>К каждому шагу прилагаются редактируемые live-примеры, с которыми можно поиграть, чтобы увидеть, как должна выглядеть игра на промежуточных этапах. Вы изучите основы использования элемента {{htmlelement("canvas")}} для реализации таких фундаментальных игровых механик, как рендеринг и перемещение изображений, обнаружение столкновений, механизмы управления, а также состояния выигрыша и проигрыша.</p>
+
+<p>Для извлечения максимальной пользы из этой серии статей необходимо иметь средние (или хотя бы базовые) знания языка <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>. После прохождения этого урока вы сможете создавать собственные простые браузерные игры.</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="Детали_к_урокам">Детали к урокам</h2>
+
+<p>Все уроки и версии игры <a href="http://breakout.enclavegames.com/lesson10.html">MDN Breakout </a>доступны в <a href="https://github.com/end3r/Canvas-gamedev-workshop">GitHub</a>:</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Создание Canvas и рисование на нем</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/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">Реакция при столкновении со стеной</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/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">Конец игры</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/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">Реакция при столкновении</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/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">Контроль мышью</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">Заключение</a></li>
+</ol>
+
+<p>Лучший способ получить надежные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, нелишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript.</p>
+
+<div class="note">
+<p><strong>Примечание.</strong> Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D игра Breakout с использованием Phaser</a>.</p>
+</div>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>Примечание.</strong></span> Эту серию статей можно использовать как материал для практических занятий по разработке игр. Также можно воспользоваться набором инструментов <a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a>, основанном на этом уроке, если нужно сделать доклад о разработке игр в целом.</p>
+</div>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Ладно, давайте начнем! Перейдите к первой главе — <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Создание Canvas и рисование на нем</a>.</p>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} </p>
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html
new file mode 100644
index 0000000000..ad4caeefa1
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html
@@ -0,0 +1,124 @@
+---
+title: Ракетка и управление клавиатурой
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over")}}</p>
+
+<div class="summary">
+<p>Это 4-й этап из 10 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>.  Вы можете найти исходный код как он должен выглядеть после завершения этого урока в <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html">Gamedev-Canvas-workshop/lesson4.html</a>.</p>
+
+<p>Мяч беспрепятственно отражается от стен, и вы можете смотреть на него бесконечно, но в настоящее время нет интерактивности. Это не игра, если вы не можете управлять мячом. Давайте добавим взаимодействие с игрой: управление ракеткой.</p>
+</div>
+
+<h2 id="Определение_ракетки_чтобы_ударить_по_мячу">Определение ракетки, чтобы ударить по мячу</h2>
+
+<p>Итак, нам нужна ракетка, чтобы ударить по мячу - давайте определим несколько переменных для этого. Добавьте следующие переменные в верхней части кода, рядом с вашими другими переменными:</p>
+
+<pre class="brush: js">var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;</pre>
+
+<p>Здесь мы определяем высоту и ширину ракетки, и его начальную точку на оси X, для дальнейшего использования в расчетах. Давайте создадим функцию, которая будет рисовать ракетку на экране. Добавьте следующий блок после функции <code>drawBall()</code>:</p>
+
+<pre class="brush: js">function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}</pre>
+
+<h2 id="Позволяем_пользователю_управлять_ракеткой">Позволяем пользователю управлять ракеткой</h2>
+
+<p>Мы можем отобразить ракетку там, где мы хотим, но она должна реагировать на действия пользователя — настало время реализовать управление с помощью кнопок. Нам понадобится:</p>
+
+<ul>
+ <li>Две переменные для хранения информации о том, левая или правая кнопка управления нажата.</li>
+ <li>Два слушателя для событий <code>keydown</code> и <code>keyup</code> — мы хотим запустить некоторый код для обработки движения ракетки при нажатии кнопок.</li>
+ <li>Две функции обработки события <code>keydown</code> и <code>keyup</code> код, который будет выполняться при нажатии кнопок.</li>
+ <li>Возможность перемещения ракетки влево и вправо</li>
+</ul>
+
+<p>Нажатые кнопки могут быть определены и инициализированы булевыми переменными. Добавьте эти строки рядом с остальными вашими переменными:</p>
+
+<pre class="brush: js">var rightPressed = false;
+var leftPressed = false;</pre>
+
+<p>Значением по умолчанию для обоих является <code>false</code>, так как изначально кнопки не нажаты. Для прослушивания нажатий клавиш, мы создадим два обработчика событий. Добавьте следующие строки чуть выше функции <code>setInterval()</code> в нижней части JavaScript:</p>
+
+<pre class="brush: js">document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);</pre>
+
+<p>Когда <code>keydown</code> событие вызывается любой клавишей клавиатуры (нажатием клавиши), функция <code>keyDownHandler()</code> будет выполняться. Та же картина верна для второго обработчика: <code>keyup</code> событие запустит функцию <code>keyUpHandler ()</code> (когда будет отпущена). Добавьте следующий блок в ваш код ниже <code>addEventListener()</code>:</p>
+
+<pre class="brush: js">function keyDownHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = true;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = false;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = false;
+    }
+}</pre>
+
+<p>Когда мы нажимаем клавишу, эта информация хранится в переменной. Соответствующая переменная в каждом конкретном случае устанавливается в <code>true</code>. Когда клавиша отпущена, переменная устанавливается обратно в <code>false</code>.</p>
+
+<p>Обе функции принимают параметр, представленный переменной <code>e</code>. Из нее вы можете получить полезную информацию: <code>key</code> содержит информацию о нажатой клавише. Например, код 37 — это клавиша стрелка влево и 39 — стрелка вправо. Если стрелка влево нажата, то переменная <code>leftPressed</code> имеет значение <code>true</code>, когда кнопка отпущена, то переменная leftPressed имеет значение false. Та же схема со стрелкой вправо и переменной rightPressed.</p>
+
+<h3 id="Логика_перемещения_ракетки">Логика перемещения ракетки</h3>
+
+<p>Теперь у нас есть переменные для хранения информации о нажатых клавишах, обработчики событий и соответствующие функции. Теперь мы допишем код, чтобы перемещать ракетку на экране. Внутри функции <code>draw()</code>, мы будем проверять, нажата левая или правая клавиша, когда каждый кадр отображается. Наш код будет выглядеть следующим образом:</p>
+
+<pre class="brush: js">if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}</pre>
+
+<p>Если нажата стрелка влево, то ракетка будет двигаться на 7 пикселей влево, а если нажата стрелка вправо то на 7 пикселей вправо. Все хорошо, но, если держать клавишу слишком долго, ракетка уходит за границы холста. Улучшим ситуацию, будем перемещать ракетку только в пределах холста, изменив код следующим образом:</p>
+
+<pre class="brush: js">if(rightPressed &amp;&amp; paddleX &lt; canvas.width-paddleWidth) {
+    paddleX += 7;
+}
+else if(leftPressed &amp;&amp; paddleX &gt; 0) {
+    paddleX -= 7;
+}</pre>
+
+<p>Позиция <code>paddleX</code> будет двигаться от 0 на левой стороне холста и <code>canvas.width-paddleWidth</code> на правой стороне. Это будет работать именно так, как нам нужно.</p>
+
+<p>Добавьте вышеприведенный блок кода в функцию <code>draw()</code> в самый конец, чуть выше закрывающей фигурной скобки.</p>
+
+<p>Единственное, что осталось сделать сейчас, это вызвать <code>drawPaddle()</code> функцию внутри функции <code>draw()</code>, чтобы нарисовать ракетку на экране. Добавьте следующую строку внутрь функции <code>draw()</code>, чуть ниже строки, которая вызывает <code>drawBall()</code>:</p>
+
+<pre class="brush: js">drawPaddle();
+</pre>
+
+<h2 id="Сравните_ваш_код"><span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: arial,helvetica,sans-serif; font-size: 20px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;">Сравните ваш код</span></h2>
+
+<p>Вот работающий код для вас, чтобы сравнить со своим:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>Упражнение</strong></span>: Сделайте скорость движения ракетки быстрее или медленнее, или измените ее размер.</p>
+</div>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Теперь у нас есть что-то похожее на игру. Беда только в том, что пока вы можете лишь бесконечно бить мяч ракеткой. Это все изменится в пятой главе, <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Game_over">Game over</a>, когда мы начнем добавлять конечное состояние для нашей игры.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}</p>
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
new file mode 100644
index 0000000000..f9993a8b31
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
@@ -0,0 +1,100 @@
+---
+title: Счет и выигрыш
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win
+tags:
+  - JavaScript
+  - Игры
+  - Начинающий
+  - Учебник
+  - счет
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win
+---
+<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/Управление_мышью")}}</p>
+
+<div class="summary">
+<p>Это 8й шаг из 10 в <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код для этого урока по ссылке <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html">Gamedev-Canvas-workshop/lesson8.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Уничтожение кирпичей действительно классно, но, чтобы быть еще более удивительным, игра должна присуждать очки за каждый кирпич, в который попадает игрок, и подсчитывать общий балл.</span></p>
+
+<h2 id="Подсчет_очков">Подсчет очков</h2>
+
+<p>Если вы можете увидеть свои очки на протяжении всей игры, вы можете произвести впечатление на своих друзей. Вам нужна переменная для записи очков. Добавьте следующие данные в свой JavaScript, после остальных переменных:</p>
+
+<pre class="brush: js">var score = 0;</pre>
+
+<p>Вам также нужна функция <code>drawScore()</code> для создания и обновления отображения оценки. Добавьте после функции <code>collisionDetection()</code> следующий код:</p>
+
+<pre class="brush: js">function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}</pre>
+
+<p>Рисование текста на канве аналогично рисованию фигур. Определение шрифта выглядит точно так же, как и в CSS - вы можете установить размер и тип шрифта в {{domxref("CanvasRenderingContext2D.font","font()")}} методе. Затем используйте {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} для установки цвета шрифта и  {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} для установки фактического текста, который будет помещен на канву, и где он будет размещен. Первым параметром является сам текст - приведенный выше код показывает текущее количество точек, а два последних параметра - это координаты, в которых текст будет помещен на канву.</p>
+
+<p>Чтобы начислять баллы каждый раз при ударе кирпича, добавьте строку в функцию <code>collisionDetection()</code>, чтобы увеличить значение переменной оценки каждый раз при обнаружении столкновения. Добавьте в код следующую выделенную строку:</p>
+
+<pre class="brush: js; highlight:[9]">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;
+                    score++;
+                }
+            }
+        }
+    }
+}</pre>
+
+<p>Вызов <code>drawScore()</code>из функции <code>draw()</code> позволяет обновить счет с каждым новым фреймом - добавьте следующую строку внутри <code>draw()</code>, чуть ниже вызова <code>drawPaddle()</code>:</p>
+
+<pre class="brush: js">drawScore();</pre>
+
+<h2 id="Отображение_сообщения_о_победе_когда_все_кирпичи_были_уничтожены">Отображение сообщения о победе, когда все кирпичи были уничтожены</h2>
+
+<p>В конце концов, это главная цель игры, поэтому вы должны отобразить сообщение о победе, если все доступные кирпичи уничтожены. Добавьте следующий код в свою функцию <code>collisionDetection()</code> :</p>
+
+<pre class="brush: js; highlight:[10,11,12,13]">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;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}</pre>
+
+<p>Благодаря этому, игроки могут выиграть игру, когда они уничтожают все кирпичи, что очень важно, когда дело доходит до игр. Функция <code>document.location.reload()</code> перезагружает страницу и снова запускает игру после нажатия кнопки оповещения.</p>
+
+<h2 id="Сравните_ваш_код">Сравните ваш код</h2>
+
+<p>Вот работающий код для вас, чтобы сравнить со своим:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/2m74vr9r/1/","","395")}}</p>
+
+<div class="note">
+<p><strong>Упражнение: добавьте больше очков за каждый разбитый кирпич, выведите количество набранных очков в конце игры</strong>.</p>
+</div>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>На данный момент игра выглядит довольно хорошо. В следующем уроке Вы расширите привлекательность игры, добавив <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Mouse_controls">Mouse controls</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/заключение/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/заключение/index.html
new file mode 100644
index 0000000000..d8f40896e1
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/заключение/index.html
@@ -0,0 +1,103 @@
+---
+title: Заключение
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Заключение
+tags:
+  - Игры
+  - Канва
+  - Начинающий
+  - жизни
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{Previous("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управление_мышью")}}</p>
+
+<div class="summary">
+<p>Это 10-й и заключительный шаг в <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код, как он должен выглядеть, после завершения этого урока в <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html">Gamedev-Canvas-workshop/lesson10.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">В любой игре, которую мы пишем, всегда есть место для улучшений. Например, мы можем предложить игроку несколько жизней. Они могут сделать несколько ошибок и все равно закончить игру. Мы также можем улучшить отрисовку кода.</span></p>
+
+<h2 id="Предоставление_игроку_нескольких_жизней">Предоставление игроку нескольких жизней</h2>
+
+<p>Реализация довольно проста. Давайте сначала добавим переменную для хранения количества жизней в том же месте, где мы объявляли другие наши переменные:</p>
+
+<pre class="brush: js">var lives = 3;</pre>
+
+<p>Отрисовка счетчика жизни выглядит почти так же, как и счетчика баллов - добавьте в код следующую функцию под функцией <code>drawScore()</code> :</p>
+
+<pre class="brush: js">function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}</pre>
+
+<p>Вместо того, чтобы немедленно закончить игру, мы уменьшим количество жизней, пока они больше не будут доступны. Мы также можем сбросить позиции мяча и биты, когда игрок начинает игру со следующей жизнью. Итак, в функции <code>draw()</code> замените следующие три строки:</p>
+
+<pre class="brush: js">alert("GAME OVER");
+document.location.reload();
+clearInterval(interval); // Needed for Chrome to end game</pre>
+
+<p>Давайте добавим немного более сложную логику к ней, как показано ниже:</p>
+
+<pre class="brush: js">lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}</pre>
+
+<p>Теперь, когда мяч попадает в нижний край экрана, мы вычитаем одну жизнь из переменной <code>lives</code>. Если жизней не осталось, игра проиграна, если осталось еще несколько жизней, то положение мяча и биты сбрасываются вместе с движением мяча.</p>
+
+<h3 id="Визуализация_дисплея_жизней">Визуализация дисплея жизней</h3>
+
+<p>Теперь вам нужно добавить вызов <code>drawLives()</code> внутри функции <code>draw()</code> и добавить его под вызовом <code>drawScore()</code>.</p>
+
+<pre class="brush: js">drawLives();
+</pre>
+
+<h2 id="Улучшение_рендеринга_с_requestAnimationFrame">Улучшение рендеринга с requestAnimationFrame()</h2>
+
+<p>Теперь давайте работать над чем-то, что не связано с игровой механикой, но с тем, как она рендерится. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} поможет браузеру рендерить игру лучше, чем фиксированная частота кадров, которую в настоящее время мы реализовали, используя {{domxref("windowTimers.setInterval()", "setInterval()")}}. Замените следующую строку:</p>
+
+<pre class="brush: js">setInterval(draw, 10);</pre>
+
+<p>на:</p>
+
+<pre class="brush: js">draw();</pre>
+
+<p>и удалите каждый экземпляр:</p>
+
+<pre>clearInterval(interval); // Needed for Chrome to end game</pre>
+
+<p>Затем в самом низу функции <code>draw()</code> (непосредственно перед закрывающей фигурной скобкой) добавьте следующую строку, которая заставляет функцию <code>draw()</code> вызывать себя снова и снова:</p>
+
+<pre class="brush: js">requestAnimationFrame(draw);</pre>
+
+<p>Функция <code>draw()</code> теперь выполняется снова и снова в цикле <code>requestAnimationFrame()</code>, но вместо фиксированной частоты кадров в 10 миллисекунд, мы возвращаем управление частотой кадров обратно в браузер. Соответственно он будет синхронизировать частоту кадров и отображать фигуры только при необходимости. Это обеспечивает более эффективный и плавный цикл анимации, чем более старый метод <code>setInterval().</code></p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вот и все-финальная версия игры готова!</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/3becw9fy/1/","","395")}}</p>
+
+<div class="note">
+<p><strong>Упражнение: измените количество жизней и угол отскока мяча от биты.</strong></p>
+</div>
+
+<h2 id="Игра_закончена_-_на_данный_момент!">Игра закончена - на данный момент!</h2>
+
+<p>Вы закончили все уроки — поздравляем! К этому моменту вы должны знать основы манипулирования canvas и логику простых 2D-игр. Сейчас самое время изучить некоторые фреймворки и продолжить разработку игр. Вы можете проверить аналог этой серии, <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a> или <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">Cyber Orb built in Phaser</a> учебник. Вы также можете просмотреть раздел <a href="https://developer.mozilla.org/en/docs/Games">Games section on MDN</a> для вдохновения и  увеличения знаний.</p>
+
+<p>Вы также можете вернуться на <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">this tutorial series' index page</a> учебника. Получайте удовольствие от написания кода!</p>
+
+<p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/обнаружение_столкновений/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/обнаружение_столкновений/index.html
new file mode 100644
index 0000000000..576f17e7cc
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/обнаружение_столкновений/index.html
@@ -0,0 +1,128 @@
+---
+title: Обнаружение столкновений
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Обнаружение_столкновений
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
+---
+<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/Track_the_score_and_win")}}</p>
+
+<div class="summary">
+<p>Это 7 шаг из 10 в <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>.</p>
+
+<p>У нас уже есть кирпичи, появляющиеся на экране, но игра все еще не так интересна, ведь мяч проходит сквозь них. Нам нужно подумать о добавлении обнаружения столкновений, чтобы он мог отскакивать от кирпичей и ломать их.</p>
+</div>
+
+<p>Конечно, это наше решение, как реализовать это, но может быть сложно рассчитать, касается ли шар прямоугольника или нет, потому что в Canvas нет вспомогательных функций для этого. В этом уроке мы сделаем это самым простым способом. Мы проверим, сталкивается ли центр мяча с любым из данных кирпичей. Это не идеальное решение на все случаи жизни, и есть намного более сложные и эффективные способы обнаружения столкновений, но это научит вас основным понятиям.</p>
+
+<h2 id="Функция_обнаружения_столкновения">Функция обнаружения столкновения</h2>
+
+<p>Мы хотим создать функцию обнаружения столкновений, которая будет перебирать все кирпичи и сравнивать позицию каждого кирпича с координатами шара при каждой отрисовке кадра. Для лучшей читаемости кода определим переменную <code>b</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];
+            // calculations
+        }
+    }
+}</pre>
+
+<p>Если центр шара находится внутри координат одного из наших кирпичей, мы изменим направление шара. Для того, чтобы центр шара находился внутри кирпича, все четыре из следующих утверждений должны быть верны:</p>
+
+<ul>
+ <li>Координата X шара больше, чем координата X кирпича.</li>
+ <li>Координата X шара меньше, чем  X-координата кирпича плюс его ширина.</li>
+ <li>Координата Y шара больше, чем Y-координата кирпича.</li>
+ <li>Координата Y шара меньше, чем Y-координата кирпича плюс его высота.</li>
+</ul>
+
+<p>Давайте напишем это в коде:</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>Добавьте вышеприведенный блок к вашему коду под <code>keyUpHandler() </code>функцией .</p>
+
+<h2 id="Удаление_кирпичей_после_их_попадания">Удаление кирпичей после их попадания</h2>
+
+<p>Вышеприведенный код будет работать, как и задумано, и мяч изменит свое направление. Проблема в том, что кирпичи остаются на своих местах. Мы должны придумать, как избавляться от тех, в которые мы уже попали мячом. Мы можем сделать это, добавив дополнительный параметр кирпичам, определяющий, будет ли кирпич отрисовываться на экране или нет. В той части кода, где мы инициализируем кирпичи, добавим свойство <code>status</code> к каждому кирпичному объекту. Обновите следующую часть кода, как показано ниже:</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>Теперь мы будем проверять значение свойства <code>status</code> каждого кирпича в функции <code>drawBricks()</code> перед его рисованием - если <code>status</code> равен <code>1</code> , нарисуем его, а если равен <code>0</code> , то значит в него попал мяч и он не должен больше отрисовываться. Отредактируйте <code>drawBricks()</code> следующим образом:</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="Отслеживание_и_обновление_состояния_в_функции_обнаружения_столкновений">Отслеживание и обновление состояния в функции обнаружения столкновений</h2>
+
+<p>Теперь нам нужно задействовать свойство <code>status</code> кирпича в функции <code>collisionDetection()</code> : если кирпич активен (его статус равен <code>1</code> ), мы проверяем, было ли столкновение; если да, мы устанавливаем статус данного кирпича равным <code>0</code>, чтобы он не был нарисован на экране. Отредактируйте функцию <code>collisionDetection()</code>, как показано ниже:</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="Активация_нашего_обнаружения_столкновений">Активация нашего обнаружения столкновений</h2>
+
+<p>Последнее, что нужно сделать, это добавить вызов функции <code>collisionDetection()</code> в нашу основную функцию <code>draw()</code> . Добавьте следующую строку в функцию <code>draw()</code> , чуть ниже <code>drawPaddle()</code> :</p>
+
+<pre class="brush: js">collisionDetection();
+</pre>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Обнаружение столкновения шара теперь выполняется на каждом кадре и для каждого кирпича. Теперь мы можем ломать кирпичи! : -</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/3/","","395")}}</p>
+
+<div class="note">
+<p><strong>Упражнение</strong> : измените цвет шара, когда он ударит по кирпичу.</p>
+</div>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>Мы уверенно движемся вперёд! Поехали! В восьмой главе мы будем учиться <a href="https://translate.googleusercontent.com/translate_c?act=url&amp;depth=1&amp;hl=ru&amp;ie=UTF8&amp;prev=_t&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=ru&amp;u=https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win&amp;xid=25657,15700022,15700124,15700149,15700168,15700186,15700190,15700201,15700205&amp;usg=ALkJrhhN9U9TuRM07dQaU3Oyqz2-F5ctig">отслеживать счет и выигрывать</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/ru/games/tutorials/2d_breakout_game_pure_javascript/переместить_мяч/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/переместить_мяч/index.html
new file mode 100644
index 0000000000..f6d26cfc52
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/переместить_мяч/index.html
@@ -0,0 +1,146 @@
+---
+title: Переместить мяч
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Переместить_мяч
+tags:
+  - 2D
+  - Canvas
+  - Игры
+  - Обучение
+  - Цикл
+  - передвижение
+  - пишем игру на javascript
+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/Создание_Canvas_и_рисование_на_нём", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}</p>
+
+<div class="summary">
+<p>Это <strong>2й шаг</strong> из 10 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код для данного урока по ссылке <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">Из предыдущей статьи Вы уже знаете, как нарисовать мяч, а сейчас давайте заставим его двигаться. Технически, мы будем рисовать мяч на экране, стирать его и рисовать заново на немного другой позиции каждый раз, чтобы создать эффект движения - точно так же, как это работает в фильмах.</span></p>
+
+<h2 id="Определяем_цикл_рисования">Определяем цикл рисования</h2>
+
+<p>Чтобы canvas постоянно обновлялся, необходимо определить функцию отрисовки, которая будет циклически запускаться с разными параметрами, чтобы изменять позицию элемента. Функцию можно циклически запускать с помощью JavaScript временной функции, такой как {{domxref("WindowTimers.setInterval()", "setInterval()")}} или {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.</p>
+
+<p>Удалите весь JavaScript код, который сейчас хранился в Вашем HTML файле, за исключением первых двух строк, и добавьте следующий код после них. Функция <code>draw()</code> будет исполняться внутри функции <code>setInterval</code> каждые 10 мс:</p>
+
+<pre class="brush: js">function draw() {
+    // код отрисовки
+}
+setInterval(draw, 10);</pre>
+
+<p>Благодаря бесконечности функции <code>setInterval</code> функция <code>draw()</code> будет выполняться каждые 10 мс бесконечно или же пока мы не остановим её. Теперь давайте нарисуем мяч - добавьте в свой код функцию <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>Попробуйте сейчас Ваш обновлённый код - каждый раз мяч будет перерисовываться.</p>
+
+<h2 id="Перемещение">Перемещение</h2>
+
+<p>Вы не можете определить, перерисовывается ли мяч в конкретный момент, так как его позиция не меняется. Давайте исправим это. Прежде всего, в позиции (50,50) определим стартовую точку в нижней центральной части Canvas в переменной <code>x</code> и <code>y</code>, и потом используем их для определения текущего положения мяча.</p>
+
+<p>Для начала добавьте следующие две строки до функции <code>draw()</code>, чтобы определить переменные <code>x</code> и <code>y</code>:</p>
+
+<pre class="brush: js">var x = canvas.width/2;
+var y = canvas.height-30;
+</pre>
+
+<p>Далее обновите функцию <code>draw()</code>, чтобы использовать переменные x и y в методе {{domxref("CanvasRenderingContext2D.arc()","arc()")}}, как показано на подсвеченной линии:</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>Теперь важная часть: мы хотим добавлять небольшое значение к переменным <code>x</code> и <code>y</code> после каждой итерации, чтобы заставить мяч двигаться. Давайте определим эти небольшие значения в переменных <code>dx</code> и <code>dy</code> и установим их 2 и -2 соответственно. Добавьте следующий код после определения переменных x и y:</p>
+
+<pre class="brush: js">var dx = 2;
+var dy = -2;
+</pre>
+
+<p>И последнее, необходимо обновить переменные <code>x</code> и <code>y</code> на значение <code>dx</code> и <code>dy</code> каждую итерацию, чтобы мяч отрисовывался каждый раз на новой позиции. Добавьте ещё две строки кода в функции <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>Сохраните Ваш код и откройте страницу в браузере. Всё работает хорошо, вот только мяч оставляет позади след:</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="Очищение_объекта_после_каждого_кадра">Очищение объекта после каждого кадра</h2>
+
+<p>Мяч оставляет след, потому что мы рисуем круг на каждой итерации без удаления предыдущей отрисованной фигуры. Не переживайте, потому что существует метод для очистки canvas элемента: {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Этот метод принимает четыре параметра: x и y координаты верхнего левого угла прямоугольника, x и y координаты нижнего правого угла прямоугольника. Вся площадь, покрытая прямоугольником, будет очищена от любого содержимого, которое когда-либо было там отрисовано.</p>
+
+<p>Добавьте следующую подсвеченную строку в функцию <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>Сохраните Ваш код и попробуйте снова, и на этот раз Вы увидите, что мяч перемещается без следов. Каждые 10 мс canvas очищается, голубой круг (наш мяч) отрисовывается на заданной позиции, переменные <code>x</code> и <code>y</code> каждую итерацию обновляются.</p>
+
+<h2 id="Рефакторинг">Рефакторинг</h2>
+
+<p>Мы будем добавлять каждый раз всё больше команд в функцию <code>draw()</code>, поэтому было бы неплохо содержать наш код настолько простым и понятным, на сколько это возможно. Давайте вынесем команды перемещения мяча в отдельную функцию.</p>
+
+<p>Замените существующую функцию draw() следующими двумя функциями:</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="Сравните_Ваш_код">Сравните Ваш код</h2>
+
+<p>Вы можете проверить итоговый код для этого урока с помощью демо, а так же поэкспериментировать с ним, изменяя те или иные параметры:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}</p>
+
+<div class="summary">
+<p>Упражнение: попробуйте изменить скорость перемещения мяча, или направление перемещения.</p>
+</div>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>Мы нарисовали мяч и заставили его двигаться, но он продолжает пропадать на краю canvas. В третьей части мы рассмотрим, как заставить его <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Bounce_off_the_walls">отскакивать от стен</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}</p>
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/создаем_зону_кирпичей/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/создаем_зону_кирпичей/index.html
new file mode 100644
index 0000000000..91c7ea5405
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/создаем_зону_кирпичей/index.html
@@ -0,0 +1,119 @@
+---
+title: Создаем зону кирпичей
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаем_зону_кирпичей
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection")}}</p>
+
+<div class="summary">
+<p>Это 6 шаг из 10 в <a href="/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут - <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html">Gamedev-Canvas-workshop/lesson6.html</a>.</p>
+</div>
+
+<p>После изменения механики игрового процесса мы теперь можем проиграть - это здорово, так как это означает, что игра, наконец, больше похожа на игру. Тем не менее, он быстро станет скучным, если все, что вы делаете, это отскок шара от стен и биты. То, что действительно нужно для прорыва - это кирпичи, которые нужно уничтожить мячом, и это то, что мы сейчас создадим!</p>
+
+<h2 id="Настройка_переменных_кирпича">Настройка переменных кирпича</h2>
+
+<p>Общая цель этого урока - сделать несколько строк кода для кирпичей, используя вложенный цикл, который работает через двумерный массив. Однако сначала нам нужно настроить некоторые переменные для определения информации о таких кирпичах, как их ширина и высота, строки и столбцы и т. Д. Добавьте следующие строки в свой код под переменными, которые вы ранее объявили в своей программе.</p>
+
+<pre class="brush: js">var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;</pre>
+
+
+
+<p>Здесь мы определили количество строк и столбцов кирпичей, их ширину и высоту, прокладку между кирпичами, чтобы они не касались друг друга и верхнее и левое смещение, чтобы они не начинали рисоваться прямо от края Холста.</p>
+
+<p>Мы будем держать все наши кирпичи в двумерном массиве. Он будет содержать кирпичные столбцы (c), которые, в свою очередь, будут содержать кирпичные ряды (r), которые, в свою очередь, будут содержать объект, содержащий положение <code>x</code> и <code>y</code>чтобы рисовать каждый кирпич на экране. Добавьте следующие значения ниже ваших переменных:</p>
+
+
+
+<pre class="brush: js">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 };
+    }
+}</pre>
+
+<p>Вышеприведенный код будет прокручивать строки и столбцы и создавать новые кирпичи. Обратите внимание, что кирпичные объекты также будут использоваться для целей обнаружения столкновений позже.</p>
+
+<h2 id="Механизм_отрисовки_кирпичей">Механизм отрисовки кирпичей</h2>
+
+<p>Теперь давайте создадим функцию, чтобы перебрать все кирпичи в массиве и нарисовать их на экране. Наш код может выглядеть так:</p>
+
+<pre class="brush: js">function drawBricks() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}</pre>
+
+<p>Опять же, мы зацикливаем строки и столбцы, чтобы установить положение <code>x</code> и <code>y</code>каждого кирпича, и мы также <code>brickWidth</code> кирпич на кирпичной <code>brickWidth</code> Canvas -<code>brickWidth</code> - с каждой итерацией цикла. Проблема в том, что мы рисуем их все в одном месте, в координатах <code>(0,0)</code> . Нам нужно включить некоторые вычисления, которые будут определять положение <code>x</code> и <code>y</code> каждого кирпича для каждой итерации цикла:</p>
+
+<pre class="brush: js">var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;</pre>
+
+
+
+<p>Каждая позиция <code>brickX</code> разрабатывается как <code>brickWidth</code> + <code>brickPadding</code> , умноженная на номер столбца, <code>c</code> , плюс <code>brickOffsetLeft</code> ; логика для brickY идентична, за исключением того, что она использует значения для номера строки, <code>r</code>, <code>brickHeight</code> и <code>brickOffsetTop</code> . Теперь каждый отдельный кирпич может быть помещен в правильное место и столбец места, с отступом между каждым кирпичом, нарисованным на смещение от левого и верхнего краев холста.</p>
+
+<p>Окончательная версия функции <code>drawBricks()</code> после назначения <code>brickX</code> и <code>brickY</code> в качестве координат вместо <code>(0,0)</code> каждый раз будет выглядеть следующим образом: добавьте это в свой код ниже функции <code>drawPaddle()</code> :</p>
+
+
+
+<pre class="brush: js">    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            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="Сама_отрисовка_кирпичей">Сама отрисовка кирпичей</h2>
+
+<p>Последнее, что нужно сделать в этом уроке, - добавить вызов <code>drawBricks()</code> где-нибудь в функции <code>draw()</code> , предпочтительно в начале, между очисткой холста и рисованием шара. Добавьте следующее выше <code>drawBall()</code> :</p>
+
+<pre class="brush: js">drawBricks();
+</pre>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+
+
+<p>На этом этапе игра снова стала интереснее:</p>
+
+
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}</p>
+
+<div class="note">
+<p>Упражнение: попробуйте изменить количество кирпичей в строке или столбце или их позиции.</p>
+</div>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>Итак, теперь у нас есть кирпичи! Но мяч вообще не взаимодействует с ними - мы изменим это, поскольку мы переходим в седьмую главу: <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">Collision detection</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}}</p>
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/создание_canvas_и_рисование_на_нём/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/создание_canvas_и_рисование_на_нём/index.html
new file mode 100644
index 0000000000..84f23b0e2a
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/создание_canvas_и_рисование_на_нём/index.html
@@ -0,0 +1,115 @@
+---
+title: Создание Canvas и рисование на нём
+slug: >-
+  Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создание_Canvas_и_рисование_на_нём
+tags:
+  - JavaScript
+  - Игры
+  - разработка игр
+  - создание игр
+translation_of: >-
+  Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Переместить_мяч")}}</p>
+
+<div class="summary">
+<p>Это <strong>1й шаг</strong> из 10 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код для этого урока по ссылке <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>.</p>
+</div>
+
+<p>Прежде чем мы сможем начать писать функциональные возможности игры, нам необходимо создать базовую структуру для рендеринга игры внутри. Это можно сделать с помощью HTML и элемента {{htmlelement ("canvas")}}.</p>
+
+<h2 id="HTML_игры">HTML игры</h2>
+
+<p>Структура HTML документа довольно проста, так как игра будет полностью визуализироваться в {{htmlelement("canvas")}} элементе. Используя Ваш любимый текстовый редактор, создайте новый HTML документ, сохраните его как <code>index.html</code> в любом удобном месте, и скопируйте в него этот код:</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;
+	// JavaScript код будем писать здесь
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Мы определили <code>charset</code>, {{htmlelement("title")}} и некий базовый CSS в заголовке. Тело документа содержит элементы {{htmlelement("canvas")}} и {{htmlelement("script")}} — мы будем визуализировать игру внутри первого и писать JavaScript код, который управляет игрой, во втором. Элемент {{htmlelement("canvas")}} имеет <code>id</code> равный <code>myCanvas</code>, который позволяет однозначно отыскать элемент. Так же этот элемент имеет ширину 480 пикселей и высоту 320 пикселей. Весь JavaScript код мы будем писать между открывающим тегом <code>&lt;script&gt;</code> и закрывающим тегом <code>&lt;/script&gt;</code>.</p>
+
+<h2 id="Основы_Canvas">Основы Canvas</h2>
+
+<p>Чтобы иметь возможность визуализировать игру в {{htmlelement("canvas")}} элементе, сначала мы должны сослаться на этот элемент в коде JavaScript. Добавьте следующий код после открывающего тега <code>&lt;script&gt;</code>.</p>
+
+<pre class="brush: js">var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");</pre>
+
+<p>Таким образом, мы храним ссылку на {{htmlelement("canvas")}} элемент в переменной <code>canvas</code>. Далее мы создаём переменную <code>ctx</code> для хранения 2D визуализации контекста — метод, который используется для отрисовки в Canvas.</p>
+
+<p>Давайте рассмотрим пример отрисовки красного квадрата на canvas. Добавьте этот код ниже предыдущего кода на JavaScript и загрузите <code>index.html</code> в браузере, чтобы посмотреть результат.</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>Все инструкции располагаются между методами {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} и {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Мы определяем прямоугольник, используя  {{domxref("CanvasRenderingContext2D.rect()","rect()")}}: первые два параметра определяют координаты верхнего левого угла прямоугольника на canvas, в то время, как два других параметра определяют ширину и высоту прямоугольника. В нашем случае прямоугольник нарисован на расстоянии 20 пикселей слева и 40 пикселей сверху, 50 пикселей в ширину и 50 пикселей в высоту, что делает его квадратом. Свойство {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} хранит цвет, который будет использован методом {{domxref("CanvasRenderingContext2D.fill()","fill()")}} для отрисовки нашего квадрата.</p>
+
+<p>Мы не ограничены только прямоугольниками - ниже часть кода для отрисовки зелёного круга. Попробуйте добавить этот код вконец Вашего кода JavaScript, сохраните и обновите страницу в браузере:</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>Как видите, мы снова используем методы {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} и {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Между ними наиболее важная часть кода - метод {{domxref("CanvasRenderingContext2D.arc()","arc()")}}. Он принимает шесть параметров:</p>
+
+<ul>
+ <li><code>x</code> и <code>y</code> координаты центра круга</li>
+ <li>радиус</li>
+ <li>начальный и конечный угол отрисовки круга (в радианах)</li>
+ <li>направление отрисовки: (<code>false</code> - по часовой стрелке, по умолчанию, или <code>true</code> - против часовой стрелки). Последний параметр не обязательный.</li>
+</ul>
+
+<p>Свойство {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} выглядит не так, как прежде. Это потому что, как и в CSS, цвет может быть задан в шестнадцатиричном формате, названием цвета, функцией <code>rgba()</code> , или же любым другим методом для цвета.</p>
+
+<p>Вместо {{domxref("CanvasRenderingContext2D.fill()","fill()")}} и заполнения фигур цветом, можно использовать {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}}, чтобы окрасить только внешнюю обводку фигуры. Попробуйте добавить этот код к Вашему коду 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>Код выше отрисовывает пустой прямоугольник с синей обводкой. Благодаря функции альфа-канала <code>rgba()</code> , голубой цвет полупрозрачный.</p>
+
+<h2 id="Сравните_Ваш_код">Сравните Ваш код</h2>
+
+<p>Здесь полный исходный код для первого урока, посмотреть онлайн можно на JSFiddle:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","395")}}</p>
+
+<div class="note">
+<p><strong>Упражнение</strong>: попробуйте изменить цвет и размер созданных фигур.</p>
+</div>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>Сейчас мы создали базовый HTML и немного узнали о canvas, давайте на следующем шаге изучим, как <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball">Двигать мяч в нашей игре</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p>
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/управление_мышью/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/управление_мышью/index.html
new file mode 100644
index 0000000000..b3ab4efaca
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/управление_мышью/index.html
@@ -0,0 +1,58 @@
+---
+title: Управление мышью
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управление_мышью
+tags:
+  - Игры
+  - Начинающий
+  - канвас
+  - мышь
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Заключение")}}</p>
+
+<div class="summary">
+<p>Это 9-й шаг из 10 в <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код к этому уроку в <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html">Gamedev-Canvas-workshop/lesson9.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Сама игра на самом деле закончена, так что давайте отполируем её. Мы уже добавили элементы управления клавиатуру, но мы могли бы легко добавить элемент управления мышь.</span></p>
+
+<h2 id="Отслеживание_движений_мыши">Отслеживание движений мыши</h2>
+
+<p>Отслеживание движений мыши еще проще, чем прослушивание нажатий клавиш. Все, что нам нужно, это следить за событиями {{event("mousemove")}}. Добавьте следующую строку в том же месте, как и для других событий, чуть ниже <code>keyup event</code>:</p>
+
+<pre class="brush: js">document.addEventListener("mousemove", mouseMoveHandler, false);</pre>
+
+<h2 id="Привязка_движения_ракетки_к_движению_мыши">Привязка движения ракетки к движению мыши</h2>
+
+<p>Мы можем обновить положение ракетки на основе координат указателя - следующая функция обработчика сделает именно это. Добавьте в код следующую функцию под предыдущей добавленной строкой:</p>
+
+<pre class="brush: js">function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX &gt; 0 &amp;&amp; relativeX &lt; canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}</pre>
+
+<p>В этой функции мы сначала разрабатываем значение <code>relativeX</code>, которое равно горизонтальному положению мыши в окне браузера (<code>e.clientX</code>) минус расстояние между левым краем canvas и левым краем окна браузера (<code>canvas.offsetLeft</code>) - фактически это равно расстоянию между левым краем canvas и указателем мыши. Если относительный указатель позиции X больше нуля и меньше, чем ширина Canvas, указатель находится в пределах границы Canvas, и <code>paddleX</code> установки (крепится на левый край ракетки) - устанавливается на <code>relativeX</code> значение минус половина ширины ракетки, так что движение будет по отношению к середине ракетки.</p>
+
+<p>Ракетка теперь будет следовать за положением курсора мыши, но так как мы ограничиваем движение размером Canvas, он не исчезнет полностью с обеих сторон.</p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Это последнее состояние кода для сравнения:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/1L9ep9r2/1/","","395")}}</p>
+
+<div class="summary">
+<p>Упражнение: отрегулируйте границы движения ракетки так, что вся ракетка будет видна на обоих краях Canvas, а не только на его половину.</p>
+</div>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Теперь у нас есть полная игра, мы закончим нашу серию уроков с еще несколькими небольшими хитростями — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up">Finishing up</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p>
diff --git a/files/ru/games/tutorials/html5_gamedev_phaser_device_orientation/index.html b/files/ru/games/tutorials/html5_gamedev_phaser_device_orientation/index.html
new file mode 100644
index 0000000000..9d4e7c152d
--- /dev/null
+++ b/files/ru/games/tutorials/html5_gamedev_phaser_device_orientation/index.html
@@ -0,0 +1,445 @@
+---
+title: 2D maze game with device orientation
+slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation
+translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p>v etioi tutorial we’ll go through the process of building an HTML5 mobile game that uses the <a href="https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a class="external external-icon" href="http://phaser.io/">Phaser</a> framework. Basic JavaScript knowledge is recommended to get the most from this tutorial.</p>
+</div>
+
+<h2 id="Example_game">Example game</h2>
+
+<p>By the end of the tutorial you will have a fully functional demo game: <a href="http://orb.enclavegames.com/">Cyber Orb</a>. It will look something like this:</p>
+
+<p><img alt="A 2D game board featuring a small yellow ball. There is a large black hole for the ball to escape down, and a number of barriers blocking the ball from escaping." src="https://mdn.mozillademos.org/files/10297/cyber-orb.png" style="display: block; height: 450px; margin: 0px auto; width: 300px;"></p>
+
+<h2 id="Phaser_framework">Phaser framework</h2>
+
+<p><a href="http://phaser.io/">Phaser</a> is a framework for building desktop and mobile HTML5 games. It’s quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out <a href="https://github.com/photonstorm/phaser">on GitHub</a> where it’s open sourced, read the <a href="http://docs.phaser.io/">online documentation</a> and go through the big collection of <a href="http://examples.phaser.io/">examples</a>. The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself.</p>
+
+<h2 id="Starting_with_the_project">Starting with the project</h2>
+
+<p>You can see <a href="https://github.com/EnclaveGames/Cyber-Orb">Cyber Orb source code</a> on GitHub. The folder structure is quite straightforward: the starting point is the <code>index.html</code> file where we initialize the framework and set up an {{htmlelement("canvas")}} to render the game on.</p>
+
+<p><img alt="Screenshot of the GitHub repository with the Cyber Orb game code, listing the folders and the files in the main structure." src="https://mdn.mozillademos.org/files/10357/cyber-orb-github.png" style="height: 423px; width: 620px;"></p>
+
+<p>You can open the index file in your favourite browser to launch the game and try it. There are also three folders in the directory:</p>
+
+<ul>
+ <li><code>img</code>: All the images that we will use in the game.</li>
+ <li><code>src</code>: The JavaScript files with all the source code of the game defined inside.</li>
+ <li><code>audio:</code> The sound files used in the game.</li>
+</ul>
+
+<h2 id="Setting_up_the_Canvas">Setting up the Canvas</h2>
+
+<p>We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let’s set it up: our starting point is the <code>index.html</code> file with the following content. You can create this yourself if you want to follow along:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Cyber Orb demo&lt;/title&gt;
+    &lt;style&gt; body { margin: 0; background: #333; } &lt;/style&gt;
+    &lt;script src="src/phaser-arcade-physics.2.2.2.min.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Boot.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Preloader.js"&gt;&lt;/script&gt;
+    &lt;script src="src/MainMenu.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Howto.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Game.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script&gt;
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Howto', Ball.Howto);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>So far we have a simple HTML website with some basic content in the <code>&lt;head&gt;</code> section: charset, title, CSS styling and the inclusion of the JavaScript files. The <code>&lt;body&gt;</code> contains initialization of the Phaser framework and the definitions of the game states.</p>
+
+<pre class="brush: js">var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');</pre>
+
+<p>The line above will initialize the Phaser instance — the arguments are the width of the Canvas, height of the Canvas, rendering method (we're using <code>CANVAS</code>, but there are also <code>WEBGL</code> and <code>AUTO</code> options available) and the optional ID of the DOM container we want to put the Canvas in. If there's nothing specified in that last argument or the element is not found, the Canvas will be added to the &lt;body&gt; tag. Without the framework, to add the Canvas element to the page, you would have to write something like this inside the &lt;body&gt; tag:</p>
+
+<pre class="brush: html">&lt;canvas id='game' width='320' height='480'&gt;&lt;/canvas&gt;</pre>
+
+<p>The important thing to remember is that the framework is setting up helpful methods to speed up a lot of things like image manipulation or assets management, which would be a lot harder to do manually.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can read the <a href="http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723">Building Monster Wants Candy</a> article for the in-depth introduction to the basic Phaser-specific functions and methods.</p>
+</div>
+
+<p>Back to game states: the line below is adding a new state called <code>Boot</code> to the game:</p>
+
+<pre class="brush: html">game.state.add('Boot', Ball.Boot);</pre>
+
+<p>The first value is the name of the state and the second one is the object we want to assign to it. The <code>start</code> method is starting the given state and making it active. Let's see what the states are actually.</p>
+
+<h2 id="Managing_game_states">Managing game states</h2>
+
+<p>The states in Phaser are separate parts of the game logic; in our case we’re loading them from independent JavaScript files for better maintainability. The basic states used in this game are: <code>Boot</code>, <code>Preloader</code>, <code>MainMenu</code>, <code>Howto</code> and <code>Game</code>. <code>Boot</code> will take care of initializing a few settings, <code>Preloader</code> will load all of the assets like graphics and audio, <code>MainMenu</code> is the menu with the start button, <code>Howto</code> shows the "how to play" instructions and the <code>Game</code> state lets you actually play the game. Let's quickly go though the content of those states.</p>
+
+<h3 id="Boot.js">Boot.js</h3>
+
+<p>The <code>Boot</code> state is the first one in the game.</p>
+
+<pre class="brush: js">var Ball = {
+    _WIDTH: 320,
+    _HEIGHT: 480
+};
+Ball.Boot = function(game) {};
+Ball.Boot.prototype = {
+    preload: function() {
+        this.load.image('preloaderBg', 'img/loading-bg.png');
+        this.load.image('preloaderBar', 'img/loading-bar.png');
+    },
+    create: function() {
+        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+        this.game.scale.pageAlignHorizontally = true;
+        this.game.scale.pageAlignVertically = true;
+        this.game.state.start('Preloader');
+    }
+};</pre>
+
+<p>The main <code>Ball</code> object is defined and we're adding two variables called <code>_WIDTH</code> and <code>_HEIGHT</code> that are the width and the height of the game Canvas — they will help us position the elements on the screen. We're loading two images first that will be used later in the <code>Preload</code> state to show the progress of loading all the other assets. The <code>create</code> function holds some basic configuration: we're setting up the scaling and alignment of the Canvas, and moving on to the <code>Preload</code> state when everything's ready.</p>
+
+<h3 id="Preloader.js">Preloader.js</h3>
+
+<p>The <code>Preloader</code> state takes care of loading all the assets:</p>
+
+<pre class="brush: js">Ball.Preloader = function(game) {};
+Ball.Preloader.prototype = {
+    preload: function() {
+        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
+        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
+        this.load.setPreloadSprite(this.preloadBar);
+
+        this.load.image('ball', 'img/ball.png');
+        // ...
+        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
+        // ...
+        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
+    },
+    create: function() {
+        this.game.state.start('MainMenu');
+    }
+};</pre>
+
+<p>There are single images, spritesheets and audio files loaded by the framework. In this state the <code>preloadBar</code> is showing the progress on the screen. That progress of the loaded assets is visualized by the framework with the use of one image. With every asset loaded you can see more of the <code>preloadBar</code> image: from 0% to 100%, updated on every frame. After all the assets are loaded, the <code>MainMenu</code> state is launched.</p>
+
+<h3 id="MainMenu.js">MainMenu.js</h3>
+
+<p>The <code>MainMenu</code> state shows the main menu of the game, where you can start playing by clicking the button.</p>
+
+<pre class="brush: js">Ball.MainMenu = function(game) {};
+Ball.MainMenu.prototype = {
+    create: function() {
+        this.add.sprite(0, 0, 'screen-mainmenu');
+        this.gameTitle = this.add.sprite(Ball._WIDTH*0.5, 40, 'title');
+        this.gameTitle.anchor.set(0.5,0);
+        this.startButton = this.add.button(Ball._WIDTH*0.5, 200, 'button-start', this.startGame, this, 2, 0, 1);
+        this.startButton.anchor.set(0.5,0);
+        this.startButton.input.useHandCursor = true;
+    },
+    startGame: function() {
+        this.game.state.start('Howto');
+    }
+};</pre>
+
+<p>To create a new button there's <code>add.button</code> method with the following list of optional arguments:</p>
+
+<ul>
+ <li>Top absolute position on Canvas in pixels.</li>
+ <li>Left absolute position on Canvas in pixels.</li>
+ <li>Name of the image asset the button is using.</li>
+ <li>Function that will be executed when someone clicks the button.</li>
+ <li>The execution context.</li>
+ <li>Frame from the image asset used as the button's "hover" state.</li>
+ <li>Frame from the image asset used as the button's "normal" or "out" state.</li>
+ <li>Frame from the image asset used as the button's "click" or "down" state.</li>
+</ul>
+
+<p>The <code>anchor.set</code> is setting up the anchor point on the button for which all the calculations of the position are applied. In our case it's anchored half the way from the left edge and at the start of the top edge, so it can be easily horizontally centered on the screen without the need to know its width.</p>
+
+<p>When the start button is pressed, instead of jumping directly into the action the game will show the screen with the information on how to play the game.</p>
+
+<h3 id="Howto.js">Howto.js</h3>
+
+<pre class="brush: js">Ball.Howto = function(game) {
+};
+Ball.Howto.prototype = {
+    create: function() {
+        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
+    },
+    startGame: function() {
+        this.game.state.start('Game');
+    }
+};</pre>
+
+<p>The <code>Howto</code> state shows the gameplay instructions on the screen before starting the game. After clicking the screen the actual game is launched.</p>
+
+<h3 id="Game.js">Game.js</h3>
+
+<p>The <code>Game</code> state from the <code>Game.js</code> file is where all the magic happens. All the initialization is in the <code>create()</code> function (launched once at the beginning of the game). After that some functionality will require further code to control — we will write our own functions to handle more complicated tasks. In particular, take note of the <code>update()</code> function (executed at every frame), which updates things such as the ball position.</p>
+
+<pre class="brush: js">Ball.Game = function(game) {};
+Ball.Game.prototype = {
+    create: function() {},
+    initLevels: function() {},
+    showLevel: function(level) {},
+    updateCounter: function() {},
+    managePause: function() {},
+    manageAudio: function() {},
+    update: function() {},
+    wallCollision: function() {},
+    handleOrientation: function(e) {},
+    finishLevel: function() {}
+};</pre>
+
+<p>The <code>create</code> and <code>update</code> functions are framework-specific, while others will be our own creations:</p>
+
+<ul>
+ <li><code>initLevels</code> initializes the level data.</li>
+ <li><code>showLevel</code> prints the level data on the screen.</li>
+ <li><code>updateCounter</code> updates the time spent playing each level and records the total time spent playing the game..</li>
+ <li><code>managePause</code> pauses and resumes the game.</li>
+ <li><code>manageAudio</code> turns the audio on and off.</li>
+ <li><code>wallCollision</code> is executed when the ball hits the walls or other objects.</li>
+ <li><code>handleOrientation</code> is the function bound to the event responsible for the Device Orientation API, providing the motion controls when the game is running on a mobile device with appropriate hardware.</li>
+ <li><code>finishLevel</code> loads a new level when the current level is completed, or finished the game if the final level is completed.</li>
+</ul>
+
+<h4 id="Adding_the_ball_and_its_motion_mechanics">Adding the ball and its motion mechanics</h4>
+
+<p>First, let’s go to the <code>create()</code> function, initialize the ball object itself and assign a few properties to it:</p>
+
+<pre class="brush: js">this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, 'ball');
+this.ball.anchor.set(0.5);
+this.physics.enable(this.ball, Phaser.Physics.ARCADE);
+this.ball.body.setSize(18, 18);
+this.ball.body.bounce.set(0.3, 0.3);</pre>
+
+<p>Here we’re adding a sprite at the given place on the screen and using the <code>'ball'</code> image from the loaded graphic assets. We’re also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The <code>bounce</code> property is used to set the bounciness of the ball when it hits the obstacles.</p>
+
+<h4 id="Controlling_the_ball">Controlling the ball</h4>
+
+<p>It’s cool to have the ball ready to be thrown around in the play area, but it’s also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let’s focus on the keyboard first by adding the following to the <code>create()</code> function :</p>
+
+<pre class="brush: js">this.keys = this.game.input.keyboard.createCursorKeys();</pre>
+
+<p>As you can see there’s a special Phaser function called <code>createCursorKeys()</code>, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.</p>
+
+<p>Next we will add the following code to the <code>update()</code> function, so it will be fired on every frame. The <code>this.keys</code> object will be checked against player input, so the ball can react accordingly with the predefined force:</p>
+
+<pre class="brush: js">if(this.keys.left.isDown) {
+    this.ball.body.velocity.x -= this.movementForce;
+}
+else if(this.keys.right.isDown) {
+    this.ball.body.velocity.x += this.movementForce;
+}
+if(this.keys.up.isDown) {
+    this.ball.body.velocity.y -= this.movementForce;
+}
+else if(this.keys.down.isDown) {
+    this.ball.body.velocity.y += this.movementForce;
+}</pre>
+
+<p>That way we can check which key is pressed at the given frame and apply the defined force to the ball, thus increase the velocity in the proper direction.</p>
+
+<h4 id="Implementing_the_Device_Orientation_API">Implementing the Device Orientation API</h4>
+
+<p>Probably the most interesting part of the game is its usage of the <strong>Device Orientation API</strong> for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here’s the code from the <code>create()</code> function responsible for this:</p>
+
+<pre class="brush: js">window.addEventListener("deviceorientation", this.handleOrientation, true);</pre>
+
+<p>We’re adding an event listener to the <code>"deviceorientation"</code> event and binding the <code>handleOrientation</code> function which looks like this:</p>
+
+<pre class="brush: js">handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+    Ball._player.body.velocity.x += x;
+    Ball._player.body.velocity.y += y;
+},</pre>
+
+<p>The more you tilt the device, the more force is applied to the ball, therefore the faster it moves (the velocity is higher).</p>
+
+<p><img alt="An explanation of the X, Y and Z axes of a Flame mobile device with the Cyber Orb game demo on the screen." src="https://mdn.mozillademos.org/files/10369/cyber-orb-flame-orientation.png" style="height: 480px; width: 620px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: To find more out about implementing device orientation and what raw code would look like, read <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Keep it level: responding to device orientation changes</a>.</p>
+</div>
+
+<h4 id="Adding_the_hole">Adding the hole</h4>
+
+<p>The main objective in the game is to move the ball from the starting position to the ending position: a hole in the ground. Implementation looks very similar to the part where we created the ball, and it's also added in the <code>create()</code> function of our <code>Game</code> state:</p>
+
+<pre class="brush: js">this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
+this.physics.enable(this.hole, Phaser.Physics.ARCADE);
+this.hole.anchor.set(0.5);
+this.hole.body.setSize(2, 2);</pre>
+
+<p>The difference is that our hole’s body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article).</p>
+
+<h4 id="Building_the_block_labyrinth">Building the block labyrinth</h4>
+
+<p>To make the game harder and more interesting we will add some obstacles between the ball and the exit. We could use a level editor, but for the sake of this tutorial let's create something on our own.</p>
+
+<p>To hold the block information we'll use a level data array: for each block we'll store the top and left absolute positions in pixels (<code>x</code> and <code>y</code>) and the type of the block — horizontal or vertical (<code>t</code> with the <code>'w'</code> value meaning width and <code>'h'</code> meaning height). Then, to load the level we'll parse the data and show the blocks specific for that level. In the <code>initLevels</code> function we have:</p>
+
+<pre class="brush: js">this.levelData = [
+    [
+        { x: 96, y: 224, t: 'w' }
+    ],
+    [
+        { x: 72, y: 320, t: 'w' },
+        { x: 200, y: 320, t: 'h' },
+        { x: 72, y: 150, t: 'w' }
+    ],
+    // ...
+];</pre>
+
+<p>Every array element holds a collection of blocks with an <code>x</code> and <code>y</code> position and <code>t</code> value for each. After <code>levelData</code>, but still in the <code>initLevels</code> function, we're adding the blocks into an array in the <code>for</code> loop using some of the framework-specific methods:</p>
+
+<pre class="brush: js">for(var i=0; i&lt;this.maxLevels; i++) {
+    var newLevel = this.add.group();
+    newLevel.enableBody = true;
+    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
+    for(var e=0; e&lt;this.levelData[i].length; e++) {
+        var item = this.levelData[i][e];
+        newLevel.create(item.x, item.y, 'element-'+item.t);
+    }
+    newLevel.setAll('body.immovable', true);
+    newLevel.visible = false;
+    this.levels.push(newLevel);
+}</pre>
+
+<p>First, <code>add.group()</code> is used to create a new group of items. Then the <code>ARCADE</code> body type is set for that group to enable physics calculations. The <code>newLevel.create</code> method creates new items in the group with starting left and top positions, and its own image. If you don't want to loop through the list of items again to add a property to every single one explicitly, you can use <code>setAll</code> on a group to apply it to all the items in that group.</p>
+
+<p>The objects are stored in the <code>this.levels</code> array, which is by default invisible. To load specific levels, we make sure the previous levels are hidden, and show the current one:</p>
+
+<pre class="brush: js">showLevel: function(level) {
+    var lvl = level | this.level;
+    if(this.levels[lvl-2]) {
+        this.levels[lvl-2].visible = false;
+    }
+    this.levels[lvl-1].visible = true;
+}</pre>
+
+<p>Thanks to that the game gives the player a challenge - now he have to roll the ball across the play area and guide it through the labyrinth built from the blocks. It's just an example of loading the levels, and there are only 5 of them just to showcase the idea, but you can work on expanding that on your own.</p>
+
+<h4 id="Collision_detection">Collision detection</h4>
+
+<p>At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There’s a problem though — our game doesn’t have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let’s fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the <code>update()</code> function:</p>
+
+<pre class="brush: js">this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
+this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);</pre>
+
+<p>This will tell the framework to execute the <code>wallCollision</code> function when the ball hits any of the walls. We can use the <code>wallCollision</code> function to add any functionality we want like playing the bounce sound and implementing the <strong>Vibration API</strong>.</p>
+
+<h4 id="Adding_the_sound">Adding the sound</h4>
+
+<p>Among the preloaded assets there was an audio track (in various formats for browser compatibility), which we can use now. It has to be defined in the <code>create()</code> function first:</p>
+
+<pre class="brush: js">this.bounceSound = this.game.add.audio('audio-bounce');</pre>
+
+<p>If the status of the audio is <code>true</code> (so the sounds in the game are enabled), we can play it in the <code>wallCollision</code> function:</p>
+
+<pre class="brush: js">if(this.audioStatus) {
+    this.bounceSound.play();
+}</pre>
+
+<p>That's all — loading and playing the sounds is easy with Phaser.</p>
+
+<h4 id="Implementing_the_Vibration_API">Implementing the Vibration API</h4>
+
+<p>When collision detection works as expected let's add some special effects with the help from the Vibration API.</p>
+
+<p><img alt="A visualization of the vibrations of a Flame mobile device with the Cyber Orb game demo on the screen." src="https://mdn.mozillademos.org/files/10371/cyber-orb-flame-vibration.png" style="height: 480px; width: 620px;"></p>
+
+<p>The best way to use it in our case is to vibrate the phone every time the ball hits the walls — inside the <code>wallCollision</code> function:</p>
+
+<pre class="brush: js">if("vibrate" in window.navigator) {
+    window.navigator.vibrate(100);
+}</pre>
+
+<p>If the <code>vibrate</code> method is supported by the browser and available in the <code>window.navigator</code> object, vibrate the phone for 100 miliseconds. That's it!</p>
+
+<h4 id="Adding_the_elapsed_time">Adding the elapsed time</h4>
+
+<p>To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let’s define the variables in the <code>create</code> function first:</p>
+
+<pre class="brush: js">this.timer = 0; // time elapsed in the current level
+this.totalTimer = 0; // time elapsed in the whole game</pre>
+
+<p>Then, right after that, we can initialize the necessary text objects to display this information to the user:</p>
+
+<pre class="brush: js">this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
+this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);</pre>
+
+<p>We’re defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second:</p>
+
+<pre class="brush: js">this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);</pre>
+
+<p>This loop, also in the <code>create</code> function, will execute the <code>updateCounter</code> function every single second from the beginning of the game, so we can apply the changes accordingly. This is how the complete <code>updateCounter</code> function looks:</p>
+
+<pre class="brush: js">updateCounter: function() {
+    this.timer++;
+    this.timerText.setText("Time: "+this.timer);
+    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
+},</pre>
+
+<p>As you can see we’re incrementing the <code>this.timer</code> variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time.</p>
+
+<h4 id="Finishing_the_level_and_the_game">Finishing the level and the game</h4>
+
+<p>The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let’s set up the possibility to actually finish the level! The following line in the <code>update()</code> function adds a listener that fires when the ball gets to the hole.</p>
+
+<pre class="brush: js">this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);</pre>
+
+<p>This works similarly to the <code>collide</code> method explained earlier. When the ball overlaps with the hole (instead of colliding), the <code>finishLevel</code> function is executed:</p>
+
+<pre class="brush: js">finishLevel: function() {
+    if(this.level &gt;= this.maxLevels) {
+        this.totalTimer += this.timer;
+        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
+        this.game.state.start('MainMenu');
+    }
+    else {
+        alert('Congratulations, level '+this.level+' completed!');
+        this.totalTimer += this.timer;
+        this.timer = 0;
+        this.level++;
+        this.timerText.setText("Time: "+this.timer);
+        this.totalTimeText.setText("Total time: "+this.totalTimer);
+        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
+        this.ball.body.x = this.ballStartPos.x;
+        this.ball.body.y = this.ballStartPos.y;
+        this.ball.body.velocity.x = 0;
+        this.ball.body.velocity.y = 0;
+        this.showLevel();
+    }
+},</pre>
+
+<p>If the current level is equal to the maximum number of levels (in this case 5), then the game is finished — you'll get a congratulations message along with the number of seconds elapsed through the whole game, and a button to press that takes you to the main menu.</p>
+
+<p>If the current level is lower than 5, all the neccesary variables are reset and the next level is loaded.</p>
+
+<h2 id="Ideas_for_new_features">Ideas for new features</h2>
+
+<p>This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There’s also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>I hope this tutorial will help you dive into 2D game development and inspire you to create awesome games on your own. You can play the demo game <a href="http://orb.enclavegames.com/">Cyber Orb</a> and check out its <a href="https://github.com/EnclaveGames/Cyber-Orb">source code on GitHub</a>.</p>
+
+<p>HTML5 gives us raw tools, the frameworks built on top of it are getting faster and better, so now is a great time get into web game development. In this tutorial we used Phaser, but there are a number of <a href="http://html5devstarter.enclavegames.com/#frameworks">other frameworks</a> worth considering too like <a href="http://impactjs.com/">ImpactJS</a>, <a href="https://www.scirra.com/construct2">Construct 2</a> or <a href="http://playcanvas.com/">PlayCanvas</a> — it depends on your preferences, coding skills (or lack thereof), project scale, requirements and other aspects. You should check them all out and decide which one suits your needs best.</p>
diff --git a/files/ru/games/tutorials/index.html b/files/ru/games/tutorials/index.html
new file mode 100644
index 0000000000..2574bf3432
--- /dev/null
+++ b/files/ru/games/tutorials/index.html
@@ -0,0 +1,32 @@
+---
+title: Уроки
+slug: Games/Tutorials
+tags:
+  - Canvas
+  - Games
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+  - Tutorial
+  - Web
+  - Workflows
+  - Игры
+  - уроки
+translation_of: Games/Tutorials
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>Эта страница содержит несколько серий уроков, в которых освещаются различные рабочие процессы для эффективного создания разных типов веб-игр.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D игра Breakout на чистом JavaScript</a></dt>
+ <dd>В этом пошаговом руководстве вы сможете реализовать простой клон игры Breakout с использованием чистого JavaScript. Попутно вы узнаете основы использования элемента {{htmlelement ('canvas')}} для реализации фундаментальной игровой механики, такой как рендеринг и движущиеся изображения, обнаружение столкновения, механизмы управления и выигрышные и проигрышные состояния.</dd>
+ <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D-игра Breakout с использованием Phaser</a></dt>
+ <dd>В этом пошаговом руководстве вы будете использовать тот же самый клон Breakout, что и предыдущая серия уроков, за исключением того, что на этот раз вы сделаете это, используя HTML5 игровой фреймворк<a class="external external-icon" href="http://phaser.io/">Phaser</a>. Идея состоит в том, чтобы научить некоторым основам (и преимуществам) работы с фреймворками наряду с фундаментальной игровой механикой.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D-игра Лабиринт с применением ориентации устройства</a></dt>
+ <dd>В этом учебном пособии показано, как создать 2D-игру Лабиринт с использованием HTML5, включая основы, такие как обнаружение столкновения и размещение спрайтов на {{htmlelement ('canvas')}}. Это мобильная игра, в которой используются <strong>API </strong><a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Ориентация устройства</a> и <a href="/en-US/docs/Web/Guide/API/Vibration">Вибрация </a>для улучшения игрового процесса и построенная с использованием фреймворка <a href="http://phaser.io/">Phaser</a>.</dd>
+ <dt><a href="https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/">2D-игра платформер с использованием Phaser</a></dt>
+ <dd>В этой серии уроков показано, как создать простую платформенную игру с использованием <a href="http://phaser.io/">Phaser</a>, освещаются такие основы, как спрайты, столкновения, физика, коллекции и многое другое.</dd>
+</dl>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/bounce_off_the_walls/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/bounce_off_the_walls/index.html
new file mode 100644
index 0000000000..aedabaaf25
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/bounce_off_the_walls/index.html
@@ -0,0 +1,42 @@
+---
+title: Отскакивания
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Physics", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление")}}</p>
+
+<div class="summary">
+<p>Это <strong>6 урок </strong>из 16 <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">Руководства разработки игры с помощью Phaser</a>. Вы можете найти исходный код того как должен выглядеть код после завершения урока здесь: <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson06.html">Gamedev-Phaser-Content-Kit/demos/lesson06.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Теперь, когда мы познакомились с физикой, мы можем начать реализовывать определение столкновений в игре — сначала посмотрим на "стены".</span></p>
+
+<h2 id="Отскакивание_от_границ_представления">Отскакивание от границ представления</h2>
+
+<p>Самый простой способ заставить мячик от стен это сообщить фреймворку что мы хотим рассматривать границы элемента {{htmlelement("canvas")}} как стены и не позволять мячу проходить через них. В Phaser это может быть просто реализовано с помощью свойства <code>collideWorldsBound</code>. Добавьте этот код сразу после существующего вызова метода <code>game.physics.enable()</code>:</p>
+
+<pre class="brush: js">ball.body.collideWorldBounds = true;
+</pre>
+
+<p>Теперь мяч будет останавливаться у границ экрана, вместо того чтобы исчезать, но он не отскакивает. Чтобы это происодило нам нужно установить его "отскакиваемость". Добавте следующий код ниже предыдущей строки:</p>
+
+<pre class="brush: js">ball.body.bounce.set(1);
+</pre>
+
+<p>Попробуйте перезагрузить index.html опять — теперь мяч отскакивает от стен и движется внутри холста canvas.</p>
+
+<h2 id="Сравните_ваш_код">Сравните ваш код</h2>
+
+<p>Вы можете сравнить получившийся код из этого урока в превью и поиграть с ним, чтобы лучше понять как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/dcw36opz/","","400")}}</p>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>Это начинает больше походить на игру, но мы никак не можем её контролировать — самое время добавить <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/%D0%9F%D0%BB%D0%B0%D1%82%D1%84%D0%BE%D1%80%D0%BC%D0%B0_%D0%B8_%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5">рычаги управления для игрока</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Physics", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/game_over/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/game_over/index.html
new file mode 100644
index 0000000000..a617f8969d
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/game_over/index.html
@@ -0,0 +1,46 @@
+---
+title: Game over
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Game_over
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей")}}</p>
+
+<div class="summary">
+<p>Это <strong>8 </strong>из 16 уроков <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">руководства разработки игры с помощью Phaser</a>. Исходный код этого урока вы можете найти здесь:  <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson08.html">Gamedev-Phaser-Content-Kit/demos/lesson08.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Чтобы разнообразить игру, давайте добавим возможность проигрыша — если вы не отобьете мячик и дадите ему упасть на пол, то game over.</span></p>
+
+<h2 id="Проигрыш">Проигрыш</h2>
+
+<p>Чтобы добавить возможность проигрыша, давай те отключим определение коллизии с нижней гранью экрана. Добавьте следующую строку кода в функцию <code>create()</code>, сразу после кода инициализации всех атрибутов мячика:</p>
+
+<pre class="brush: js">game.physics.arcade.checkCollision.down = false;
+</pre>
+
+<p>Теперь мячик отскакивает только от трёх стен (верхней, левой и правой) и, если не отбить его платформой, проходит сквозь нижнюю стену, выходя за пределы экрана. Осталось только поймать момент выхода мячика за пределы экрана и вывести сообещние о проигрыше. Добавьте эти строки кода сразу после предыдущей:</p>
+
+<pre class="brush: js">ball.checkWorldBounds = true;
+ball.events.onOutOfBounds.add(function(){
+    alert('Game over!');
+    location.reload();
+}, this);
+</pre>
+
+<p>Мы сделали так, чтобы мячик проверял границы игрового мира (в нашем случае границы <code>&lt;canvas&gt;</code>) и, в случае выхода за их пределы (событие <code>onOutOfBounds</code>), выполнял функцию, которую мы привязали к этому событию. После закрытия всплывающего окна с сообщением 'Game over!', происходит перезагрузка страницы, чтобы можно было сыграть снова.</p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/436bckb7/","","400")}}</p>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Базовый геймплей готов. Но какой арканоид без разбивания <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей">кирпичиков</a>? </p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/index.html
new file mode 100644
index 0000000000..05a0439cc7
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/index.html
@@ -0,0 +1,64 @@
+---
+title: 2D игра на Phaser
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
+tags:
+  - 2D
+  - Canvas
+  - JavaScript
+  - Phaser
+  - Игры
+  - Начинающий
+  - Руководство
+  - туториал
+translation_of: Games/Tutorials/2D_breakout_game_Phaser
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/")}}</div>
+
+<p>{{Next("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework")}}</p>
+
+<p class="summary">В этом пошаговом руководстве мы создадим простую мобильную игру <strong>MDN Breakout</strong> с помощью JavaScript и фреймворка <a href="https://phaser.io/">Phaser</a>.</p>
+
+<p>Каждый шаг будет сопровождаться настраиваемым и живым примером для того, чтобы вы могли видеть, что должно получиться на промежуточных этапах создания. Вы узнаете основы для работы с фреймворком Phaser: рендер и движение картинок, определение столкновения, управление, встроенные вспомогательныке функции, анимации и отрисовка кадров, изменение игровой статистки.  </p>
+
+<p>Чтобы получить наибольшую пользу от этого руководства, вам необходимо иметь базовые знания <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>. После прочтения вы научитесь создавать собственные простые веб-игры с помощью Phaser.</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives." src="https://mdn.mozillademos.org/files/11323/mdn-breakout-phaser.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<p>Все уроки и различные версии <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html">MDN Breakout</a>, которые мы сделаем вместе, доступны на <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/">GitHub</a>: </p>
+
+<ol>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework">Инициализация фреймворка</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Scaling">Масштабирование</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen">Загрузка ресурсов и их вывод</a></li>
+ <li><a href="ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball">Движение мяча</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Physics">Физика</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls">Отскакивание от стен</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление">Управление</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over">Конец игры</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей">Создание поля блоков</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Обработка_коллизий">Определение столкновения</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Очки">Счёт</a></li>
+ <li><a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Победа">Победа в игре</a></li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Extra_lives">Добавление жизней</a></li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens">Анимация</a></li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Buttons">Кнопки</a></li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Randomizing_gameplay">Создание случайных событий</a></li>
+</ol>
+
+<p>Также мы хотели бы заметить, что лучший способ научиться создавать веб-игры - это чистый (pure) JavaScript. Если вы ещё не знакомы с разработкой на чистом JavaScript, то мы предлагаем вам первым делом пройти туториал <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">2D игра на чистом JavaScript</a>.</p>
+
+<p>После этого вы можете выбрать любой фреймворк и использовать его в своих проектах. Мы выбрали Phaser, потому что это прочный фреймворк с хорошей поддержкой, открытым сообществом и набором различных плагинов. Фреймворки ускоряют разработку и заботятся о скучных вещах, позволяя вам сосредоточиться на самом весёлом. Однако они не идеальны, так что если что-то пойдёт не так или вы захотите написать функцию, которую фреймворк не поддерживает, то вам пригодятся знания чистого JavaScript.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>Эта серия статей может быть использована, как материал для создания игр в мастерских разработчиков. Также вы можете использовать <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit">Gamedev Phaser Content</a>, который сделан на основе этого руководства, если захотите углубиться в разработку игр с помощью Phaser.</p>
+</div>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>Давайте начнём! Первая часть руководства — это <a href="/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework">Инициализация фреймворка</a>.</p>
+
+<p>{{Next("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/initialize_the_framework/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/initialize_the_framework/index.html
new file mode 100644
index 0000000000..bf1fac5bfc
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/initialize_the_framework/index.html
@@ -0,0 +1,95 @@
+---
+title: Инициализация фреймворка
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework
+tags:
+  - 2D
+  - Canvas
+  - HTML
+  - JavaScript
+  - Phaser
+  - Игры
+  - Руководство
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("ru/docs/")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Scaling")}}</p>
+
+<div class="summary">
+<p>Это первый из 16 уроков о том, как пользоваться <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">Gamedev Phaser</a>. После прочтения вы можете найти исходный код для этого урока на <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson01.html">Gamedev-Phaser-Content-Kit/demos/lesson01.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Перед тем, как мы начнём разрабатывать функционал игры, нам нужно создать базовую структуру, чтобы рендерить её. Это может быть сделано с помощью HTML:  фреймворк Phaser создаст обязательный элемент </span>{{htmlelement("canvas")}}.</p>
+
+<h2 id="HTML-код_игры">HTML-код игры</h2>
+
+<p>Структура HTML-документа достаточно простая. Игра будет отображаться в элементе {{htmlelement("canvas")}}, который будет сгенерирован фреймворком. Используя свой любимый редактор, создайте новый HTML-документ, сохраните его как <code>index.html</code> и добавьте в него следующий код:</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 Phaser Workshop - lesson 01: Initialize the framework&lt;/title&gt;
+    &lt;style&gt;* { padding: 0; margin: 0; }&lt;/style&gt;
+    &lt;script src="js/phaser.min.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script&gt;
+    var game = new Phaser.Game(480, 320, Phaser.CANVAS, null, {
+      preload: preload, create: create, update: update
+    });
+    function preload() {}
+    function create() {}
+    function update() {}
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Загрузка_Phaser">Загрузка Phaser</h2>
+
+<p>Дальше мы должны скачать исходный код фреймворка Phaser и использовать его в нашем HTML-документе. Это руководство использует Phaser V2, который не будет работать с текущей версией Phaser V3. Ссылка на скачивание Phaser V2 доступна в разделе Archive. </p>
+
+<ol>
+ <li>Перейдите на <a href="https://phaser.io/download/release/2.7.6">страницу загрузки Phaser</a>.</li>
+ <li>Выберите наиболее удобный для вас вариант загрузки. Я рекоммендую <em>min.js </em>скачивание, потому что исходный код будет меньше, да и вам не придётся разбираться в нём.</li>
+ <li>Сохраните Phaser внутри <code>/js</code> директории, находящейся в том же месте, что и <code>index.html</code></li>
+ <li>Обновите аттрибут <code>src</code> в первом элементе {{htmlelement("script")}}, как это показано выше.</li>
+</ol>
+
+<h2 id="Что_мы_имеем">Что мы имеем</h2>
+
+<p>На данный момент у нас есть обозначенный <code>charset</code>, {{htmlelement("title")}} и немного CSS, что убрать значения свойств <code>margin</code> и <code>padding</code> по умолчанию. Также мы добавили элемент {{htmlelement("script")}}, который позволяет использовать Phaser на странице. Во втором {{htmlelement("script")}} мы написали код, который позволит отображать игру и управлять ею. </p>
+
+<p>Фреймворк автоматически создаёт элемент {{htmlelement("canvas")}}. Мы инициализировали его, создав новый <code>Phaser.Game</code> объект и присвоив его переменной. Также мы добавили параметры:</p>
+
+<ul>
+ <li><code>width</code> и <code>height</code> устанавливают ширину и высоту {{htmlelement("canvas")}} соответственно.</li>
+ <li>Метод рендеринга. Здесь есть три опции <code>AUTO</code>, <code>CANVAS</code> и <code>WEBGL</code>. Мы можем установить одно из двух последних значений или <code>AUTO</code>, чтобы Phaser сам определил, что использовать. Обычно используется WebGL, но если браузер его не поддерживает, то Canvas 2D.</li>
+ <li><code>id</code> элемнта {{htmlelement("canvas")}} используется для рендеринга, если один {{htmlelement("canvas")}} уже есть (мы установили значение <code>null</code>, чтобы Phaser создал свой собственный).</li>
+ <li>Дальше идут названия трёх ключевых функций Phaser: загрузки (load), старта (start) и обновления (update) игры на каждом кадре; мы выбрали такие же названия, чтобы сохранять чистоту кода.
+  <ul>
+   <li><code>preload</code> заботится о предзагрузке ресурсов игры</li>
+   <li><code>create</code> вызывается только один раз, когда всё загружено и готово</li>
+   <li><code>update</code> вызывается на каждом кадре</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="warning">
+<p><strong>Важно: </strong>До конца прохождения всех уроков вы должны использовать <code>CANVAS</code>, как метод рендеринга, а не <code>AUTO</code>, как это было в нашем коде. Всё это нужно, потому что метод <code>AUTO</code> больше не поддерживается в последних версиях браузера.</p>
+</div>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Это весь исходный код, который мы написали на этом уроке:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/h6cwzv2b/","","400")}}</p>
+
+<h2 id="Следующее">Следующее</h2>
+
+<p>Мы создали базовую HTML структуру и узнали немного об инициализации Phaser. Давайте продолжим и узнаем про <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/Scaling">масштабирование</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Scaling")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/load_the_assets_and_print_them_on_screen/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/load_the_assets_and_print_them_on_screen/index.html
new file mode 100644
index 0000000000..57274a84c0
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/load_the_assets_and_print_them_on_screen/index.html
@@ -0,0 +1,73 @@
+---
+title: Загрузка ресурсов и их вывод
+slug: >-
+  Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen
+tags:
+  - 2D
+  - Canvas
+  - JavaScript
+  - Phaser
+translation_of: >-
+  Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Scaling", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball")}}</p>
+
+<div class="summary">
+<p>Это 3-й урок из 16 в руководстве <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">2D игра на Phaser</a>. Весь исходный код из этого урока вы можете найти на <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson03.html">Gamedev-Phaser-Content-Kit/demos/lesson03.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">В нашей игре будет мяч, который движется по экрану, отскакивает от стен и уничтожает блоки, чтобы заработать очки. Знакомо? В этом уроке мы посмотрим, как добавлять спрайты в наш игровой мир.</span></p>
+
+<h2 id="Создание_мяча">Создание мяча</h2>
+
+<p>Давайте начнём с создания JavaScript переменной для нашего мячика. Добавьте следующий код между строкой инициализации (<code>var game...</code>) и функцией <code>preload()</code>:</p>
+
+<pre class="brush: js">var ball;
+</pre>
+
+<div class="note">
+<p><strong>Примечание: </strong>В этом уроке мы для удобства будем использовать глобальные переменные, потому что цель урока - научить пользоваться Phaser для создания игр, а не хорошим практикам разработки.</p>
+</div>
+
+<h2 id="Загрузка_спрайта_мяча">Загрузка спрайта мяча</h2>
+
+<p>Загрузка и вывод изображений в canvas намного проще с использованием Phaser, чем чистым JavaScript. Чтобы загрузить спрайт, мы будем использовать метод <code>load.image()</code> объекта <code>game</code>. Добавьте новую строку кода в функцию <code>preload()</code>:</p>
+
+<pre class="brush: js">function preload() {
+    // ...
+    game.load.image('ball', 'img/ball.png');
+}
+</pre>
+
+<p>Первым параметром, которому мы хотим присвоить имя картинки, является имя, которое будет использоваться в нашем игровом коде - например, в нашем имени переменной <code>ball</code> - поэтому мы должны убедиться, что оно совпадает. Второй параметр - это относительный путь к самой картинке, мы загружаем спрайт для нашего мяча. (Заметьте, что имя файла (asset) не обязано совпадать с именем переменной, которой оно присваивается, однако так проще).</p>
+
+<p>Конечно, чтобы загрузить картинку, она должна находиться в нашей рабочей директории. <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/ball.png">Скачайте изображение с GitHub</a> и сохраните его в <code>/img</code> директории, которая находится там же, где и файл <code>index.html</code>.</p>
+
+<p>Теперь, чтобы вывести наш мяч на экран, мы используем другой метод <code>add.sprite()</code>. Добавьте следующую строку кода в функцию <code>create()</code>:  </p>
+
+<pre class="brush: js">function create() {
+    ball = game.add.sprite(50, 50, 'ball');
+}
+</pre>
+
+<p>Это метод добавит мяч в игру и выведет его на экран. Первые два параметра — это координаты <code>x</code> и <code>y</code> элемента canvas соответственно, и последний параметр — это имя картинки, которое мы добавили раннее. Вот и всё: загрузите <code>index.html</code>, и вы увидите, что картинка уже загружена и выведена в canvas!</p>
+
+<div class="warning">
+<p><strong>Важно: </strong>Если вы храните ваш JavaScript код отдельно от HTML и используете файл для этого, например, <code>game.js</code>, тогда вам нужно расположить директорию <code>img</code> и JavaScript файл в одной папке, иначе картинка не загрузится. </p>
+</div>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/98xrv9x5/","","400")}}</p>
+
+<h2 id="Следующее">Следующее</h2>
+
+<p>Вывод мяча на экран был достаточно прост, теперь попробуем <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/Move_the_ball">переместить его</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Scaling", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/move_the_ball/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/move_the_ball/index.html
new file mode 100644
index 0000000000..deed4a9494
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/move_the_ball/index.html
@@ -0,0 +1,48 @@
+---
+title: Движение мяча
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball
+tags:
+  - 2D
+  - Beginner
+  - Canvas
+  - JavaScript
+  - Phaser
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Physics")}}</p>
+
+<div class="summary">
+<p>Это <strong>4-й урок </strong>из 16, которые входят в руководство <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">2D игра на Phaser</a>. Вы можете найти исходный код этого урока на <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson04.html">Gamedev-Phaser-Content-Kit/demos/lesson04.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">У нас есть синий мячик на экране, но он ничего не делает, поэтому будет круто, если он начнёт двигаться. В этом уроке мы узнаем, как это сделать.</span></p>
+
+<h2 id="Обновление_позиции_мяча_на_каждом_кадре">Обновление позиции мяча на каждом кадре</h2>
+
+<p>Помните функцию <code>update()</code> и её назначение? Код внутри этой функции выполняется на каждом кадре, так что это идеальное место для кода, который будет обновлять положение нашего мяча. Добавьте следующие строки внутри <code>update()</code>:</p>
+
+<pre class="brush: js">function update() {
+    ball.x += 1;
+    ball.y += 1;
+}
+</pre>
+
+<p>Код выше добавляет <code>1</code> к свойствам <code>x</code> и <code>y</code>, которые отвечают за координаты мяча в canvas на каждом кадре. Перезагрузив <code>index.html</code>, вы должны увидеть, как наш мячик движется. </p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/g1cfp0vv/","","400")}}</p>
+
+<h2 id="Следующее">Следующее</h2>
+
+<p>Дальше мы должны добавить обнаружение столкновения мяча со стенками так, чтобы он отскакивал от них. Для этого нужно несколько строк кода, но дальше будет сложнее, особенно если мы хотим добавить обработку столкновений мяча и платформы. К счастью, Phaser позволяет нам делать всё это проще, чем если бы мы использовали чистый JavaScript.</p>
+
+<p>В любом случае перед тем, как сделать это, мы рассмотрим <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/Physics">физический движок</a> Phaser. </p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Physics")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/physics/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/physics/index.html
new file mode 100644
index 0000000000..20acffa239
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/physics/index.html
@@ -0,0 +1,98 @@
+---
+title: Физика
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Physics
+tags:
+  - 2D
+  - Beginner
+  - Canvas
+  - JavaScript
+  - Phaser
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Physics
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls")}}</p>
+
+<div class="summary">
+<p>Это <strong>5 урок </strong>из 16, которые входят в руководство <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">2D игра на Phaser</a>. Вы можете найти исходный код этого урока на <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson05.html">Gamedev-Phaser-Content-Kit/demos/lesson05.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Для правильного определения столкновений нам необходима физика, и в этом уроке мы покажем, что есть у Phaser на этот счёт, продемонстрировав это на простом примере.</span></p>
+
+<h2 id="Добавление_физики">Добавление физики</h2>
+
+<p>В Phaser есть три разных физических движка: Arcade Physics, P2 и Ninja Physics. Также есть четвёртый Box2D как платный плагин. Для нашей простой игры мы будем использовать Arcade Physics, потому что нам не нужны сложные геометрические вычисления.</p>
+
+<p>Во-первых, инициализируем Arcade Physics в нашей игре. Добавьте метод <code>physics.startSystem()</code> в начале функции <code>create()</code>. Убедитесь, что следующая строка кода находится в самом начале функции <code>create():</code></p>
+
+<pre class="brush: js">game.physics.startSystem(Phaser.Physics.ARCADE);
+</pre>
+
+<p>Во-вторых, нам необходимо добавить мяч в физическую систему, потому что объект, отвечающий за физику в Phaser, не включен по умолчанию. Добавьте следующую строку в конце функции <code>create()</code>: </p>
+
+<pre class="brush: js">game.physics.enable(ball, Phaser.Physics.ARCADE);
+</pre>
+
+<p>В-третьих, теперь мы можем установить значение свойства <code>velocity</code> нашего мяча через <code>body</code>. Добавьте следующую строку снова в конце функции <code>create()</code>:</p>
+
+<pre class="brush: js">ball.body.velocity.set(150, 150);
+</pre>
+
+<h2 id="Удаление_предыдущих_инструкций_при_обновлении">Удаление предыдущих инструкций при обновлении</h2>
+
+<p>Теперь нам надо убрать старый код, который добавлял 1 к координатам x и y в функции update(): </p>
+
+<pre class="brush: js">function update() {
+<s>    ball.x += 1;</s>
+<s>    ball.y += 1;</s>
+}
+</pre>
+
+<p>теперь мы сделали тоже самое, но на физическом движке.</p>
+
+<h2 id="Финальный_код">Финальный код</h2>
+
+<p>Весь код должен выглядеть вот так:</p>
+
+<pre class="brush: js">var ball;
+
+function preload() {
+    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+    game.scale.pageAlignHorizontally = true;
+    game.scale.pageAlignVertically = true;
+    game.stage.backgroundColor = '#eee';
+    game.load.image('ball', 'img/ball.png');
+}
+
+function create() {
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+    ball = game.add.sprite(50, 50, 'ball');
+    game.physics.enable(ball, Phaser.Physics.ARCADE);
+    ball.body.velocity.set(150, 150);
+}
+
+function update() {
+}
+</pre>
+
+<p>Снова перезагрузите index.html. Мячик должен постоянно двигаться в направлении, которое мы задали. На данный момент в физическом движке гравитация (gravity) и трение (friction) имеют нулевое значение. Добавление гравитации заставит мячик падать вниз, пока трение будет пытаться остановить его.</p>
+
+<h2 id="Поиграйте_с_физикой">Поиграйте с физикой</h2>
+
+<p>Вы можете делать гораздо больше вещей с физикой. Например, добавив <code>ball.body.gravity.y = 100</code>, вы установите вертикальную гравитацию для мячика. Как результат он будет сначала запущен вверх, но затем начнёт падать, находясь под действием гравитации.</p>
+
+<p>Это лишь верхушка айсберга: есть огромное количество перменных и функции, с помощью которых вы можете взаимодействовать с физическими объектами. Посмотрите официальную <a href="http://phaser.io/docs/2.6.2/index#physics">документацию</a>, чтобы увидеть огромное количество примеров применения <a href="http://phaser.io/examples/v2/category/arcade-physics">Arcade</a> и <a href="http://phaser.io/examples/v2/category/p2-physics">P2</a>.</p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/bjto9nj8/","","400")}}</p>
+
+<h2 id="Следующее">Следующее</h2>
+
+<p>Теперь мы можем посмотреть, как заставить мяч <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/Bounce_off_the_walls">отскакивать от стен</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/scaling/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/scaling/index.html
new file mode 100644
index 0000000000..395e9f52de
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/scaling/index.html
@@ -0,0 +1,64 @@
+---
+title: Масштабирование
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Scaling
+tags:
+  - 2D
+  - Canvas
+  - JavaScript
+  - Phaser
+  - Начинающий
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Scaling
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen")}}</p>
+
+<div class="summary">
+<p>Это <strong>2-й урок </strong>из 16, которые входят в руководство <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">2D игра на Phaser</a>. Вы можете найти исходный код этого урока на <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson02.html">Gamedev-Phaser-Content-Kit/demos/lesson02.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Масштабирование отвечает за то, как ваша игра будет выглядеть на экранах разных размеров. Мы можем заставить игру масштабироваться под каждый экран автоматически во время стадии предзагрузки (preload), чтобы нам не пришлось волноваться об этом в будущем.</span></p>
+
+<h2 id="Масштабирование">Масштабирование </h2>
+
+<p>В Phaser есть специальный объект <code>scale</code>, которые имеет несколько полезных методов и свойств. Измените вашу функцию <code>preload()</code> так, как показано ниже:</p>
+
+<pre class="brush: js">function preload() {
+    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+    game.scale.pageAlignHorizontally = true;
+    game.scale.pageAlignVertically = true;
+}
+</pre>
+
+<p><code>scaleMode</code> имеет несколько опций, которые определяют, как {{htmlelement("canvas")}} будет масштабироваться:</p>
+
+<ul>
+ <li><code>NO_SCALE</code> — ничего не масштабировать.</li>
+ <li><code>EXACT_FIT</code> — масштабировать с полным заполнением пустого места вертикально и горизонтально, не соблюдая соотношение (aspect ratio).</li>
+ <li><code>SHOW_ALL</code> — масштабирует игру, но сохраняет соотношение так, что картинки не будут искажаться, как и при предыдущем значении. Возможно наличие чёрных полос по краям экрана, но мы можем жить с этим.</li>
+ <li><code>RESIZE</code> — cоздаёт {{htmlelement("canvas")}} с доступными шириной и высотой так, что вы можете помещать объекты в игру динамически; это раширенный режим (advanced mode).</li>
+ <li><code>USER_SCALE</code> — позволяет вам делать динамическое масштабирование, подсчёт размеров, масштаб и соотношение самостоятельно; опять же это расширенный режим.</li>
+</ul>
+
+<p>Две другие строчки кода в функции <code>preload()</code> отвечают за вертикальное и горизонтальное выравнивание элемента {{htmlelement("canvas")}}, так что он всегда будет находиться по центру независимо от размера экрана.</p>
+
+<h2 id="Изменение_цвета_фона">Изменение цвета фона</h2>
+
+<p>Мы также можем сделать фон нашего элемента {{htmlelement("canvas")}} таким, каким захотим, чтобы он не оставался постоянно чёрным. Объект <code>stage</code> имеет свойство <code>backgroundColor</code> для этого. Мы можем изменить значение, используя синтаксис CSS для цветов. Добавьте эту строку после трёх, недавно добавленных: </p>
+
+<pre class="brush: js">game.stage.backgroundColor = '#eee';
+</pre>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете сравнить весь код из этого урока со своим и поиграть с ним, чтобы понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/6a64vecL/","","400")}}</p>
+
+<h2 id="Следующее">Следующее</h2>
+
+<p>Мы научились масштабировать нашу игру, так что давайте перейдём к третьему уроку и узнаем, <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/Load_the_assets_and_print_them_on_screen">как загружать ресурсы игры и выводить их</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/жизни/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/жизни/index.html
new file mode 100644
index 0000000000..b6bb403469
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/жизни/index.html
@@ -0,0 +1,117 @@
+---
+title: Жизни
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Жизни
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Extra_lives
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Победа", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Анимация")}}</p>
+
+<div class="summary">
+<p>Это <strong>12 </strong>из 16 уроков <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">руководства разработки игры с помощью Phaser</a>. Исходный код этого урока вы можете найти здесь:  <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson13.html">Gamedev-Phaser-Content-Kit/demos/lesson13.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Мы можем растянуть удовольствие от игры, добавив жизни. Это позволит игроку сделать несколько попыток, а не одну.</span></p>
+
+<h2 id="Новый_переменные">Новый переменные</h2>
+
+<p>Добавьте следующие переменные сразу после всех наших текущих опеределений переменных:</p>
+
+<pre class="brush: js notranslate">var lives = 3;
+var livesText;
+var lifeLostText;
+</pre>
+
+<p>Эти переменные хранят, соответственно, количество жизней, надпись с количеством оставшихся жизней, и надпись, которая выведется на экран, если игрок потеряет жизнь.</p>
+
+<h2 id="Определяем_новые_надписи">Определяем новые надписи</h2>
+
+<p>Надписи мы уже определяли, когда реализовывали систему <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/%D0%9E%D1%87%D0%BA%D0%B8">очков</a>. Добавьте следующие строки кода в после определения надписи <code>scoreText</code> в функции <code>create()</code>:</p>
+
+<pre class="brush: js notranslate">livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' });
+livesText.anchor.set(1,0);
+lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', { font: '18px Arial', fill: '#0095DD' });
+lifeLostText.anchor.set(0.5);
+lifeLostText.visible = false;
+</pre>
+
+<p>Объекты <code>livesText</code> и<code>lifeLostText</code> очень похожи на <code>scoreText</code> — они определяют положение на экране, текст надписи и стилизацию шрифта. Чтобы всё выглядило должным образом, надпись с жизнями мы закрепляем в правом верхнем углу, а надпись о потере жизни, мы выводим в центре экрана. И всё это при помощи функции <code>anchor.set()</code>.</p>
+
+<p>Надпись <code>lifeLostText</code> появится только при потере жизни, поэтому её видимость мы выставляем в <code>false</code>.</p>
+
+<h3 id="Чистим_код_стилизирующий_надписи">Чистим код, стилизирующий надписи</h3>
+
+<p>Как вы могли заметить, мы используем одинаковые стили для всех надписей: <code>scoreText</code>, <code>livesText</code> и <code>lifeLostText</code>. Однако, налицо копирование кода и если мы, когда-либо, захотим изменить размер шрифта или цвет, то нам придётся делать это в нескольких местах. Чтобы избежать этого, мы вынесем стиль в отдельную переменную. Напишите следующую строку сразу после всех наших текущих опеределений переменных:</p>
+
+<pre class="brush: js notranslate">var textStyle = { font: '18px Arial', fill: '#0095DD' };
+</pre>
+
+<p>Теперь мы можем использовать эту переменную для нашего текста — обновите ваш код и замените повторяющиеся участки со стилем текста на переменную.</p>
+
+<pre class="brush: js notranslate">scoreText = game.add.text(5, 5, 'Points: 0', textStyle);
+livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, textStyle);
+livesText.anchor.set(1,0);
+lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', textStyle);
+lifeLostText.anchor.set(0.5);
+lifeLostText.visible = false;
+</pre>
+
+<p>Теперь, чтобы изменить стиль всего текста в игре, достаточно изменить только эту переменную.</p>
+
+<h2 id="Код_обработки_жизни">Код обработки жизни</h2>
+
+<p>Чтобы реализовать жизнь в нашей игре, давайте сначала изменим функцию шара, связанную с событием <code>onOutOfBounds</code>. Вместо того, чтобы выполнять анонимную функцию и сразу показывать сообщение:</p>
+
+<pre class="brush: js notranslate"><s>ball.events.onOutOfBounds.add(function(){
+    alert('Game over!');
+    location.reload();
+}, this);</s>
+</pre>
+
+<p>Мы объявим новую функцию <code>ballLeaveScreen</code>; Удалим предыдущий обработчик (зачёркнутый код сверху) и заменим его следующей линией:</p>
+
+<pre class="brush: js notranslate">ball.events.onOutOfBounds.add(ballLeaveScreen, this);
+</pre>
+
+<p>Мы будем уменьшать количество жизней каждый раз, когда шар выйдет за пределы окна Canvas. Добавьте функцию <code>ballLeaveScreen()</code> в конец кода:</p>
+
+<pre class="brush: js notranslate">function ballLeaveScreen() {
+    lives--;
+    if(lives) {
+        livesText.setText('Lives: '+lives);
+        lifeLostText.visible = true;
+        ball.reset(game.world.width*0.5, game.world.height-25);
+        paddle.reset(game.world.width*0.5, game.world.height-5);
+        game.input.onDown.addOnce(function(){
+            lifeLostText.visible = false;
+            ball.body.velocity.set(150, -150);
+        }, this);
+    }
+    else {
+        alert('You lost, game over!');
+        location.reload();
+    }
+}
+</pre>
+
+<p>Вместо того, чтобы сразу вызывать сообщение, когда мяч выходит за пределы Canvas, мы сначала вычитаем одну жизнь из текущего числа и проверяем, не равно ли оно нулю. Если не равно, то у игрока все еще осталось несколько жизней, и он может продолжать играть - он увидит сообщение о потере жизни, позиции мяча и платформы будут сброшены и при следующем клике мышью сообщение будет скрыто и мяч снова начнет двигаться.</p>
+
+<p>Когда количество жизней достигнет нуля игра заканчивается, а игроку показывается соответствующее сообщение.</p>
+
+<h2 id="События">События</h2>
+
+<p>Скорее всего вы заметили вызов методов <code>add()</code> и <code>addOnce()</code> в двух блоках кода выше и хотите знать, чем они отличаются. Разница в том, что метод <code>add()</code>  и привязанная к нему функция выполняется каждый раз, когда выполняется событие, тогда как метод  <code>addOnce() </code>полезен, когда вы хотите, чтобы связанная с ним функция выполнилась единожды и не повторялась снова. В нашем случае при каждом событии <code>outOfBounds</code> будет выполняться <code>ballLeaveScreen</code>, но когда мяч покидает экран, сообщение с экрана удалится единожды.</p>
+
+<h2 id="Проверь_свой_код">Проверь свой код</h2>
+
+<p>Вы можете проверить готовый код этого урока в его демо-версии и поиграть с ним чтобы лучше понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/yk1c5n0b/","","400")}}</p>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут еще 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать ее более красивой, добавив <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">анимацию и эффекты </a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/обработка_коллизий/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/обработка_коллизий/index.html
new file mode 100644
index 0000000000..e3fb27724b
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/обработка_коллизий/index.html
@@ -0,0 +1,52 @@
+---
+title: Обработка коллизий
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Обработка_коллизий
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Очки")}}</p>
+
+<div class="summary">
+<p>Это <strong>10 </strong>из 16 уроков <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">руководства разработки игры с помощью Phaser</a>. Исходный код этого урока вы можете найти здесь:  <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson10.html">Gamedev-Phaser-Content-Kit/demos/lesson10.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Наша текущая задач — проверка коллизий между мячиком и кирпичами. К счастью, при помощи движка, мы можем проверить коллизии не только между двумя объектами (как это было с мячиком и платформой), но и между объектом и набором других объектов.</span></p>
+
+<h2 id="Проверяем_коллизии_МячикКирпич">Проверяем коллизии Мячик/Кирпич</h2>
+
+<p>Физический движок облегчает очень многие задачи — нам понадобится, всего лишь, несколько простых кусочков кода. Для начала, добавим в функцию <code>update()</code> строчку проверки коллизий между мячиком и кирпичами, как показано ниже:</p>
+
+<pre class="brush: js">function update() {
+    game.physics.arcade.collide(ball, paddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    paddle.x = game.input.x || game.world.width*0.5;
+}
+</pre>
+
+<p>Теперь будет отслеживаться положение мячика, относительно всех кирпичей из набора <code>bricks</code>. Третьим (опциальным) параметром, мы передаём функцию, которая будет выполняться каждый раз, когда будет найдена коллизия — <code>ballHitBrick</code>. Давайте создадим эту функцию в самом конце нашего кода, прямо перед <code>&lt;/script&gt;</code>:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+}
+</pre>
+
+<p>Вот и всё! Перезагрузите страницу и вы увидите, что все коллизии обрабатывается, как следует.</p>
+
+<p>Спасибо Phaser за то, что передал нам в функцию эти два параметра — мячик и тот кирпич, с которым у мячика произошла коллизия. А дальше мы просто удаляем кирпчи с экрана, вызвав у него функцию <code>kill()</code>.</p>
+
+<p>Вы думали, что нам придётся писать много кода для отслеживания коллизий, как мы это делали на <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">чистом JavaScript</a>? В этом и прелесть фреймворков — рутину они сделают за нас, а мы, в это время, можем сосредоточиться на действительно интересных вещах.</p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/wwneakwf/","","400")}}</p>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Теперь мы можем разбивать кирпичи, а это уже отличное дополнение к нашему геймплею. Будет ещё лучше, если мы сможем считать количество разбитых кирпичей и присуждать за это <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/%D0%9E%D1%87%D0%BA%D0%B8">очки</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Очки")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/очки/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/очки/index.html
new file mode 100644
index 0000000000..9f4b18ace1
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/очки/index.html
@@ -0,0 +1,69 @@
+---
+title: Очки
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Очки
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/The_score
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Обработка_коллизий", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Победа")}}</p>
+
+<div class="summary">
+<p>Это <strong>11 </strong>из 16 уроков <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">руководства разработки игры с помощью Phaser</a>. Исходный код этого урока вы можете найти здесь:  <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson11.html">Gamedev-Phaser-Content-Kit/demos/lesson11.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Очки сделают игру более интересной — вы можете пробовать побить собственный рекорд или рекорд друзей. В этой главе мы добавим систему очков в нашу игру.</span></p>
+
+<p>Мы будем использовать отдельные переменные для хранения количества очков и текста, который Phaser выведет на экран при помощи функции <code>text()</code>.</p>
+
+<h2 id="Определим_переменные">Определим переменные</h2>
+
+<p>Добавьте две новых переменных после всех наших текущих опеределений переменных:</p>
+
+<pre class="brush: js">// ...
+var scoreText;
+var score = 0;
+</pre>
+
+<h2 id="Выводим_очки_на_экран">Выводим очки на экран</h2>
+
+<p>А сейчас добавим строку кода в самый конец функции <code>create()</code>:</p>
+
+<pre class="brush: js">scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });
+</pre>
+
+<p>Функция <code>text()</code> может принимать четыре параметра:</p>
+
+<ul>
+ <li>Координаты x и y текста.</li>
+ <li>Сам текст.</li>
+ <li>Шрифт и стиль текста.</li>
+</ul>
+
+<p>Последний параметр выглядит очень похожим на CSS-стиль. В нашем случае, текст будет голубой, размер 18 пикселей, шрифт Arial.</p>
+
+<h2 id="Обновляем_очки_при_разрушении_кирпича">Обновляем очки при разрушении кирпича</h2>
+
+<p>Мы будем увеличивать количество очков каждый раз, когда мячик разобьёт кирпич и обновлять текст <code>scoreText</code>, который отображает на экране текущие очки. Текст обновляется вызовом функции <code>setText()</code>. Добавьте эти две строчки кода в функцию <code>ballHitBrick()</code>:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+}
+</pre>
+
+<p>Вот и всё — обновите страницу <code>index.html</code> и проверьте, как очки изменяются, при разрушении кирпича.</p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/n8o6rhrf/","","400")}}</p>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Теперь мы имеем систему очков, но какой смысл в этом, если мы не можем выиграть? Давайте добавим логику <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/%D0%9F%D0%BE%D0%B1%D0%B5%D0%B4%D0%B0">выигрыша</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Обработка_коллизий", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Победа")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/платформа_и_управление/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/платформа_и_управление/index.html
new file mode 100644
index 0000000000..46713cdddb
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/платформа_и_управление/index.html
@@ -0,0 +1,116 @@
+---
+title: Платформа и управление
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over")}}</p>
+
+<div class="summary">
+<p>Это <strong>7 </strong>из 16 уроков <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">руководства разработки игры с помощью Phaser</a>. Исходный код этого урока вы можете найти здесь: <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson07.html">Gamedev-Phaser-Content-Kit/demos/lesson07.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Теперь, когда мы научили мячик двигаться и отскакивать от стен, давайте добавим немного геймплея. В этой главе мы создадим платформу-ракетку, которой будем отбивать наш мячик.</span></p>
+
+<h2 id="Рисуем_платформу">Рисуем платформу</h2>
+
+<p>С точки зрения фреймворка, платформа и мячик не сильно различаются - нам так же понадобится переменная для платформы, спрайт и немного магии.</p>
+
+<h3 id="Создаем_платформу">Создаем платформу</h3>
+
+<p>Сначала, добавим переменную <code>paddle</code>, сразу после переменной <code>ball</code>:</p>
+
+<pre class="brush: js">var paddle;
+</pre>
+
+<p>После этого, в функции <code>preload</code>, загрузим изображение <code>paddle</code> при помощи ещё одного вызова функции <code>load.image()</code>:</p>
+
+<pre class="brush: js">function preload() {
+    // ...
+    game.load.image('ball', 'img/ball.png');
+    game.load.image('paddle', 'img/paddle.png');
+}
+</pre>
+
+<h3 id="Добавляем_графику_для_платформы">Добавляем графику для платформы</h3>
+
+<p>Чуть не забыли, на этом этапе нам надо скачать <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/paddle.png">изображение платформы с Github</a> в папку <code>/img</code>.</p>
+
+<h3 id="Рисуем_платформу_с_физикой">Рисуем платформу с физикой</h3>
+
+<p>Далее, мы инициализируем спрайт нашей платформы при помощи функции <code>add.sprite()</code> — добавьте следующую строку кода в самый конец функции <code>create()</code>:</p>
+
+<pre class="brush: js">paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle');
+</pre>
+
+<p>Мы можем использовать <code>world.width</code> и <code>world.height</code> для позиционирования платформы в том месте, где мы хотим: <code>game.world.width*0.5</code> расположит платформу прямо по середине экрана. В данном случае, нам повезло, что наш игровой мир совпадает с <code>&lt;canvas&gt;</code>, однако, в других играх мир может быть гараздо больше экрана. </p>
+
+<p>Как вы могли заметить, перезагрузив, на данном этапе, страницу <code>index.html</code>, платформа находится не совсем по середине экрана. Почему? Всё дело в том, что, по умолчанию, точка, из которой начинается позиционирование объекта (якорь), находится в левом верхнем углу. Но мы можем это изменить и переместить якорь в середину платформы по ширине и в самый низ повысоте, чтобы проще было позиционировать платформу, относительно нижней грани экрана. Добавьте следующую строку кода:</p>
+
+<pre class="brush: js">paddle.anchor.set(0.5,1);
+</pre>
+
+<p>Платформу расположили там, где и хотели. Теперь, чтобы платформа могла взаимодействовать с мячиком, добавим ей физику. Добавьте следующую строку кода в самый низ функции <code>create()</code>:</p>
+
+<pre class="brush: js">game.physics.enable(paddle, Phaser.Physics.ARCADE);
+</pre>
+
+<p>Вот и настало время для магии - фреймворк сам позаботится о проверке столкновений (коллизий) в каждом кадре. Для того, чтобы включить проверку коллизий между платформой и мячиком, вызовите функцию <code>collide()</code> в функции <code>update()</code> как показано ниже:</p>
+
+<pre class="brush: js">function update() {
+    game.physics.arcade.collide(ball, paddle);
+}
+</pre>
+
+<p>В качестве аргументов, мы передаём два объекта, между которыми проверяются коллизии — в нашем случае, мячик и платформа. Вроде, сработало, но не совсем так, как мы ожидали — когда мячик сталкивается с платформой, последняя падает за пределы экрана! А мы, всего лишь, хотим, чтобы мячик отскакивал от платформы, а платформа, при этом, оставалась на месте. Мы можем использовать свойство <code>immovable</code>, для того, чтобы платформа не двигалась, когда мячик бьётся об неё. Для этого добавьте следующую строку кода в конец функции <code>create()</code>:</p>
+
+<pre class="brush: js">paddle.body.immovable = true;
+</pre>
+
+<p>Вот! Теперь всё работает, как надо.</p>
+
+<h2 id="Управляем_платформой">Управляем платформой</h2>
+
+<p>Следующая проблема заключается в том, что мы не можем двигать платформу. Чтобы сделать это мы можем воспользоваться вводом <code>input</code> (мышь или сенсорный экран, в зависимости от платформы) и расположить нашу плаформу в месте расположения курсора. Добавьте следующую строку кода в функцию <code>update()</code>, как показано ниже:</p>
+
+<pre class="brush: js">function update() {
+    game.physics.arcade.collide(ball, paddle);
+    paddle.x = game.input.x;
+}
+</pre>
+
+<p>Теперь, каждый кадр координата <code>x</code> платформы будет соответствовать координате <code>x</code> курсора. Однако, при старте игры, положение нашей платформы не по центру экрана, из-за того, что положение курсора не определено. Чтобы это исправить, давайте добавим платформе координату <code>x</code> по умолчанию, на случаей, если положение курсора не определено. Обновите предыдущую строку кода:</p>
+
+<pre class="brush: js">paddle.x = game.input.x || game.world.width*0.5;
+</pre>
+
+<p>Если вы этого ещё не сделали, то обновите страницу <code>index.html</code> и попробуйте то, что у нас получилось!</p>
+
+<h2 id="Расположение_мячика">Расположение мячика</h2>
+
+<p>Теперь давайте разместим мячик на платформе. Так же, как и платформу, расположим мячик по середине экрана по горизонтали, с небольшим отступом от нижней грани экрана по вертикали. Для этого переместим якорь мячика в его середину. Найдите строку <code>ball <span class="keyword operator">=</span> game.add.</code><span class="call function"><code>sprite( ... )</code> и заметите её на следующие две:</span></p>
+
+<pre class="brush: js">ball = game.add.sprite(game.world.width*0.5, game.world.height-25, 'ball');
+ball.anchor.set(0.5);</pre>
+
+<p>Скорость оставим такую же, но изменим направление по оси <code>y</code>, изменив второй параметр со 150 на -150, и теперь мяч будет двигаться вверх. Найдите строку <code>ball.body.velocity.set( ... )</code> и измените её, как показано ниже:</p>
+
+<pre class="brush: js">ball.body.velocity.set(150, -150);
+</pre>
+
+<p>Теперь мячик появляется по середине платформы и двигается вверх.</p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/ogqza0ye/","","400")}}</p>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Мы можем управлять платформой и сделали так, чтобы мячик отскакивал от неё. Но какой от этого толк, если мячик отскакивает и от нижней грани экрана? В следующей главе мы добавим <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over">логику проигрыша и экран "Game over"</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/победа/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/победа/index.html
new file mode 100644
index 0000000000..21ff763bbf
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/победа/index.html
@@ -0,0 +1,54 @@
+---
+title: Победа
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Победа
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Win_the_game
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Очки", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Жизни")}}</p>
+
+<div class="summary">
+<p>Это <strong>12 </strong>из 16 уроков <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">руководства разработки игры с помощью Phaser</a>. Исходный код этого урока вы можете найти здесь:  <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson12.html">Gamedev-Phaser-Content-Kit/demos/lesson12.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Победа в нашей игре будет достаточно простой: если ты разрушил все кирпичи, то победил.</span></p>
+
+<h2 id="Как_победить">Как победить?</h2>
+
+<p>Добавьте следующий код в функцию <code>ballHitBrick()</code>:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+
+    var count_alive = 0;
+    for (i = 0; i &lt; bricks.children.length; i++) {
+      if (bricks.children[i].alive == true) {
+        count_alive++;
+      }
+    }
+    if (count_alive == 0) {
+      alert('You won the game, congratulations!');
+      location.reload();
+    }
+}
+</pre>
+
+<p>Чтобы перебрать все кирпичи в наборе, необходимо обратиться к полю <code>bricks.children</code>. Найдём все неразрушенные кирпичи, проверяя поле <code>alive</code> у каждого кирпича и, если все кирпичи разрушены, выведем всплывающее окно с текстом о победе. После закрытия этого окна, страница перезагрузится.</p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:</p>
+
+
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/u8waa4Lx/1/","","400")}}</p>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Логику прогрыша и выигрыша мы сделали, так что, основная часть игры готова. Теперь давайте добавим какую-нибудь фишку — дадим игроку три <a href="Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Жизни">жизни</a>, вместо одной.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Очки", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Жизни")}}</p>
diff --git a/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/создание_кирпичей/index.html b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/создание_кирпичей/index.html
new file mode 100644
index 0000000000..ffdd6c1d6d
--- /dev/null
+++ b/files/ru/games/tutorials/создание_2d_breakout_игры_на_phaser/создание_кирпичей/index.html
@@ -0,0 +1,156 @@
+---
+title: Создание кирпичей
+slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Обработка_коллизий")}}</p>
+
+<div class="summary">
+<p>Это <strong>9 </strong>из 16 уроков <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">руководства разработки игры с помощью Phaser</a>. Исходный код этого урока вы можете найти здесь:  <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson09.html">Gamedev-Phaser-Content-Kit/demos/lesson09.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">Создать поле кирпичей немного сложнее, чем просто добавить объект на экран, но всё же, благодаря Phaser, нам будет полегче, по сравнению с чистым JavaScript. Давайте разберёмся, как создать набор кирпичей и нарисовать их всех, используя цикл.</span></p>
+
+<h2 id="Определяем_переменные">Определяем переменные</h2>
+
+<p>Сначала, давайте определим необходимые переменные — добавьте следующий код ниже всех наших текущих опеределений переменных:</p>
+
+<pre class="brush: js">var bricks;
+var newBrick;
+var brickInfo;
+</pre>
+
+<p>Переменная <code>bricks</code> будет использоваться в качестве набора кирпичей, <code>newBrick</code> будет тем самым кирпичем, который мы будем создавать в каждой итерации цикла и добавлять в набор, а в <code>brickInfo</code> будет хранить всю необходимую информацию о кирпичах, как таковых.</p>
+
+<h2 id="Добавляем_графику_для_кирпича">Добавляем графику для кирпича</h2>
+
+<p>Далее, давайте загрузим изображение кирпича <code>brick</code>, при помощи ещё одного вызова функции <code>load.image()</code>:</p>
+
+<pre class="brush: js">function preload() {
+    // ...
+    game.load.image('brick', 'img/brick.png');
+}
+</pre>
+
+<p>Не забудьте скачать <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/img/brick.png" rel="noopener">изображение кирпича с Github</a> в папку <code>/img</code>.</p>
+
+<h2 id="Рисуем_кирпичи">Рисуем кирпичи</h2>
+
+<p>Для удобства, давайте вынесем код отрисовки кирпичей в отдельную функцию <code>initBricks</code> и вызовем её в конце функции <code>create()</code>:</p>
+
+<pre class="brush: js">function create(){
+    // ...
+    initBricks();
+}
+</pre>
+
+<p>Теперь перейдём непосредственно к самой функции. Добавим функцию <code>initBricks()</code> в самый конец нашего кода, прямо перед <code>&lt;/script&gt;</code>, а в теле этой функции опишем объект <code>brickInfo</code>, который нам скоро понадобится:</p>
+
+<pre class="brush: js">function initBricks() {
+    brickInfo = {
+        width: 50,
+        height: 20,
+        count: {
+            row: 3,
+            col: 7
+        },
+        offset: {
+            top: 50,
+            left: 60
+        },
+        padding: 10
+    };
+}
+</pre>
+
+<p>Объект <code>brickInfo</code> содержит всю необходимую нам информацию о кирпичах: ширина и высота кирпичика, количество рядов и столбцов кирпичей, которые мы хотим отрисовать на игровом поле, отступы от левого и верхнего края экрана (место на &lt;canvas&gt;, откуда мы начнём располагать кирпичи) и зазоры между самими кирпичами.</p>
+
+<p>А теперь, собственно, к кирпичам — инициализируйте пустой набор для хранения кирпичей, путём добавления следующей строчки кода в функцию <code>initBricks()</code>:</p>
+
+<pre class="brush: js">bricks = game.add.group();
+</pre>
+
+<p>Далее переберём в цикле ряды и столбцы — добавьте следующий код со вложенным циклом после предыдущей строки:</p>
+
+<pre class="brush: js">for(c=0; c&lt;brickInfo.count.col; c++) {
+    for(r=0; r&lt;brickInfo.count.row; r++) {
+        // create new brick and add it to the group
+    }
+}
+</pre>
+
+<p>Теперь необходимо в каждой итерации создавать кирпич, чтобы получить необходимое число кирпичей, нарисовать их всех на экране и добавить в наш набор <code>bricks</code>. Для этого добавим во вложенный цикл немного кода, как показано ниже:</p>
+
+<pre class="brush: js">for(c=0; c&lt;brickInfo.count.col; c++) {
+    for(r=0; r&lt;brickInfo.count.row; r++) {
+        var brickX = 0;
+        var brickY = 0;
+        newBrick = game.add.sprite(brickX, brickY, 'brick');
+        game.physics.enable(newBrick, Phaser.Physics.ARCADE);
+        newBrick.body.immovable = true;
+        newBrick.anchor.set(0.5);
+        bricks.add(newBrick);
+    }
+}
+</pre>
+
+<p>Вот мы и создали новый кирпич в каждой итерации и отрисовали его на экране. Как мы помним из <a href="/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/Physics">урока 5</a>, мы используем движок Arcade Physics. К каждому новому кирпичу применяем физику из этого движка и делаем его неподвижным, чтобы мячик его не сбивал, а, также, устанавливаем якорь кирпича в его середину. После этого, добавляем кирпич в набор <code>bricks</code>.</p>
+
+<p>Но у нас осталась проблема — все кирпичи мы рисуем в одном и том же месте, в координатах (0,0). Чтобы это исправить, давайте добавим вычисление координат <code>brickX</code> и <code>brickY</code> в каждой итерации. Обновите строки инициализации этих переменных, как показано ниже:</p>
+
+<pre class="brush: js">var brickX = (c*(brickInfo.width+brickInfo.padding))+brickInfo.offset.left;
+var brickY = (r*(brickInfo.height+brickInfo.padding))+brickInfo.offset.top;
+</pre>
+
+<p>Координата <code>x</code> каждого кирпича рассчитывается на основе суммы ширины кирпича <code>brickInfo.width</code> и зазора <code>brickInfo.padding</code>, умноженной на номер столбца <code>с</code>, после этого добавляем отступ от левого края <code>brickInfo.offset.left</code>; Рассчёт <code>y</code> аналогичен, только используются номер ряда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">r</span></font>, высота кирпича <code>brickInfo.height</code> и отступ от верхнего края <code>brickInfo.offset.top</code>. Вот теперь каждый кирпич на своём месте, с учётом всех отступов и зазоров.</p>
+
+<h2 id="Проверяем_код_функции_initBricks()">Проверяем код функции initBricks()</h2>
+
+<p>Вот итоговый код функции <code>initBricks()</code>:</p>
+
+<pre class="brush: js">function initBricks() {
+    brickInfo = {
+        width: 50,
+        height: 20,
+        count: {
+            row: 3,
+            col: 7
+        },
+        offset: {
+            top: 50,
+            left: 60
+        },
+        padding: 10
+    }
+    bricks = game.add.group();
+    for(c=0; c&lt;brickInfo.count.col; c++) {
+        for(r=0; r&lt;brickInfo.count.row; r++) {
+            var brickX = (c*(brickInfo.width+brickInfo.padding))+brickInfo.offset.left;
+            var brickY = (r*(brickInfo.height+brickInfo.padding))+brickInfo.offset.top;
+            newBrick = game.add.sprite(brickX, brickY, 'brick');
+            game.physics.enable(newBrick, Phaser.Physics.ARCADE);
+            newBrick.body.immovable = true;
+            newBrick.anchor.set(0.5);
+            bricks.add(newBrick);
+        }
+    }
+}
+</pre>
+
+<p>Если вы перезапустите страницу <code>index.html</code>, то увидете кирпичи, нарисованные на расстоянии друг от друга.</p>
+
+<h2 id="Сравните_свой_код">Сравните свой код</h2>
+
+<p>Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/cck2b9e8/","","400")}}</p>
+
+<h2 id="Следующий_шаг">Следующий шаг</h2>
+
+<p>Кажется, что-то не так. Ах да! Мячик же проходит сквозь кирпичи. Добавим <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0_%D0%BA%D0%BE%D0%BB%D0%BB%D0%B8%D0%B7%D0%B8%D0%B9">обработку коллизий</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Обработка_коллизий")}}</p>