unslug ru: move

14 files changed, 1094 insertions, 0 deletions

diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html
new file mode 100644
index 0000000000..aedabaaf25
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_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_game_phaser/build_the_brick_field/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.html
new file mode 100644
index 0000000000..ffdd6c1d6d
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/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>
diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html
new file mode 100644
index 0000000000..e3fb27724b
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/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_game_phaser/extra_lives/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html
new file mode 100644
index 0000000000..b6bb403469
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/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_game_phaser/game_over/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.html
new file mode 100644
index 0000000000..a617f8969d
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_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_game_phaser/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/index.html
new file mode 100644
index 0000000000..05a0439cc7
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_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_game_phaser/initialize_the_framework/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html
new file mode 100644
index 0000000000..bf1fac5bfc
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_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_game_phaser/load_the_assets_and_print_them_on_screen/index.html b/files/ru/games/tutorials/2d_breakout_game_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_game_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_game_phaser/move_the_ball/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html
new file mode 100644
index 0000000000..deed4a9494
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_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_game_phaser/physics/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html
new file mode 100644
index 0000000000..20acffa239
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_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_game_phaser/player_paddle_and_controls/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.html
new file mode 100644
index 0000000000..46713cdddb
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/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_game_phaser/scaling/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html
new file mode 100644
index 0000000000..395e9f52de
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_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_game_phaser/the_score/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/the_score/index.html
new file mode 100644
index 0000000000..9f4b18ace1
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/the_score/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_game_phaser/win_the_game/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html
new file mode 100644
index 0000000000..21ff763bbf
--- /dev/null
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/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>