initial commit

38 files changed, 4298 insertions, 0 deletions

diff --git a/files/ru/games/index.html b/files/ru/games/index.html
new file mode 100644
index 0000000000..68b713c1bb
--- /dev/null
+++ b/files/ru/games/index.html
@@ -0,0 +1,102 @@
+---
+title: Разработка игр
+slug: Games
+tags:
+  - Игры
+  - Приложения
+  - геймдев
+translation_of: Games
+---
+<div>{{GamesSidebar}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">Игры являются одной из наиболее популярных компьютерных тем. С постоянным ростом новых технологий становится возможной разработка более мощных и красочных игр, которые можно запустить в любом современном браузере.</span></p>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Введение_в_разработку_web_игр">Введение в разработку web игр</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Introduction" title="/en-US/docs/Games/Introduction">Введение в разработку игр для Web</a></dt>
+ <dd>Ознакомление с технологиями, полезными для разработчиков игр, а также - как начать разработку игр, используя Web-технологии. Эта статья также рассматривает бизнес-кейс для создания web-игр.</dd>
+ <dt><a href="/en-US/docs/Games/Anatomy_of_a_vIdeo_game">Анатомия видео игр</a></dt>
+ <dd>Что такое видео игры на самом деле? Есть определенные вещи, которые являются общими для всех игр (даже если, на первый взгляд, так и не кажется). Данная статья попытается объяснить такие понятия, как основные циклы, в совершенно общем контексте. При этом она все равно соответствует веб-стандартам.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Developing/Games/Special_considerations">Особые обсуждения для разработчиков игр</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Эта статья</span> <span>из</span> <span>App</span> <span>Center</span> <span>бегло рассматривает</span> <span>вещи</span><span>, которые необходимо учитывать</span> <span>при попытке</span> <span>создать игру, которая</span> <span>будет работать</span> <span>как открытое</span> <span>веб-приложение</span><span>.</span></span></dd>
+</dl>
+
+<h2 id="Дополнительные_ресурсы">Дополнительные ресурсы</h2>
+
+<dl>
+ <dt><a href="http://buildnewgames.com/">Создание Новых Игр</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Совместный</span> <span>сайт</span> <span>с участием</span> <span>большого количества</span> <span>открытых</span> <span>веб-</span><span>обучающих программ</span> по <span>разработке игр</span><span>.</span> <span>Не</span> <span>очень активно</span> <span>в последнее время,</span> <span>но все же</span> <span>содержит несколько</span> <span>хороших</span> <span>ресурсов</span><span>.</span></span></dd>
+ <dt><a href="http://creativejs.com/">Creative JS</a></dt>
+ <dd>Коллекция впечатляющих JavaScript методов и экспериментов, не специфичных для игр, но тем не менее полезных. <span id="result_box" lang="ru"><span>Не</span> <span>очень активно</span> <span>в последнее время,</span> <span>но все же</span> <span>содержит несколько</span> <span>хороших</span> <span>ресурсов</span><span>.</span></span></dd>
+ <dt><a href="http://gameprogrammingpatterns.com/">Шаблоны программирования игр</a></dt>
+ <dd>Онлайн-книга, написанная Bob Nystrom, которая рассказывает о шаблонах программирования в контексте разработки игр с целью помочь разработчикам создавать более эффективный, рациональный код.</dd>
+ <dt><a href="http://blog.artillery.com/">Artillery blog</a></dt>
+ <dd><span id="result_box" lang="ru"><span>В играх HTML5 компании Artillery есть несколько полезных статей в своем блоге.</span></span></dd>
+ <dt><a href="https://leanpub.com/buildinggamesforfirefoxos/">Создание игр для Firefox OS</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Краткое руководство по созданию 2D-игр с HTML5 для распространения на Firefox и других мобильных платформах.</span></span></dd>
+ <dt><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Еженедельная информационная бюллетень о разработке HTML5 игр, которая высылается каждую пятницу.</span> <span>Содержит последние статьи, руководства, инструменты и ресурсы.</span></span></dd>
+ <dt><a href="http://www.html5gamedevs.com/">HTML5 Game Devs Forum</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Форумы для разработчиков, создателей фреймворков и издателей.</span> <span>Задавайте вопросы, получайте отзывы, помогайте другим.</span></span></dd>
+ <dt><a href="http://html5gameengine.com/">HTML5 Game Engine</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Список наиболее популярных игровых фреймворков HTML5, их рейтинг, функции и примеры.</span></span></dd>
+ <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Сравните JavaScript клоны Breakout в разных средах, чтобы помочь вам выбрать правильный для вас.</span></span></dd>
+ <dt><a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a></dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span>Учебные пособия и статьи о развитии игры в целом.</span></span></dd>
+ <dt><a href="http://webchat.freenode.net/?channels=bbg">#BBG IRC chat</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Поговорите с разработчиками напрямую в режиме реального времени.</span></span></dd>
+ <dt><a href="http://html5devstarter.enclavegames.com/">HTML5 Gamedev Starter</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Starter для новых игровых разработчиков, кураторский список ссылок на различные полезные ресурсы в Интернете.</span></span></dd>
+ <dt><a href="http://js13kgames.com/">js13kGames</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Конкурс кодирования JavaScript для разработчиков игр HTML5 с ограничением размера файла, равным 13 килобайтам.</span> <span>Все представленные игры доступны в удобном для чтения виде на GitHub.</span></span></dd>
+ <dt><a href="https://hacks.mozilla.org/category/games/">Mozilla Hacks blog</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Категория игр в блоге Mozilla Hacks, содержащем интересные статьи, посвященные </span></span>gamedev<span lang="ru"><span>.</span></span></dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Темы_разработки_игр">Темы разработки игр</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Tools">Инструменты</a></dt>
+ <dd>Это раздел об инструментах, созданных для облегчения создания эффективных игр для Web, таких как фреймворки, компиляторы (например, Emscripten), и инструменты для отладки. <span id="result_box" lang="ru"><span>Объясняются</span> <span>основные концепции</span> <span>каждого</span><span>,</span> <span>дается </span><span>прочная база</span> <span>для работы</span> с ними<span>.</span></span></dd>
+ <dt><a href="/en-US/docs/Games/Techniques">Технические приемы</a></dt>
+ <dd>Этот раздел содержит множество статей об очень важных техниках создания игр, таких как физика, <span class="short_text" id="result_box" lang="ru"><span>обнаружение столкновения</span></span>, анимация, 3D, хранение данных, и многое другое.</dd>
+ <dt><a href="/en-US/docs/Games/Workflows">Рабочий процесс</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Этот раздел</span> <span>включает в себя несколько</span> <span>тематических исследований об</span> <span>основных</span> <span>инструментах и методах</span><span>, охватываемых</span> <span>выше,</span> <span>и применение их</span> <span>к созданию</span> <span>удивительных</span> <span>игр</span><span>.</span></span> Здесь каждый найдет что-то полезное, являетесь ли вы опытным веб-разработчиком, желающим писать 2D или 3D игры, С++ разработчиком, задумавшим портировать свои игры в веб, или мобильным разработчиком, ищущим помощь в написании лучших мобильных игр.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<dl>
+ <dt><a href="/en-US/demos/detail/bananabread" title="/en-US/demos/detail/bananabread">BananaBread</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Многопользовательский трехмерный шутер от первого лица, разработанный с использованием Emscripten, WebGL и WebRTC.</span> <span>Одна из первых демонстрационных игр для WebGL.</span></span></dd>
+ <dt><a href="https://hacks.mozilla.org/2013/12/monster-madness-creating-games-on-the-web-with-emscripten/">Monster Madness</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Сетевой шутер на основе WebGL и asm.js, разработанный Nom Nom Games и Trendy entertainment.</span></span></dd>
+ <dt><a href="http://www.auraluxgame.com/game/">Auralux</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Стратегия WebGL и asm.js: захватите все солнца, чтобы победить!</span></span></dd>
+ <dt><a href="http://playcanv.as/p/JtL2iqIH">Swooop</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Полёт на самолёте в игре: контролируйте свой самолет и собирайте драгоценности.</span> <span>Снова, созданный с</span></span> <a href="https://playcanvas.com/">PlayCanvas</a>.</dd>
+ <dt><a href="https://ga.me/games/polycraft">Polycraft</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Кораблекрушение.</span> <span>Исследуйте остров и победите монстров.</span></span></dd>
+ <dt><a href="http://beta.unity3d.com/jonas/DT2/">Dead Trigger 2</a></dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span>Классический </span></span>zombie splatter action<span class="short_text" lang="ru"><span>, выполненная в</span></span> <a href="http://unity3d.com/">Unity3D</a>.</dd>
+ <dt><a href="http://playbiolab.com/">Biolab Disaster</a></dt>
+ <dd>Side-scrolling платформенный шутер . <span class="short_text" id="result_box" lang="ru"><span>Ранняя попытка на холсте - классика.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong><span id="result_box" lang="ru"><span>Примечание</span></span></strong>: <span id="result_box" lang="ru"><span>Для получения расширенного списка примеров см. нашу</span></span> <a href="/en-US/docs/Games/Examples">страницу примеров</a>.</p>
+</div>
+</div>
+</div>
+
+<div class="note">
+<p><strong><span id="result_box" lang="ru"><span>Обратите внимание, что мы отслеживаем текущую работу над документацией по разработке игр на нашей</span></span> <a href="/en-US/docs/Games/Doc_Status">Game development documentation status</a> <span class="short_text" id="result_box" lang="ru"><span>странице</span></span>. <span id="result_box" lang="ru"><span>Если вы хотите внести свой вклад в документацию по разработке игр, ознакомьтесь с этой страницей, чтобы узнать, что нужно делать.</span></span> </strong></p>
+</div>
diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
new file mode 100644
index 0000000000..7205f72e7a
--- /dev/null
+++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
@@ -0,0 +1,265 @@
+---
+title: Создание простой сцены с помощью Three.js
+slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js
+tags:
+  - 3D
+  - Beginner
+  - Games
+  - Tutorial
+translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary">В 3D сцене любой игры, даже самой простой, есть стандартные сущности, такие как поверхности, расположенные в координатной системе, камера, для того, чтобы их видеть, света и материалы, для того, чтобы они лучше выглядели, анимации, чтобы их оживить и тд.<strong> Three.js</strong>, как и любая другая 3D библиотека, предоставляет встроенные функции, которые помогут вам в реализации 3D. <span class="seoSummary">В этой статье мы покажем вам основы использования Three, включая настройку среды, структуру необходимого HTML, фундаментальные объекты Three и как создать простейшую сцену.</span></p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Мы выбрали Three, потому что это одна из самых популярных <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> библиотек и она достаточно проста в освоении. Это не значит, что она самая лучшая, вы можете выбрать любую другую, например <a href="http://www.ambiera.com/copperlicht/index.html">CopperLicht</a>, <a href="http://www.glge.org/">GLGE</a>, <a href="https://code.google.com/p/o3d/">O3D</a> и тд.</p>
+</div>
+
+<h2 id="Настройка_среды">Настройка среды</h2>
+
+<p>Чтобы начать разработку с Three.js, нужно:</p>
+
+<ul>
+ <li>Удостовериться, что вы используете современную версию браузера с поддеркой <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, например, Firefox или Chrome.</li>
+ <li>Создать папку для экспериментов.</li>
+ <li>Сохранить копию <a href="http://threejs.org/build/three.min.js">последней версии библиотеки Three.js</a> в вашей папке.</li>
+ <li>Открыть <a href="http://threejs.org/docs/">документацию Three.js</a> в отдельной вкладке.</li>
+</ul>
+
+<h2 id="HTML_структура">HTML структура</h2>
+
+<p>Здесь находится HTML структура, которую мы будем использовать:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+	&lt;meta charset="utf-8"&gt;
+	&lt;title&gt;MDN Games: Three.js demo&lt;/title&gt;
+	&lt;style&gt;
+		body { margin: 0; padding: 0; }
+		canvas { width: 100%; height: 100%; }
+	&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script src="three.min.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+	var WIDTH = window.innerWidth;
+	var HEIGHT = window.innerHeight;
+	/* весь наш JavaScript код будет после этого комментария */
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Она содержит основную информацию: {{htmlelement("title")}}, CSS, чтобы сделать <code>ширину</code> и <code>высоту</code> {{htmlelement("canvas")}} элемента равным странице. В первом элементе {{htmlelement("script")}} мы подключаем Three.js, во втором будем писать наш код, в котором уже создали 2 переменные для хранения <code>width</code> и <code>height</code>.</p>
+
+<p>Прежде чем продолжить, скопируйте этот код в новый файл и сохраните в вашей рабочей директории под именем <code>index.html</code>.</p>
+
+<h2 id="Renderer">Renderer</h2>
+
+<p>Renderer это инструмент для отрисовки сцены в браузере. Есть 2 вида таких инструментов: WebGL по умолчанию, другие - Canvas, SVG, CSS, и DOM. Они различаются по тому как все рендерится. Несмотря на различия в них, для пользователя все будет выглядить одинаково. Поэтому, вы можете выбрать запасной вариант на случай, если браузер пользователя не поддерживает выбранную вами технологию.</p>
+
+<pre class="brush: js notranslate">var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setSize(WIDTH, HEIGHT);
+renderer.setClearColor(0xDDDDDD, 1);
+document.body.appendChild(renderer.domElement);
+</pre>
+
+<p>Создаем новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM элемент к странице. Вы могли заметить параметр <code>antialias</code> в первой строке — если он установлен в <code>true</code>, то границы объектов сглаживаются. Метод <code>setClearColor()</code> устанавливает цвет бэкграунда (мы установили в 0xDDDDDD, светло-серый, значение по цмолчанию - черный).</p>
+
+<p>Добавьте этот код в ваш элемент {{htmlelement("script")}}.</p>
+
+<h2 id="Сцена">Сцена</h2>
+
+<p>Сцена (scene) это место, где все происходит. Когда создаются новые объекты, они добавляются в сцену, чтобы их можно было увидеть. В three.js роль сцены выполняет объект <code>Scene</code>. Давайте создадим его, добавив следующих код:</p>
+
+<pre class="brush: js notranslate">var scene = new THREE.Scene();
+</pre>
+
+<p>Позже, мы будем использовать метод <code>.add()</code> для добавления объектов в сцену.</p>
+
+<h2 id="Камера">Камера</h2>
+
+<p>У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим ее позицию в координатной системе и направим ее на нужную нам точку, где расположено то, что мы хотим видеть:</p>
+
+<pre class="brush: js notranslate">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
+camera.position.z = 50;
+scene.add(camera);
+</pre>
+
+<p>Добавьте следующий код в программу.</p>
+
+<p>Существует несколько типов камер: кубическая (Cube), ортографическая (Orthographic), но самая простая - перспективная (Perspective). Чтобы инициализировать ее, нужно установить угол обзора и соотношение сторон: Первое нужно для указания того, как широко мы видим, последний для того, чтобы эти объекты имели правильные пропорции. Объясним поподробнее, что означают числа, что мы установили:</p>
+
+<ul>
+ <li>Мы установили поле зрения в 70, с этим можно поэкспериментировать: чем больше число, тем больше угол обзора, тем шире мы видим. Представьте обычную камеру и камеру с эффектом fish eye, Которая позволяет увидеть больше. Значение по умолчанию 50.</li>
+ <li>Соотношение сторон установлено в соотношение сторон окна браузера. Можно установить, например, в 16 ⁄ 9. Значение по умолчанию1.</li>
+ <li>Координата <code>z</code>, равная 50, это дистанция от камеры до начала координат сцены вдоль оси <code>z</code>. Мы установили такое значение, чтобы увидеть объекты в сцене. Значения <code>x</code> и <code>y</code> по умолчанию равны 0.</li>
+</ul>
+
+<p>Стоит поэкспериментировать с этими значениями, чтобы лучше разобраться в том, как они влияют на отрисовку сцены.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: значения позиции  (например координата z) безразмерны, устанавливайте их так, чтобы вам было удобно с ними работать.</p>
+</div>
+
+<h2 id="Отрисовка_сцены">Отрисовка сцены</h2>
+
+<p>Все уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам все равно нужно запустить рендеринг. Функция <code>render()</code> выполнит эту работу с небольшой помощью <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, которая заставляет сцену постоянно перерисовываться в каждом кадре:</p>
+
+<pre class="brush: js notranslate">function render() {
+	requestAnimationFrame(render);
+	renderer.render(scene, camera);
+}
+render();
+</pre>
+
+<p>На каждом новом кадре вызывается функция <code>render()</code>, а <code>renderer</code> рендерит <code>scene</code> и <code>camera</code>. Сразу после объявления функции мы в первый раз вызываем ее, чтобы запустить цикл, после чего он будет использоваться бесконечно.</p>
+
+<p>Еще раз, добавьте этот новый код ниже ваших предыдущих дополнений. Попробуйте сохранить файл и открыть его в браузере. Теперь вы должны увидеть серое окно. Поздравляем!</p>
+
+<h2 id="Geometry">Geometry</h2>
+
+<p>Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the <code>render()</code> function:</p>
+
+<pre class="brush: js notranslate">var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
+</pre>
+
+<p>In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.</p>
+
+<h2 id="Material">Material</h2>
+
+<p>A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:</p>
+
+<pre class="brush: js notranslate">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
+</pre>
+
+<p>Add this line below the previously added.</p>
+
+<p>Our material is now ready, what next?</p>
+
+<h2 id="Mesh">Mesh</h2>
+
+<p>To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:</p>
+
+<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
+</pre>
+
+<p>Again, add this line below the one you previously added.</p>
+
+<h2 id="Добавление_куба_в_сцену">Добавление куба в сцену</h2>
+
+<p>Сейчас мы создали куб, используя 'geometry' и 'material'. Последнее, что мы долны сделать - добавить куб на сцену. Добавте в код эту строку:</p>
+
+<pre class="brush: js notranslate">scene.add(cube);
+</pre>
+
+<p>Есди вы сохраните код и обновите вкладку браузера, вы увидете квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У обьектов есть полезное свойтво - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Чтож давайте немного повернем его, чтобы видеть больше сторон.  Добавть в конец кода эту строку:</p>
+
+<pre class="brush: js notranslate">cube.rotation.set(0.4, 0.2, 0);
+</pre>
+
+<p>Поздровляю, Вы создали обьект в 3D-среде! This might have proven easier than you first thought? Here's how it should look:</p>
+
+<p><img alt="Blue cube on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11849/cube.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p>
+
+<p>Весь код который мы создали:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/bwup75fa/","","350")}}</p>
+
+<p>Вы также можете <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/cube.html">просмотреть на GitHub</a>.</p>
+
+<h2 id="More_shapes_and_materials">More shapes and materials</h2>
+
+<p>Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:</p>
+
+<pre class="brush: js notranslate">cube.position.x = -25;
+</pre>
+
+<p>Now onto more shapes and materials. What might you input to add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.</p>
+
+<pre class="brush: js notranslate">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
+var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500});
+var torus = new THREE.Mesh(torusGeometry, phongMaterial);
+scene.add(torus);
+</pre>
+
+<p>These lines will add a torus geometry; the <code>TorusGeometry()</code> method's parameters define, and the parameters are <code>radius</code>, <code>tube diameter</code>, <code>radial segment count</code>, and <code>tubular segment count</code>. The Phong material should look more glossy than the box's simple Basic material, though right now our torus will just look black.</p>
+
+<p>We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:</p>
+
+<pre class="brush: js notranslate">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
+var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2});
+var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial);
+dodecahedron.position.x = 25;
+scene.add(dodecahedron);
+</pre>
+
+<p>This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter, <code>DodecahedronGeometry(),</code> defines the size of the object. We're using a Lambert material, similar to Phong, but should be less glossy. Again it's black, for now. We're moving the object to the right, so it's not in the same position as the box, or torus.</p>
+
+<p>As mentioned above, the new objects currently just look black. To have both, the Phong and Lambert materials properly visible, we need to introduce a source of light.</p>
+
+<h2 id="Lights">Lights</h2>
+
+<p>There are various types of light sources available in Three.js. The most basic is <code>PointLight</code>, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:</p>
+
+<pre class="brush: js notranslate">var light = new THREE.PointLight(0xFFFFFF);
+light.position.set(-10, 15, 50);
+scene.add(light);
+</pre>
+
+<p>We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it.</p>
+
+<p><img alt="Shapes: blue cube, dark yellow torus and dark gray dodecahedron on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11851/shapes.png" style="height: 400px; width: 600px;"></p>
+
+<p>This looks a little boring though. In a game, something is usually happening. We might see animations and such. So let's try breathing a little life into these shapes, by animating them!</p>
+
+<h2 id="Анимация">Анимация</h2>
+
+<p>Мы можем использовать 'rotation', чтобы поменять положение куба. Также мы можем масштабировать фигуры или изменять их положение. Чтобы создать анимацию нужно внесенные изменения внести в цикл рендеринга, чтобы изменения происходили в каждом кадре.</p>
+
+<h3 id="Вращение">Вращение</h3>
+
+<p>Вращать фигуры просто. Вы просто добавляете или отнимаете значение по оси вращения. Добавте эту строкуу кода сразу после: <code>requestAnimationFrame()</code> invocation inside the <code>render</code> function:</p>
+
+<pre class="brush: js notranslate">cube.rotation.y += 0.01;
+</pre>
+
+<p>This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.</p>
+
+<h3 id="Scaling">Scaling</h3>
+
+<p>We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called <code>t,</code> for counting elapsed time. Add it right before the <code>render()</code> function:</p>
+
+<pre class="brush: js notranslate">var t = 0;
+</pre>
+
+<p>Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the <code>requestAnimationFrame()</code> invocation:</p>
+
+<pre class="brush: js notranslate">t += 0.01;
+torus.scale.y = Math.abs(Math.sin(t));
+</pre>
+
+<p>We use <code>Math.sin</code>, ending up with quite an interesting result. This scales the torus, repeating the process, as <code>sin</code> is a periodic function. We're wrapping the scale value in <code>Math.abs</code>, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1,  negative values might render out torus in unexpected way. In this case it looks black half the time.</p>
+
+<p>Now, onto movement.</p>
+
+<h3 id="Moving">Moving</h3>
+
+<p>Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our <code>requestAnimationFrame()</code> invocation:</p>
+
+<pre class="brush: js notranslate">dodecahedron.position.y = -7*Math.sin(t*2);
+</pre>
+
+<p>This will move the dodecahedron up and down, by applying the <code>sin()</code> value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Here's the final code:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}</p>
+
+<p>You can also <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">see it on GitHub</a> and <a href="https://github.com/end3r/MDN-Games-3D/">fork the repository</a>, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web">3D on the Web</a>.</p>
+
+<p>You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a>.</p>
diff --git a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html
new file mode 100644
index 0000000000..ee839e283f
--- /dev/null
+++ b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html
@@ -0,0 +1,229 @@
+---
+title: GLSL Шейдеры
+slug: Games/Techniques/3D_on_the_web/GLSL_Shaders
+tags:
+  - GLSL
+  - OpenGL
+  - Shader
+  - three.js
+  - Шейдер
+translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary"><span class="seosummary">Шейдеры используют GLSL (</span><span class="ILfuVd">OpenGL Shading Language</span>)<span class="seosummary">, специальный язык программирования шейдеров от OpenGL, который во многом напоминает С (Си). GLSL выполняется напрямую графическим процессором. Существует два типа шейдеров: вершинные шейдеры и фрагментные (пиксельные) шейдеры. Вершинные шейдеры изменяют положение фигуры в системе 3D координат. Фрагментные шейдеры расчитывают цвет и другие атрибуты отображения.</span></p>
+
+<p>GLSL не так прост в изучении, как JavaScript. GLSL является строготипизированым и в нем часто используются операции с векторами и матрицами. It can get very complicated — very quickly. В этой статье мы создадим небольшой пример кода, который отображает куб. Чтобы ускорить разработку, мы будем использовать Three.js API.</p>
+
+<p>Как Вы помните из статьи о <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">теоретических основах</a>, вертекс или вершина это точка в системе 3D кординат. Также вершины могут иметь дополнительные свойства. Система 3D координат определяет пространство, а вертексы позволяют определять формы в этом пространстве.</p>
+
+<h2 id="shader_types" name="shader_types">Типы шейдеров</h2>
+
+<p>Шейдер, по сути, это функция, которая требуется для отображения чего-либо на экране. Шейдер запускается в <a href="https://en.wikipedia.org/wiki/GPU">GPU</a> (graphics processing unit), который оптимизирован для выполнения подобных операций. Using a GPU to deal with shaders offloads some of the number crunching from the CPU. This allows the CPU to focus its processing power on other tasks, like executing code.</p>
+
+<h3 id="vertex_shader" name="vertex_shader">Вершинный шейдер</h3>
+
+<p>Vertex shaders manipulate coordinates in a 3D space and are called once per vertex. The purpose of the vertex shader is to set up the <code>gl_Position</code> variable — this is a special, global, and built-in GLSL variable. <code>gl_Position</code> is used to store the position of the current vertex.</p>
+
+<p>The <code>void main()</code> function is a standard way of defining the <code>gl_Position</code> variable. Everything inside  <code>void main()</code> will be executed by the vertex shader.  A vertex shader yields a variable containing how to project a vertex's position in 3D space onto a 2D screen.</p>
+
+<h3 id="fragment_shader" name="fragment_shader">Фрагментный шейдер</h3>
+
+<p>Fragment (or texture) shaders define RGBA (red, blue, green, alpha) colors for each pixel being processed — a single fragment shader is called once per pixel. The purpose of the fragment shader is to set up the <code>gl_FragColor</code> variable. <code>gl_FragColor</code> is a built-in GLSL variable like <code>gl_Position</code>.</p>
+
+<p>The calculations result in a variable containing the information about the RGBA color.</p>
+
+<h2 id="demo" name="demo">Демо</h2>
+
+<p>Let's build a simple demo to explain those shaders in action. Be sure to read <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js tutorial</a> first to grasp the concept of the scene, its objects, and materials.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Remember that you don't have to use Three.js or any other library to write your shaders — pure <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a> (Web Graphics Library) is more than enough. We've used Three.js here to make the background code a lot simpler and clearer to understand, so you can just focus on the shader code. Three.js and other 3D libraries abstract a lot of things for you — if you wanted to create such an example in raw WebGL, you'd have to write a lot of extra code to actually make it work.</p>
+</div>
+
+<h3 id="Environment_setup" name="Environment_setup">Настройка окружения</h3>
+
+<p>Чтобы приступить к работе с шейдерами WebGL Вам потребуется:</p>
+
+<ul>
+ <li>Убедиться, что Вы используете современный браузер, который хорошо поддерживает <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a>, например Firefox или Chrome.</li>
+ <li>Создать папку, в которой будете хранить результаты ваших экспериментов.</li>
+ <li>Сохранить копию <a href="https://threejs.org/build/three.min.js">последней минимизированной версии библиотеки Three.js</a> в созданную папку.</li>
+</ul>
+
+<h3 id="HTML_structure" name="HTML_structure">Структура HTML кода</h3>
+
+<p>Мы будем использовать следующую структуру HTML кода.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+	&lt;meta charset="utf-8"&gt;
+	&lt;title&gt;MDN Games: Shaders demo&lt;/title&gt;
+	&lt;style&gt;
+		body { margin: 0; padding: 0; font-size: 0; }
+		canvas { width: 100%; height: 100%; }
+	&lt;/style&gt;
+	&lt;script src="three.min.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;script id="vertexShader" type="x-shader/x-vertex"&gt;
+	// vertex shader's code goes here
+  &lt;/script&gt;
+  &lt;script id="fragmentShader" type="x-shader/x-fragment"&gt;
+	// fragment shader's code goes here
+  &lt;/script&gt;
+  &lt;script&gt;
+	// scene setup goes here
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>It contains some basic information like the document {{htmlelement("title")}}, and some CSS to set the <code>width</code> and <code>height</code> of the {{htmlelement("canvas")}} element that Three.js will insert on the page to be the full size of the viewport. The {{htmlelement("script")}} element in the {{htmlelement("head")}} includes the Three.js library in the page; we will write our code into three script tags in the {{htmlelement("body")}} tag:</p>
+
+<ol>
+ <li>The first one will contain the vertex shader.</li>
+ <li>The second one will contain the fragment shader.</li>
+ <li>The third one will contain the actual JavaScript code generating the scene.</li>
+</ol>
+
+<p>Before reading on, copy this code to a new text file and save it in your working directory as <code>index.html</code>. We'll create a scene featuring a simple cube in this file to explain how the shaders work.</p>
+
+<h3 id="Исходный_код_куба">Исходный код куба</h3>
+
+<p>Instead of creating everything from scratch we can reuse the <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> source code of the cube. Most of the components like the renderer, camera, and lights will stay the same, but instead of the basic material we will set the cube's color and position using shaders.</p>
+
+<p>Go to the <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/cube.html">cube.html file on GitHub</a>, copy all the JavaScript code from inside the second {{htmlelement("script")}} element, and paste it into the third <code>&lt;script&gt;</code> element of the current example. Save and load <code>index.html</code> in your browser — you should see a blue cube.</p>
+
+<h3 id="Код_вершинного_шейдера">Код вершинного шейдера</h3>
+
+<p>Давайте напишем простой вершинный шейдер — добавим код ниже в тело первого тега <code>&lt;script&gt;</code> :</p>
+
+<pre class="brush: glsl">void main() {
+	gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
+}
+</pre>
+
+<p>The resulting <code>gl_Position</code> is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can learn more about <em>model</em>, <em>view</em>, and <em>projection transformations</em> from the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#Vertex_processing">vertex processing paragraph</a>, and you can also check out the links at the end of this article to learn more about it.</p>
+</div>
+
+<p>Both <code>projectionMatrix</code> and <code>modelViewMatrix</code> are provided by Three.js and the vector is passed with the new 3D position, which results in the original cube moving 10 units along the <code>x</code> axis and 5 units along the <code>z</code> axis, translated via a shader. We can ignore the fourth parameter and leave it with the default <code>1.0</code> value; this is used to manipulate the clipping of the vertex position in the 3D space, but we don't need in our case.</p>
+
+<h3 id="Код_шейдера_текстуры">Код шейдера текстуры</h3>
+
+<p>Now we'll add the texture shader to the code — add the code below to the body's second <code>&lt;script&gt;</code> tag:</p>
+
+<pre class="brush: glsl">void main() {
+	gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
+}
+</pre>
+
+<p>This will set an RGBA color to recreate the current light blue one — the first three float values (ranging from <code>0.0</code> to <code>1.0</code>) represent the red, green, and blue channels while the fourth one is the alpha transparency (ranging from <code>0.0</code> — fully transparent — to 1.0 — fully opaque).</p>
+
+<h3 id="Применение_шейдеров">Применение шейдеров</h3>
+
+<p>To actually apply the newly created shaders to the cube, comment out the <code>basicMaterial</code> definition first:</p>
+
+<pre class="brush: js">// var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
+</pre>
+
+<p>Далее, создаем <a href="http://threejs.org/docs/#Reference/Materials/ShaderMaterial"><code>shaderMaterial</code></a>:</p>
+
+<pre class="brush: js">var shaderMaterial = new THREE.ShaderMaterial( {
+	vertexShader: document.getElementById( 'vertexShader' ).textContent,
+	fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+});
+</pre>
+
+<p>This shader material takes the code from the scripts and applies it to the object the material is assigned to.</p>
+
+<p>Then, in the line that defines the cube we need to replace the <code>basicMaterial</code>:</p>
+
+<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
+</pre>
+
+<p>...with the newly created <code>shaderMaterial</code>:</p>
+
+<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
+</pre>
+
+<p>Three.js compiles and runs the shaders attached to the mesh to which this material is given. In our case the cube will have both vertex and texture shaders applied. That's it — you've just created the simplest possible shader, congratulations! Here's what the cube should look like:</p>
+
+<p><img alt="Three.js blue cube demo" src="http://end3r.github.io/MDN-Games-3D/Shaders/img/cube.png" style="display: block; margin: 0px auto;"></p>
+
+<p>It looks exactly the same as the Three.js cube demo but the slightly different position and the same blue color are both achieved using the shader.</p>
+
+<h2 id="Финальный_вариант">Финальный вариант</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;script src="https://end3r.github.io/MDN-Games-3D/Shaders/js/three.min.js"&gt;&lt;/script&gt;
+&lt;script id="vertexShader" type="x-shader/x-vertex"&gt;
+    void main() {
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
+    }
+&lt;/script&gt;
+&lt;script id="fragmentShader" type="x-shader/x-fragment"&gt;
+    void main() {
+        gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
+    }
+&lt;/script&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">    var WIDTH = window.innerWidth;
+    var HEIGHT = window.innerHeight;
+
+    var renderer = new THREE.WebGLRenderer({antialias:true});
+    renderer.setSize(WIDTH, HEIGHT);
+    renderer.setClearColor(0xDDDDDD, 1);
+    document.body.appendChild(renderer.domElement);
+
+    var scene = new THREE.Scene();
+
+    var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
+    camera.position.z = 50;
+    scene.add(camera);
+
+    var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
+
+    var shaderMaterial = new THREE.ShaderMaterial( {
+        vertexShader: document.getElementById( 'vertexShader' ).textContent,
+        fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+    });
+
+    var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
+    scene.add(cube);
+    cube.rotation.set(0.4, 0.2, 0);
+
+    function render() {
+        requestAnimationFrame(render);
+        renderer.render(scene, camera);
+    }
+    render();</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body { margin: 0; padding: 0; font-size: 0; }
+canvas { width: 100%; height: 100%; }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Final_code', '100%', '400', '', 'Games/Techniques/3D_on_the_web/GLSL_Shaders') }}</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>This article has taught the very basics of shaders. Our example doesn't do much but there are many more cool things you can do with shaders — check out some really cool ones on <a href="http://shadertoy.com/">ShaderToy</a> for inspiration and to learn from their sources.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="http://learningwebgl.com/blog/?page_id=1217">Изучение WebGL</a> — for general WebGL knowledge</li>
+ <li><a href="http://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html">WebGL шейдеры и GLSL основы</a> — for GLSL specific information</li>
+</ul>
diff --git a/files/ru/games/techniques/3d_on_the_web/index.html b/files/ru/games/techniques/3d_on_the_web/index.html
new file mode 100644
index 0000000000..3944c617c6
--- /dev/null
+++ b/files/ru/games/techniques/3d_on_the_web/index.html
@@ -0,0 +1,113 @@
+---
+title: 3D games on the Web
+slug: Games/Techniques/3D_on_the_web
+tags:
+  - Games
+  - Graphics
+  - NeedsContent
+  - NeedsExample
+  - NeedsTranslation
+  - TopicStub
+  - WebGL
+  - WebVR
+  - three.js
+translation_of: Games/Techniques/3D_on_the_web
+---
+<div>{{GamesSidebar}}</div><p class="summary">For rich gaming experiences on the Web the weapon of choice is WebGL, which is rendered on HTML {{htmlelement("canvas")}}. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.</p>
+
+<h2 id="Documentation_and_browser_support">Documentation and browser support</h2>
+
+<p>The <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> project documentation and specification is maintained by the <a href="https://www.khronos.org/">Khronos Group</a>, not the W3C as with most of the Web APIs. Support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. The main browsers are all supporting WebGL and all you need to focus on is optimizing the performance on the devices you use.</p>
+
+<p>There's an ongoing effort on releasing WebGL 2.0 (based on OpenGL ES 3.0) in the near future, which will bring many improvements and will help developers build games for the modern Web using current, powerful hardware.</p>
+
+<h2 id="Explaining_basic_3D_theory">Explaining basic 3D theory</h2>
+
+<p>The basics of 3D theory centers around shapes represented in a 3D space, with a coordinate system being used to calculate their positions. See our <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">Explaining basic 3D theory</a> article for all the information you need.</p>
+
+<h2 id="Advanced_concepts">Advanced concepts</h2>
+
+<p>You can do a lot more with WebGL. There are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic — virtual reality on the web.</p>
+
+<h3 id="Shaders">Shaders</h3>
+
+<p>It's worth mentioning shaders, which are a separate story on their own. Shaders use GLSL, a special OpenGL Shading Language with syntax similar to C that is executed directly by the graphics pipeline. They can be split into Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates, while the latter computes rendering colors and other attributes. You should definitely check out <a href="/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> article to learn more about them.</p>
+
+<h3 id="Collision_Detection">Collision Detection</h3>
+
+<p>It's hard to imagine a game without the collision detection — we always need to work out when something is hitting something else. We have information available for your to learn from:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li>
+</ul>
+
+<h3 id="WebVR">WebVR</h3>
+
+<p>The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>, and the (currently experimental) <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> for capturing information form VR hardware and making it available for use in JavaScript applications. For more, read <a href="/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR — Virtual Reality for the Web</a>.</p>
+
+<p>There's also the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> article showing you how easy it is to build 3D environments for virtual reality using the <a href="http://aframe.io/">A-Frame</a> framework.</p>
+
+<h2 id="The_rise_of_libraries_and_frameworks">The rise of libraries and frameworks</h2>
+
+<p>Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a> to get started.) For real world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.</p>
+
+<p>The most popular JavaScript 3D library is <a href="http://threejs.org/">Three.js</a>, a multi-purpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> and <a href="http://www.babylonjs.com/">Babylon.js</a> are among the most recognizable ones with rich documentation, online editors and active communities.</p>
+
+<h3 id="Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</h3>
+
+<p>A-Frame is a web framework for building 3D and VR experiences. Under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just HTML. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> subpage for the step-by-step process of creating the demo.</p>
+
+<h3 id="Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</h3>
+
+<p><span class="seosummary">Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a> subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.</span></p>
+
+<h3 id="Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</h3>
+
+<p>PlayCanvas is a popular 3D WebGL game engine open sourced on GitHub, with an editor available online and good documentation. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a> subpage for high level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.</p>
+
+<h3 id="Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</h3>
+
+<p>Three.js, as any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> subpage for the step-by-step process of creating the demo.</p>
+
+<h3 id="Other_tools">Other tools</h3>
+
+<p>Both <a href="http://unity3d.com/">Unity</a> and <a href="https://www.unrealengine.com/">Unreal</a> can export your game to <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> with <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, so you're free to use their tools and techniques to build games that will be exported to the web.</p>
+
+<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h2 id="Where_to_go_next">Where to go next</h2>
+
+<p>With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.</p>
+
+<h3 id="Source_code">Source code</h3>
+
+<p>You can find all the source code for this series <a href="http://end3r.github.io/MDN-Games-3D/">demos on GitHub</a>.</p>
+
+<h3 id="APIs">APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li>
+</ul>
+
+<h3 id="Frameworks">Frameworks</h3>
+
+<ul>
+ <li><a href="http://threejs.org/">Three.js</a></li>
+ <li><a href="https://github.com/WhitestormJS/whs.js">Whitestorm.js</a> (based on Three.js)</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a></li>
+ <li><a href="http://www.babylonjs.com/">Babylon.js</a></li>
+ <li><a href="http://aframe.io/">A-Frame</a></li>
+</ul>
+
+<h3 id="Tutorials">Tutorials</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a></li>
+</ul>
diff --git a/files/ru/games/techniques/async_scripts/index.html b/files/ru/games/techniques/async_scripts/index.html
new file mode 100644
index 0000000000..914600cd94
--- /dev/null
+++ b/files/ru/games/techniques/async_scripts/index.html
@@ -0,0 +1,52 @@
+---
+title: Асинхронные скрипты для asm.js
+slug: Games/Techniques/Async_scripts
+tags:
+  - Games
+  - JavaScript
+  - asm.js
+  - async
+translation_of: Games/Techniques/Async_scripts
+---
+<div>
+<p><font><font>Каждая средняя или большая игра должна компилировать </font><font>код </font></font><a href="https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js"><font><font>asm.js</font></font></a><font><font> как часть асинхронного скрипта, чтобы дать браузеру максимальную гибкость для оптимизации процесса компиляции. </font><font>В Gecko асинхронная компиляция позволяет движку JavaScript компилировать asm.js из основного потока когда игра загружается, и кэшировать сгенерированный машинный код, так что игру не нужно компилировать при последующих загрузках (начиная с Firefox 28) , </font><font>Чтобы увидеть разницу, переключите </font></font><code>javascript.options.parallel_parsing</code><font><font>в </font></font><code>about:config</code><font><font>.</font></font></p>
+</div>
+
+<h2 id="Написание_асинхронного_скрипта"><font><font> Написание асинхронного скрипта</font></font></h2>
+
+<p><font><font>Получить асинхронную компиляцию легко: при написании JavaScript просто используйте </font></font><code>async</code><font><font>атрибут следующим образом:</font></font></p>
+
+<pre><code>&lt;script async src="file.js"&gt;&lt;/script&gt;</code></pre>
+
+<p><font><font>или, чтобы сделать то же самое через скрипт:</font></font></p>
+
+<pre><code>var script = document.createElement('script');
+script.src = "file.js";
+document.body.appendChild(script);</code></pre>
+
+<p><font><font>(скрипты создаются из скрипта по умолчанию </font></font><code>async</code><font><font>.) Стандартная оболочка HTML, которую генерирует Emscripten, создает последнее.</font></font></p>
+
+<h2 id="Когда_асинхронный_не_асинхронный"><font><font>Когда асинхронный не асинхронный?</font></font></h2>
+
+<p><font><font>Две распространенные ситуации, в которых сценарий * не * асинхронен (как </font></font><a href="http://www.w3.org/TR/html5/scripting-1.html"><font><font>определено спецификацией HTML</font></font></a><font><font> ):</font></font></p>
+
+<pre><code>&lt;script async&gt;code&lt;/script&gt;</code></pre>
+
+<p><font><font>а также</font></font></p>
+
+<pre><code>var script = document.createElement('script');
+script.innerHTML = "code";
+document.body.appendChild(script);</code></pre>
+
+<p><font><font>Оба считаются «встроенными» скриптами, компилируются и запускаются сразу</font></font></p>
+
+<p><font><font>Что если ваш код находится в строке JS? </font><font>Вместо использования </font></font><code>eval</code><font><font>или </font></font><code>innerHTML</code><font><font>, оба из которых запускают синхронную компиляцию, вы должны использовать BLOB-объект с URL объекта:</font></font></p>
+
+<pre><code>var blob = new Blob([codeString]);
+var script = document.createElement('script');
+var url = URL.createObjectURL(blob);
+script.onload = script.onerror = function() { URL.revokeObjectURL(url); };
+script.src = url;
+document.body.appendChild(script);</code></pre>
+
+<p><font><font>Настройка </font></font><code>src</code><font><font>вместо настройки </font></font><code>innerHTML </code><font><font>делает этот скрипт асинхронным.</font></font></p>
diff --git a/files/ru/games/techniques/controls_gamepad_api/index.html b/files/ru/games/techniques/controls_gamepad_api/index.html
new file mode 100644
index 0000000000..edbb3e0a40
--- /dev/null
+++ b/files/ru/games/techniques/controls_gamepad_api/index.html
@@ -0,0 +1,260 @@
+---
+title: Реализация элементов управления с помощью API Gamepad
+slug: Games/Techniques/Controls_Gamepad_API
+tags:
+  - Gamepad API
+  - JavaScript
+  - Игры
+  - геймпады
+  - контроллеры
+translation_of: Games/Techniques/Controls_Gamepad_API
+---
+<div>{{GamesSidebar}}</div>
+
+<div></div>
+
+<p class="summary">В этой статье рассматривается реализация эффективной кросс-браузерной системы управления веб-играми с использованием API Gamepad, позволяющей управлять веб-играми с помощью консольных игровых контроллеров. В нем есть тематическое исследование игры "Голодный холодильник", созданный компанией <a href="http://enclavegames.com/">Enclave Games</a>.</p>
+
+<h2 id="Элементы_управления_для_web_игр">Элементы управления для web игр</h2>
+
+<p>Исторически игра на консоли, подключенной к телевизору, всегда была совершенно другим опытом, чем игра на ПК, в основном из-за уникальных элементов управления. В конце концов, дополнительные драйверы и плагины позволили нам использовать консольные геймпады с настольными играми - либо нативными играми, либо теми, которые работают в браузере. Теперь, в эпоху HTML5, у нас наконец есть API Gamepad, который дает нам возможность играть в браузерные игры с использованием геймпад-контроллеры без каких-либо плагинов. API Gamepad достигает этого, предоставляя интерфейс, демонстрирующий нажатия кнопок и изменения оси, которые могут быть использованы внутри кода JavaScript для обработки входных данных. Это хорошие времена для браузерных игр.</p>
+
+<p><img alt="gamepad-controls" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img01.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p>
+
+<h2 id="API_статус_и_поддержка_браузера">API статус и поддержка браузера</h2>
+
+<p><a href="http://www.w3.org/TR/gamepad/">Gamepad API</a> все еще находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все еще может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad.</p>
+
+<h2 id="Какие_геймпады_лучше_всего">Какие геймпады лучше всего?</h2>
+
+<p><img alt="gamepad devices" src="http://end3r.com/tmp/gamepad/devices.jpg" style="display: block; height: 450px; margin: 0px auto; width: 600px;"></p>
+
+<p>Наиболее популярные геймпады в наше время - геймпады от Xbox 360, Xbox One, PS3 и PS4 — они прошли все испытания и хорошо работают с Gamepad API, реализованном в браузерах на Windows и Mac OS X.</p>
+
+<p>Существует также ряд других устройств с различными макетами кнопок, которые более или менее работают в разных реализациях браузера. Код, описанный в этой статье, был протестирован с помощью нескольких геймпадов, но любимая конфигурация автора-это беспроводной контроллер Xbox 360 и браузер Firefox на Mac OS X.</p>
+
+<h2 id="Пример_исследования_Голодный_холодильник">Пример исследования: Голодный холодильник</h2>
+
+<p>The competition ran in November 2013 and  decided to take part in it. The theme for the competition was "change", so they submitted a game where you have to feed the Hungry Fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) A countdown changes the type of food the Fridge wants to eat every few seconds, so you have to be careful and act quickly. You can <a href="http://enclavegames.com/games/hungry-fridge/">try Hungry Fridge here</a>.</p>
+
+<p>Конкурс <a href="https://github.com/blog/1674-github-game-off-ii">GitHub Game Off II</a> состоялся в ноябре 2013 года, и <a href="http://enclavegames.com/">Enclave Games</a> решила принять в нем участие. Тема для конкурса была "переменна", поэтому они представили игру, в которой Вы должны накормить голодный холодильник, нажав на здоровую пищу (яблоки, морковь, салат) и избежать "плохой" пищи (пиво, гамбургеры, пицца.) Обратный отсчет меняет тип пищи, которую холодильник хочет съесть каждые несколько секунд, поэтому вы должны быть осторожны и действовать быстро. Вы можете попробовать Голодный холодильник <a href="http://enclavegames.com/games/hungry-fridge/">здесь</a>.</p>
+
+<p><img alt="hungryfridge-mainmenu" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img02.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>
+
+<p>Вторая, скрытая реализация "изменения" - это возможность превратить статичный холодильник в полноценную движущуюся, стреляющую и едящую машину. Когда вы подключаете контроллер, игра значительно меняется (голодный холодильник превращается в супер турбо голодный холодильник), и вы можете управлять бронированным холодильником с помощью API Gamepad. Вы должны сбивать еду, но вы все еще должны искать тип пищи, которую холодильник хочет съесть в каждой точке, иначе вы потеряете энергию.</p>
+
+<p><img alt="hungryfridge-howtoplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img03.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>
+
+<p>Игра инкапсулирует два совершенно разных типа "изменений" - хорошая еда против плохой еды и мобильная против настольной.</p>
+
+<p><img alt="hungryfridge-gameplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img04.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>
+
+<h2 id="Демо-версия">Демо-версия</h2>
+
+<p>Сначала была построена полная версия игры Hungry Fridge, а затем, чтобы для демострации API Gamepad в действии и показа исходного кода JavaScript, была создана <a href="https://end3r.github.io/Gamepad-API-Content-Kit/demo/demo.html">простая демо-версия</a>. Это часть <a href="https://end3r.github.io/Gamepad-API-Content-Kit/">набора контента Gamepad API</a>, доступного на GitHub, где вы можете глубоко погрузиться в код и изучить, как именно он работает.</p>
+
+<p><img alt="Hungry Fridge demo using Gamepad API" src="http://end3r.com/tmp/gamepad/super-turbo.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>
+
+<p>Код, описанный ниже, взят из полной версии игры Hungry Fridge, но он почти идентичен демо-версии — единственная разница заключается в том, что полная версия использует переменную turbo, чтобы решить, будет ли игра запущена с использованием режима Super Turbo. Он работает независимо, поэтому его можно включить, даже если геймпад не подключен.</p>
+
+<div class="note">
+<p><strong>ПРИМЕЧАНИЕ: </strong>время пасхальных яиц: есть скрытая опция для запуска Super Turbo Hungry Fridge на рабочем столе без подключения геймпада — нажмите на значок геймпада в правом верхнем углу экрана. Он запустит игру в режиме Super Turbo, и Вы сможете управлять холодильником с помощью клавиатуры: A и D для поворота башни влево и вправо, W для стрельбы и клавиш со стрелками для перемещения.</p>
+</div>
+
+<h2 id="Реализация">Реализация</h2>
+
+<p>Есть два важных события, которые можно использовать вместе с API Gamepad-<code>gamepadconnected </code>и <code>gamepaddisconnected</code>. Первый срабатывает, когда браузер обнаруживает подключение нового геймпада, а второй - когда геймпад отключен (либо физически пользователем, либо из-за бездействия).) В демо-версии объект <code>gamepadAPI </code>используется для хранения всего, что связано с API:</p>
+
+<pre class="brush: js"><code>var gamepadAPI = {
+  controller: {},
+  turbo: false,
+  connect: function() {},
+  disconnect: function() {},
+  update: function() {},
+  buttonPressed: function() {},
+  buttons: [],
+  buttonsCache: [],
+  buttonsStatus: [],
+  axesStatus: []
+};</code></pre>
+
+<p>Массив <code>кнопок</code> содержит клавиатуру Xbox 360 :</p>
+
+<pre class="brush: js"><code>buttons: [
+  'DPad-Up','DPad-Down','DPad-Left','DPad-Right',
+  'Start','Back','Axis-Left','Axis-Right',
+  'LB','RB','Power','A','B','X','Y',
+],</code>
+</pre>
+
+<p>Это может быть по-разному для разных типов геймпадов, таких как контроллер PS3 (или безымянный, универсальный), поэтому вы должны быть осторожны и не просто предполагать, что кнопка, которую вы ожидаете, будет той же самой кнопкой, которую вы на самом деле получите. Затем мы настроили два прослушивателя событий, чтобы получить данные:</p>
+
+<pre class="brush: js"><code>window.addEventListener("gamepadconnected", gamepadAPI.connect);
+window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code>
+</pre>
+
+<p>Из-за политики безопасности вы должны сначала начать взаимодействовать с контроллером, пока страница видна для запуска события. Если API работал без какого-либо взаимодействия с пользователем, его можно было использовать для снятия отпечатков пальцев без их ведома.</p>
+
+<p>Обе функции довольно просты:</p>
+
+<pre class="brush: js"><code>connect: function(evt) {
+  gamepadAPI.controller = evt.gamepad;
+  gamepadAPI.turbo = true;
+  console.log('Gamepad connected.');
+},</code></pre>
+
+<p>The <code>connect()</code> function takes the event as a parameter and assigns the <code>gamepad</code> object to the <code>gamepadAPI.controller</code> variable. We are using only one gamepad for this game, so it's a single object instead of an array of gamepads. We then set the <code>turbo</code> property to <code>true</code>. (We could use the <code>gamepad.connected</code> boolean for this purpose, but we wanted to have a separate variable for turning on Turbo mode without needing to have a gamepad connected, for reasons explained above.)</p>
+
+<p>Функция <code>connect()</code> принимает событие в качестве параметра и назначает объект <code>gamepad</code> объекту <code>gamepadAPI.controller</code>. Мы используем только один геймпад для этой игры, так что это один объект вместо массива геймпадов. Затем мы устанавливаем свойство turbo в true. (Мы могли бы использовать <code>gamepad.connected</code>, т.к для этой цели подключается логическое значение, но мы хотели иметь отдельную переменную для включения турбо-режима без необходимости подключения геймпада, по причинам, описанным выше.)</p>
+
+<pre class="brush: js"><code>disconnect: function(evt) {
+  gamepadAPI.turbo = false;
+  delete gamepadAPI.controller;
+  console.log('Gamepad disconnected.');
+},</code>
+</pre>
+
+<p>Функция <code>disconnect</code> устанавливает <code>gamepad.turbo property</code> на <code>false</code> и удаляет переменную, содержащую объект gamepad.</p>
+
+<h3 id="Объект_геймпада">Объект геймпада</h3>
+
+<p>В объекте <code>gamepad </code>содержится много полезной информации, причем наиболее важными являются состояния кнопок и осей:</p>
+
+<ul>
+ <li><code>id</code>: Строка, содержащая информацию о контроллере.</li>
+ <li><code>index</code>: Уникальный индентификатор для подключенного устройства.</li>
+ <li><code>connected</code>: Логическая переменная. Возвращает <code>true</code> при подключении.</li>
+ <li><code>mapping</code>: Тип компоновки кнопок; Стандартный - единственный доступный вариант на данный момент.</li>
+ <li><code>axes</code>: Состояние каждой оси, представленное массивом значений с плавающей запятой.</li>
+ <li><code>buttons</code> : Состояние каждой кнопки, представленное массивом объектов GamepadButton, содержащих <code>pressed</code> и <code>value</code> свойства.</li>
+</ul>
+
+<p>Переменная <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">index</span></font> полезна, если мы подключаем более одного контроллера и хотим идентифицировать их, чтобы действовать соответственно — например, когда у нас есть игра для двух игроков, требующая подключения двух устройств.</p>
+
+<h3 id="Запрос_объекта_геймпада">Запрос объекта геймпада</h3>
+
+<p>Помимо <code>connect()</code> и <code>disconnect()</code>, в объекте <code>gamepadAPI </code>есть еще два метода: <code>update()</code> и <code>buttonPressed()</code>. <code>update() </code>выполняется на каждом кадре внутри игрового цикла, чтобы регулярно обновлять фактическое состояние объекта геймпада:</p>
+
+<pre class="brush: js"><code>update: function() {
+  // clear the buttons cache
+  gamepadAPI.buttonsCache = [];
+  // move the buttons status from the previous frame to the cache
+  for(var k=0; k&lt;gamepadAPI.buttonsStatus.length; k++) {
+    gamepadAPI.buttonsCache[k] = gamepadAPI.buttonsStatus[k];
+  }
+  // clear the buttons status
+  gamepadAPI.buttonsStatus = [];
+  // get the gamepad object
+  var c = gamepadAPI.controller || {};
+
+  // loop through buttons and push the pressed ones to the array
+  var pressed = [];
+  if(c.buttons) {
+    for(var b=0,t=c.buttons.length; b&lt;t; b++) {
+      if(c.buttons[b].pressed) {
+        pressed.push(gamepadAPI.buttons[b]);
+      }
+    }
+  }
+  // loop through axes and push their values to the array
+  var axes = [];
+  if(c.axes) {
+    for(var a=0,x=c.axes.length; a&lt;x; a++) {
+      axes.push(c.axes[a].toFixed(2));
+    }
+  }
+  // assign received values
+  gamepadAPI.axesStatus = axes;
+  gamepadAPI.buttonsStatus = pressed;
+  // return buttons for debugging purposes
+  return pressed;
+},</code>
+</pre>
+
+<p>На каждом кадре, <code>update()</code> сохраняет кнопки, нажатые во время предыдущего кадра, в массиве <code>buttonsCache </code>и берет новые из объекта <code>gamepadAPI.controller</code>. Затем он проходит по кнопкам и осям, чтобы получить их фактические состояния и значения.</p>
+
+<h3 id="Обнаружение_нажатия_кнопок">Обнаружение нажатия кнопок</h3>
+
+<p>Метод <code>buttonPressed()</code> также помещается в основной игровой цикл для прослушивания нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придется отпустить кнопку и нажать ее снова, чтобы получить желаемый эффект.</p>
+
+<pre class="brush: js"><code>buttonPressed: function(button, hold) {
+  var newPress = false;
+  // loop through pressed buttons
+  for(var i=0,s=gamepadAPI.buttonsStatus.length; i&lt;s; i++) {
+    // if we found the button we're looking for...
+    if(gamepadAPI.buttonsStatus[i] == button) {
+      // set the boolean variable to true
+      newPress = true;
+      // if we want to check the single press
+      if(!hold) {
+        // loop through the cached states from the previous frame
+        for(var j=0,p=gamepadAPI.buttonsCache.length; j&lt;p; j++) {
+          // if the button was already pressed, ignore new press
+          if(gamepadAPI.buttonsCache[j] == button) {
+            newPress = false;
+          }
+        }
+      }
+    }
+  }
+  return newPress;
+},</code>
+</pre>
+
+<p>Существует два типа действий, которые следует учитывать для кнопки: одно нажатие и удержание. Логическая переменная <code>newPress </code>будет указывать, есть ли новое нажатие кнопки или нет. Затем мы проходим через массив нажатых кнопок — если данная кнопка совпадает с той, которую мы ищем, переменная <code>newPress </code>устанавливается в <code>true</code>. Чтобы проверить, является ли нажатие новым, так как игрок не держит клавишу, мы перебираем кэшированные состояния кнопок из предыдущего кадра игрового цикла. Если мы находим его там, это означает, что кнопка удерживается, поэтому нового нажатия нет. В конце концов возвращается переменная <code>newPress</code>. Функция <code>buttonPressed </code>используется в цикле обновления игры следующим образом:</p>
+
+<pre class="brush: js"><code>if(gamepadAPI.turbo) {
+  if(gamepadAPI.buttonPressed('A','hold')) {
+    this.turbo_fire();
+  }
+  if(gamepadAPI.buttonPressed('B')) {
+    this.managePause();
+  }
+}</code>
+</pre>
+
+<p>Если <code>gamepadAPI.turbo</code> возвращает <code>true</code>, при нажатии (или удержании) данных кнопок мы выполняем соответствующие функции, возложенные на них. В этом случае нажатие или удержание "A" приведет к выстрелу пули, а нажатие "B" поставит игру на паузу.</p>
+
+<h3 id="Порог_оси">Порог оси</h3>
+
+<p>Кнопки имеют только два состояния: 0 или 1, но аналоговые стики могут иметь много различных значений — они имеют плавающий диапазон между -1 и 1 вдоль обеих осей X и Y.</p>
+
+<p><img alt="axis threshold" src="http://end3r.com/tmp/gamepad/axis-threshold.png" style="display: block; height: 300px; margin: 0px auto; width: 400px;"></p>
+
+<p>Геймпады могут запылиться от лежания в бездействии, что означает, что проверка точных значений -1 или 1 может быть проблемой. По этой причине может быть полезно установить пороговое значение для того, чтобы значение оси вступило в силу. Например, бак холодильника поворачивается вправо только тогда, когда значение X больше 0,5:</p>
+
+<pre><code>if(gamepadAPI.axesStatus[0].x &gt; 0.5) {
+  this.player.angle += 3;
+  this.turret.angle += 3;
+}</code>
+</pre>
+
+<p>Даже если мы немного сдвинем его по ошибке или стик не вернется в исходное положение, танк не повернется неожиданно.</p>
+
+<h2 id="Обновление_спецификаций">Обновление спецификаций</h2>
+
+<p>После более чем годичной стабильности, в апреле 2015 года была обновлена спецификация API W3C Gamepad (<a href="https://w3c.github.io/gamepad/">см. последнюю версию</a>). Он не сильно изменился, но хорошо знать, что происходит — обновления заключаются в следующем...</p>
+
+<h3 id="Получение_геймпадов">Получение геймпадов</h3>
+
+<p>Метод {{domxref ("Navigator.getGamepads ()")}} был обновлен с более длинным объяснением и примером кода. Теперь длина массива геймпадов должна быть <code>n+1</code>, где <code>n</code>-количество подключенных устройств — когда подключено одно устройство и оно имеет индекс 1, длина массива равна 2, и он будет выглядеть следующим образом: <code>[null, [object Gamepad]]</code>. Если устройство отключено или недоступно, то для него устанавливается значение <code>null</code>.</p>
+
+<h3 id="Стандартное_отображение">Стандартное отображение</h3>
+
+<p>Тип отображения теперь является перечисляемым объектом вместо строки:</p>
+
+<pre>enum GamepadMappingType {
+    "",
+    "standard"
+};
+</pre>
+
+<p>Это перечисление определяет набор известных отображений для геймпада. На данный момент доступна только компоновка <code>standart</code>, но в будущем могут появиться новые. Если макет неизвестен, он устанавливается в пустую строку.</p>
+
+<h3 id="События">События</h3>
+
+<p>В спецификации было доступно больше событий, чем просто <code>gamepadconnected </code>и <code>gamepaddisconnected</code>, но они были удалены из спецификации, поскольку считались не очень полезными. До сих пор продолжается дискуссия о том, следует ли их возвращать и в какой форме.</p>
+
+<h2 id="Подведение_итогов">Подведение итогов</h2>
+
+<p>API геймпада очень прост в разработке. Теперь это проще, чем когда-либо, вы можете использовать браузер как консоль без необходимости каких-либо плагинов. Вы можете играть в полную версию игры Hungry Fridge непосредственно в вашем браузере, установить ее из <a href="https://marketplace.firefox.com/app/hungry-fridge">Firefox Marketplace</a> или проверить исходный код демо-версии вместе со всеми другими ресурсами в <a href="https://github.com/EnclaveGames/Hungry-Fridge">комплекте контента Gamepad API</a>.</p>
diff --git a/files/ru/games/techniques/index.html b/files/ru/games/techniques/index.html
new file mode 100644
index 0000000000..d404d7133c
--- /dev/null
+++ b/files/ru/games/techniques/index.html
@@ -0,0 +1,29 @@
+---
+title: Techniques for game development
+slug: Games/Techniques
+translation_of: Games/Techniques
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">This page lists essential core techniques for anyone wanting to develop games using open web technologies.</span></p>
+
+<p>These are the Ideas and Technique for game devlopment</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Techniques/Async_scripts">Using async scripts for asm.js</a></dt>
+ <dd>Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.</dd>
+ <dt><a href="/en-US/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></dt>
+ <dd>How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.</dd>
+ <dt><a href="/en-US/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Using WebRTC peer-to-peer data channels</a></dt>
+ <dd>In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></dt>
+ <dd>This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Audio_for_Web_Games">Audio for Web Games</a></dt>
+ <dd>Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></dt>
+ <dd>A concise introduction to collision detection in 2D games.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Tilemaps">Tilemaps</a></dt>
+ <dd>Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.</dd>
+</dl>
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>
diff --git a/files/ru/games/анатомия/index.html b/files/ru/games/анатомия/index.html
new file mode 100644
index 0000000000..0396fc4159
--- /dev/null
+++ b/files/ru/games/анатомия/index.html
@@ -0,0 +1,337 @@
+---
+title: Анатомия видеоигры
+slug: Games/Анатомия
+translation_of: Games/Anatomy
+---
+<div>{{GamesSidebar}}</div>
+
+<p>{{IncludeSubnav("/en-US/docs/Games")}}</p>
+
+<div class="summary">
+<p>Эта статья рассматривает анатомию и рабочий процесс создания средней видеоигры с технической точки зрения и определений того, как должен выглядеть главный цикл приложения. Она служит для помощи начинающим разработчикам в разработке современных игр, а также для понимания того, что необходимо знать при построении игры и как применять различные web-стандарты и инструменты, такие как JavaScript. Опытные разработчики игр, которые только пришли в мир web-разработки тоже могут почерпнуть для себя много интересного.</p>
+</div>
+
+<h2 id="Показать_получить_преобразовать_вычислить_повторить">Показать, получить, преобразовать, вычислить, повторить</h2>
+
+<p>Целью каждой видеоигры является  <strong>показ</strong> пользователю (пользователям) игровой ситуации, <strong>получение</strong> пользовательских сигналов, <strong>преобразования</strong> их в действия и <strong>вычисления</strong> новой ситуации как результат этих действий. Игры постоянно повторяют эти стадии, снова и снова, до тех пор пока не наступит завершающее условие (такое как победа, поражение, или выход из игры с целью поспать). Не удивительно, что данный шаблон соответствует тому как программируется игровая логика (движок).</p>
+
+<p>Особенности игр.</p>
+
+<p>Некоторые игры управляют своим циклом при помощи пользовательского ввода. Представьте, что вы разрабатываете игру типа <em>"найди разницу между этими двумя похожими картинками"</em>. Такого рода игры <strong>показывают</strong> пользователю две картинки; они <strong>получают</strong> их клики (или касания); они <strong>преобразуют</strong> ввод в успешный , не успешный, пауза, работа с меню, и так далее; в конечном итоге, в зависимости от данных действий, они <strong>вычисляют</strong> обновленное состояние сцены. Игровой цикл продвигается пользовательскими действиями и "спит" пока таковые отсутствуют. Это пример так называемой пошаговой игры, которая не зависит от постоянного обновления каждого кадра, а только от действий пользователя.</p>
+
+<p>Другие игры требуют контроля над каждым из минимально возможных индивидуальных временных интервалов. Те же принципы, что и выше, применяются с небольшим изменением: каждый кадр анимации продолжает цикл, и любое изменение пользовательского ввода фиксируется на первом доступном ходе. Эта покадровая модель реализована в так называемом <strong>основном цикле</strong>. Если ваша игра зацикливается на времени, то это будет её полномочия, которые будут соблюдать ваши симуляции.</p>
+
+<p>Но покадровое управление может и не понадобиться. Ваш игровой цикл может быть похож на пример <em>поиска отличий</em> и основан на входных событиях. Это может потребовать как ввода, так и симуляции времени. Он может даже зацикливаться на чем-то совершенно другом.</p>
+
+<p>Современный JavaScript, как описано в следующих разделах, к счастью, позволяет легко разработать эффективный основной цикл выполнения один раз в кадр. Конечно, ваша игра будет оптимизирована настолько, насколько вы ее сделаете. Если что-то выглядит так, как будто оно должно быть прикрепленно к более редкому исходу, то часто бывает хорошей идеей вырвать его из основного цикла (но не всегда).</p>
+
+<h2 id="Построение_основного_цикла_в_JavaScript">Построение основного цикла в JavaScript </h2>
+
+<p>Лучше всего JavaScript работает с событиями и callback функциями. Современные браузеры стремятся вызывать методы по мере необходимости и бездействовать (или выполнять другие задачи) в промежутках. Привязать код к моменту, который для него подходит — это отличная идея.  Подумайте о том, действительно ли ваша функция должна вызываться на строго определенном интервале времени, в каждом кадре или только после того, как произойдет что-то еще.  Подумайте о том, действительно ли функцию нужно вызывать в определённом интервале времени, на каждый кадр или только после того, как что-то произойдёт. Больше конкретики с браузером в том, когда функция должна быть вызвана, позволяет ему лучше оптимизировать этот процесс. Так же, вероятно, это облегчит вам работу.   </p>
+
+<p>Некоторый код должен выполняться кадр за кадром, так зачем же прикреплять эту функцию к чему-то другому, кроме графика перерисовки браузера? В Web, <code>{{ domxref("window.requestAnimationFrame()") }}</code> будет основой большинства хорошо запрограммированных покадровых основных циклов.  Callback функция должна быть передана ему при вызове. Callback функция будет выполнена в подходящее время перед следующей перерисовкой. Вот пример простого основного цикла:</p>
+
+<pre class="brush: js notranslate">window.main = function () {
+  window.requestAnimationFrame( main );
+
+  // Код, который цикл должен выполнить
+};
+
+main(); // Start the cycle</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: В каждом из методов <code>main()</code>, обсуждаемых здесь, мы планируем новый requestAnimationFrame перед выполнением нашего содержимого цикла. Это не случайно и считает лучшей практикой. Ранний вызов следующего <code>requestAnimationFrame </code>гарантирует, что браузер получит его вовремя, чтобы спланировать соответствующим образом, даже если ваш текущий кадр пропустит свое окно VSync.</p>
+</div>
+
+<p>Приведенный выше фрагмент кода содержит два оператора. Первый оператор создает функцию как глобальную переменную с именем <code>main()</code>.Эта функция выполняет некоторую работу, а также сообщает браузеру, что нужно вызвать следующий кадр с помощью <code>window.requestAnimationFrame()</code>. Второй оператор вызывает функцию <code>main()</code>, описанную в первом операторе. Поскольку <code>main()</code> вызывается один раз во втором операторе и каждый его вызов помещает себя в очерёдность действий, чтобы отрисовать следующий кадр, <code>main()</code> синхронизируется с вашей частотой кадров.</p>
+
+<p>Конечно, этот цикл не идеален. Прежде чем мы обсудим способы его изменения, давайте обсудим, что он уже делает хорошо.</p>
+
+<p>Синхронизация основного цикла с тем, когда браузер рисует на дисплее, позволяет запускать цикл так часто, как браузер хочет рисовать. Вам предоставляется контроль над каждым кадром анимации. Это также очень просто, потому что <code>main()</code> - единственная функция, которая зацикливается. Шутер от первого лица (или подобная игра) представляет новую сцену один раз в каждом кадре. Вы не можете добиться большей плавности и быстродействия.</p>
+
+<p>Но не стоит сразу предполагать, что анимация требует покадрового управления. Простые анимации можно легко выполнять даже с ускорением на GPU с помощью CSS-анимации и других инструментов, включенных в браузер. Их очень много и они сделают вашу жизнь проще.</p>
+
+<h2 id="Создание_улучшенного_основного_цикла_в_JavaScript.">Создание улучшенного основного цикла в JavaScript.</h2>
+
+<p>У нашего цикла есть две очевидные проблемы: <code>main()</code> загрязняет <code>{{ domxref("window") }}</code> объект (в нем хранятся все глобальные переменные) и код не оставляет нам возможность остановить цикл, если только вся вкладка не будет закрыта или обновлена. Для решения первой проблемы, если нужно, чтобы основной цикл просто выполнялся и вам не нужен легкий (прямой) доступ к нему, вы можете поместить его внутрь самовызывающейся Function Expression (IIFE).</p>
+
+<pre class="brush: js notranslate">/*
+* Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера
+* полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить,
+* что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало
+* новой строки, если предыдущая не была пустой или завершенной.
+*/
+
+;(function () {
+  function main() {
+    window.requestAnimationFrame( main );
+
+    // Содержание вашего основного цикла
+  }
+
+  main(); // Вызов цикла
+})();</pre>
+
+<p>Когда браузер наткнется на IIFE (Immediately Invoked Function Expression), он определит основной цикл и сразу же поставит его в очередь для следующего кадра. Он не будет привязан ни к какому объекту, и <code>main</code> (или <code>main()</code> для методов) будет неиспользуемым именем, доступным в остальной части приложения для определения чего-то другого.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> На практике распространено предотвращать следующий <code>requestAnimationFrame()</code> используя оператор if вместо вызова <code>cancelAnimationFrame()</code>.</p>
+</div>
+
+<p>Чтобы остановить основной цикл, вам понадобиться отменить вызов <code>main()</code> с помощью <code>{{ domxref("window.cancelAnimationFrame()") }}</code>. Необходимо передать в <code>cancelAnimationFrame()</code> идентификатор последнего вызова <code>requestAnimationFrame()</code>. Давайте предположим, что функции и переменные вашей игры были определены в пространстве имен, которое вы назвали <code>MyGame</code>.  В таком случае, основной цикл будет выглядеть следующим образом:</p>
+
+<pre class="brush: js notranslate">/*
+* Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера
+* полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить,
+* что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало
+* новой строки, если предыдущая не была пустой или завершенной.
+*
+* Давайте также предположим, что MyGame уже определена.
+*/
+
+;(function () {
+  function main() {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Содержание вашего основного цикла
+  }
+
+  main(); // Вызов цикла
+})();</pre>
+
+<p>Теперь у нас есть переменная <code>stopMain</code>, объявленная в нашем пространстве имен <code>MyGame</code>, которая содержит идентификатор последнего вызова <code>requestAnimationFrame()</code> нашего основного цикла.  В любой момент мы может остановить основной цикл, сказав браузеру, чтобы тот отменил запрос, соответствующий последнему маркеру.</p>
+
+<pre class="brush: js notranslate">window.cancelAnimationFrame( MyGame.stopMain );</pre>
+
+<p>Ключ к программированию основного цикла в JavaScript заключается в том, чтобы прикрепить его к любому событию, которое должно управлять вашими действиями, и обращать внимание на то, как различные системы учавствуют во взаимодействии. У вас может быть несколько компонентов, управляемых несколькими различными типами событий. Это может показаться излишним усложнением, но также может быть просто хорошей оптимизацией (не обязательно, конечно). Проблема в том, что вы не выстраиваете типичный основной цикл. В JavaScript вы используйте основной цикл браузера и стараетесь сделать это эффективно. </p>
+
+<h2 id="Построение_более_оптимизированного_основного_цикла_в_JavaScript">Построение <em>более оптимизированного</em> основного цикла в JavaScript</h2>
+
+<p>В конце контов, в JavaScript браузер выполняет свой собственный основной цикл, и ваш код существует на некоторых его этапах. В приведенных выше разделах описываются основные циклы, которые стараются не отнимать контроль у браузера. Их методы прикрепляют себя к  <code>window.requestAnimationFrame(),</code> который запрашивает контроль над предстоящим кадром у браузера.  Браузер решает, как связать эти запросы с их основным циклом. Спецификация <a href="http://www.w3.org/TR/animation-timing/">W3C для requestAnimationFrame</a> на самом деле точно не определяет, когда браузеры должны выполнять колбэки <code>requestAnimationFrame</code>. Это может быть приемуществом, поскольку позволяет поставщикам браузеров свободно экспериментировать с решениями, которые они считают лучшими, и настраивать их с течением времени.</p>
+
+<p>Современные версии Firefox и Google Chrome (вероятно, и другие) <em>пытаются </em>подключить колбэки <code>requestAnimationFrame</code> к своему основному потоку в самом начале временного интервала фрэйма<em>. </em>Таким образом основной поток браузера <em>пытается </em>выглядеть следующим образом: </p>
+
+<ol>
+ <li>Запустить новый кадр (пока предыдущий обрабатывается на дисплее.).</li>
+ <li>Пройтись по кэлбэкам <code>requestAnimationFrame</code> и вызвать их.</li>
+ <li>Выполнить сборку мусора и другие задачи для каждого кадра, когда вышеупомянутые колбэки перестают контролировать основной поток.</li>
+ <li>Спать (если только какое-либо событие не прервет сон браузера) до тех пор, пока монитор не будет готов к вашему изображению (<a href="http://www.techopedia.com/definition/92/vertical-sync-vsync">VSync</a>), и повторить его.</li>
+</ol>
+
+<p>Вы можете думать о разработке realtime applications, как о запасе времени для работы. Все вышеперечисленные шаги должны выполняться каждые 16  с половиной миллисекунд, чтобы не отставать от дисплея с чистатой 60Гц.  Браузеры вызывают ваш код таким образом, чтобы предаставить ему максимум времени для вычислений. Ваш основной поток часто запускает рабочие нагрузки, которые даже не находятся в основном потоке (Например, растеризация или шейдеры в WebGL).  Большие вычисления могут выполняться на Web Worker-e или GPU одновременно с тем, как браузер использует свой основной поток для управления сборкой мусора, обработки асинхронных вызовов или других задач. </p>
+
+<p>Пока мы обсуждаем распределение нашего временного бюджета, многие браузеры имеют инструмент под названием <em>High Resolution Time. Объект</em> {{ domxref("Date") }} больше не используется в качестве основного метода синхронизации событий, поскольку он очень не точен и может быть изменен системными часами. High Resolution Time, с другой стороны, подсчитывает колличество миллисекунд начиная с <code>navigationStart</code> (при выгрузке предыдущего документа). Это значение возвращается в виде десятичного числа с точностью до миллисекунды.  Он известен как <code>DOMHighResTimeStamp</code>, но для всех целей и задач считайте его числом с плавающей запятой.  </p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Системы (аппаратные или программные), которые не могу обеспечить точность в микросекундах, могут по крайней мере обеспечить точность в миллисекундах.  Однако, они должны обеспечивать точность до 0,001 мс, если способны на это. </p>
+</div>
+
+
+
+<p>Это значение нельзя использовать само по себе, потому что оно относиться к неинтересному событию, но его можно вычесть из другой временной ветки, чтобы четко и точно определить, сколько времени прошло между этими двумя точками. Чтобы получить одну из этих временных меток, вы можете вызвать <code>window.performance.now()</code> и сохранить результат в переменную. </p>
+
+<pre class="brush: js notranslate">var tNow = window.performance.now();
+</pre>
+
+<p>Возвращаемся к основному циклу. Часто вам понадобиться узнать, когда ваша основная функция  была вызвана. Это обычное дело, <code>window.requestAnimationFrame()</code> при выполнени всегда предоставляет метку <code>DOMHighResTimeStamp</code> в качетве аргумента для функций обратного вызова (callbacks). Это приводит к очередному улучшению нашего основного цикла. </p>
+
+<pre class="brush: js notranslate">/*
+* Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера
+* полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить,
+* что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало
+* новой строки, если предыдущая не была пустой или завершенной.
+*
+* Давайте также предположим, что MyGame уже определена.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Содержимое вашего основного цикла
+    // tFrame, из "function main ( tFrame )", это DOMHighResTimeStamp предоставленный requestAnimationFrame.
+  }
+
+  main(); // Начало цикла
+})();</pre>
+
+<p>Возможно несколько других оптимизаций, которые зависят от того, что делает ваша игра. Ваш игровой жанр очевидно будет иметь значение, но он может быть даже более продуманным. </p>
+
+<p>Several other optimizations are possible and it really depends on what your game attempts to accomplish. Your game genre will obviously make a difference but it could even be more subtle than that. You could draw every pixel individually on a canvas or you could layer DOM elements (including multiple WebGL canvases with transparent backgrounds if you want) into a complex hierarchy. Each of these paths will lead to different opportunities and constraints.</p>
+
+<h2 id="It_is_decision..._time">It is decision... time</h2>
+
+<p>You will need to make hard decisions about your main loop: how to simulate the accurate progress of time. If you demand per-frame control then you will need to determine how frequently your game will update and draw. You might even want update and draw to occur at different rates. You will also need to consider how gracefully your game will fail if the user's system cannot keep up with the workload. Let us start by assuming that you will handle user input and update the game state every time you draw. We will branch out later.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Changing how your main loop deals with time is a debugging nightmare, everywhere. Think about your needs carefully before working on your main loop.</p>
+</div>
+
+<h3 id="What_most_browser_games_should_look_like">What most browser games should look like</h3>
+
+<p>If your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. You can simply update, render, and then do nothing until VSync.</p>
+
+<pre class="brush: js notranslate">/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    update( tFrame ); // Call your update method. In our case, we give it rAF's timestamp.
+    render();
+  }
+
+  main(); // Start the cycle
+})();</pre>
+
+<p>If the maximum refresh rate cannot be reached, quality settings could be adjusted to stay under your time budget. The most famous example of this concept is the game from id Software, RAGE. This game removed control from the user in order to keep its calculation time at roughly 16ms (or roughly 60fps). If computation took too long then rendered resolution would decrease, textures and other assets would fail to load or draw, and so forth. This (non-web) case study made a few assumptions and tradeoffs:</p>
+
+<ul>
+ <li>Each frame of animation accounts for user input.</li>
+ <li>No frame needs to be extrapolated (guessed) because each draw has its own update.</li>
+ <li>Simulation systems can basically assume that each full update is ~16ms apart.</li>
+ <li>Giving the user control over quality settings would be a nightmare.</li>
+ <li>Different monitors input at different rates: 30 FPS, 75 FPS, 100 FPS, 120 FPS, 144 FPS, etc.</li>
+ <li>Systems that are unable to keep up with 60 FPS lose visual quality to keep the game running at optimal speed (eventually it outright fails, if quality becomes too low.)</li>
+</ul>
+
+<h3 id="Other_ways_to_handle_variable_refresh_rate_needs">Other ways to handle variable refresh rate needs</h3>
+
+<p>Other methods of tackling the problem exist.</p>
+
+<p>One common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. The update method can continue looping without care about what the user sees. The draw method can view the last update and when it happened. Since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. It does not matter whether this is more frequent than the official update loop (or even less frequent). The update method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. There are many ways to separate the update method in web standards:</p>
+
+<ul>
+ <li>Draw on <code>requestAnimationFrame</code> and update on a {{ domxref("window.setInterval") }} or {{ domxref("window.setTimeout") }}.
+
+  <ul>
+   <li>This uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.)</li>
+  </ul>
+ </li>
+ <li>Draw on <code>requestAnimationFrame</code> and update on a <code>setInterval</code> or <code>setTimeout</code> in a <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a>.
+  <ul>
+   <li>This is the same as above, except update does not hog the main thread (nor does the main thread hog it). This is a more complex solution, and might be too much overhead for simple updates.</li>
+  </ul>
+ </li>
+ <li>Draw on <code>requestAnimationFrame</code> and use it to poke a Web Worker containing the update method with the number of ticks to compute, if any.
+  <ul>
+   <li>This sleeps until <code>requestAnimationFrame</code> is called and does not pollute the main thread, plus you are not relying on old fashioned methods. Again, this is a bit more complex than the previous two options, and <em>starting</em> each update will be blocked until the browser decides to fire rAF callbacks.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Each of these methods have similar tradeoffs:</p>
+
+<ul>
+ <li>Users can skip rendering frames or interpolate extra ones depending on their performance.</li>
+ <li>You can count on all users updating non-cosmetic variables at the same constant frequency minus hiccups.</li>
+ <li>Much more complicated to program than the basic loops we saw earlier.</li>
+ <li>User input is completely ignored until the next update (even if the user has a fast device).</li>
+ <li>The mandatory interpolation has a performance penalty.</li>
+</ul>
+
+<p>A separate update and draw method could look like the following example. For the sake of demonstration, the example is based on the third bullet point, just without using Web Workers for readability (and, let's be honest, writability).</p>
+
+<div class="warning">
+<p><strong>Note:</strong> This example, specifically, is in need of technical review.</p>
+</div>
+
+<pre class="brush: js notranslate">/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*
+* MyGame.lastRender keeps track of the last provided requestAnimationFrame timestamp.
+* MyGame.lastTick keeps track of the last update time. Always increments by tickLength.
+* MyGame.tickLength is how frequently the game state updates. It is 20 Hz (50ms) here.
+*
+* timeSinceTick is the time between requestAnimationFrame callback and last update.
+* numTicks is how many updates should have happened between these two rendered frames.
+*
+* render() is passed tFrame because it is assumed that the render method will calculate
+*          how long it has been since the most recently passed update tick for
+*          extrapolation (purely cosmetic for fast devices). It draws the scene.
+*
+* update() calculates the game state as of a given point in time. It should always
+*          increment by tickLength. It is the authority for game state. It is passed
+*          the DOMHighResTimeStamp for the time it represents (which, again, is always
+*          last update + MyGame.tickLength unless a pause feature is added, etc.)
+*
+* setInitialState() Performs whatever tasks are leftover before the mainloop must run.
+*                   It is just a generic example function that you might have added.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+    var nextTick = MyGame.lastTick + MyGame.tickLength;
+    var numTicks = 0;
+
+    // If tFrame &lt; nextTick then 0 ticks need to be updated (0 is default for numTicks).
+    // If tFrame = nextTick then 1 tick needs to be updated (and so forth).
+    // Note: As we mention in summary, you should keep track of how large numTicks is.
+    // If it is large, then either your game was asleep, or the machine cannot keep up.
+    if (tFrame &gt; nextTick) {
+      var timeSinceTick = tFrame - MyGame.lastTick;
+      numTicks = Math.floor( timeSinceTick / MyGame.tickLength );
+    }
+
+    queueUpdates( numTicks );
+    render( tFrame );
+    MyGame.lastRender = tFrame;
+  }
+
+  function queueUpdates( numTicks ) {
+    for(var i=0; i &lt; numTicks; i++) {
+      MyGame.lastTick = MyGame.lastTick + MyGame.tickLength; // Now lastTick is this tick.
+      update( MyGame.lastTick );
+    }
+  }
+
+  MyGame.lastTick = performance.now();
+  MyGame.lastRender = MyGame.lastTick; // Pretend the first draw was on first update.
+  MyGame.tickLength = 50; // This sets your simulation to run at 20Hz (50ms)
+
+  setInitialState();
+  main(performance.now()); // Start the cycle
+})();</pre>
+
+<p>Another alternative is to simply do certain things less often. If a portion of your update loop is difficult to compute but insensitive to time, you might consider scaling back its frequency and, ideally, spreading it out into chunks throughout that lengthened period. An implicit example of this is found over at The Artillery Blog for Artillery Games, where they <a href="http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html">adjust their rate of garbage generation</a> to optimize garbage collection. Obviously, cleaning up resources is not time sensitive (especially if tidying is more disruptive than the garbage itself).</p>
+
+<p>This may also apply to some of your own tasks. Those are good candidates to throttle when available resources become a concern.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>I want to be clear that any of the above, or none of them, could be best for your game. The correct decision entirely depends on the trade-offs that you are willing (and unwilling) to make. The concern is mostly with switching to another option. Fortunately, I do not have any experience with this, but I have heard it is an excruciating game of Whack-a-Mole.</p>
+
+<p>An important thing to remember for managed platforms, like the web, is that your loop may stop execution for significant periods of time. This could occur when the user unselects your tab and the browser sleeps (or slows) its <code>requestAnimationFrame</code> callback interval. You have many ways to deal with this situation and this could depend on whether your game is single player or multiplayer. Some choices are:</p>
+
+<ul>
+ <li>Consider the gap "a pause" and skip the time.
+  <ul>
+   <li>You can probably see how this is problematic for most multiplayer games.</li>
+  </ul>
+ </li>
+ <li>You can simulate the gap to catch up.
+  <ul>
+   <li>This can be a problem for long drops and/or complex updates.</li>
+  </ul>
+ </li>
+ <li>You can recover the game state from a peer or the server.
+  <ul>
+   <li>This is ineffective if your peers or server are out-of-date too, or they don't exist because the game is single player and doesn't have a server.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Once your main loop has been developed and you have decided on a set of assumptions and tradeoffs which suit your game, it is now just a matter of using your decisions to calculate any applicable physics, AI, sounds, network synchronization, and whatever else your game may require.</p>
diff --git a/files/ru/games/ввод/index.html b/files/ru/games/ввод/index.html
new file mode 100644
index 0000000000..65d1aed2c0
--- /dev/null
+++ b/files/ru/games/ввод/index.html
@@ -0,0 +1,121 @@
+---
+title: Ввод в разработку Web-игр
+slug: Games/Ввод
+tags:
+  - Firefox OS
+  - Игры
+  - уроки
+translation_of: Games/Introduction
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ru/docs/Games")}}</div>
+
+<p>Современный web позволяет не только передавать различную информацию, но и создавать интерактивный контент. Например, потрясающие, высококачественные игры.</p>
+
+<p>Диапазон игр, которые Вы можете встретить в web поражает и не устапает "нативным" играм, реализованным с использованием языка программирования c++ и java.Причем это касается не только относительно небольших игр, но и объемных игр жанра РПГ, 3d шутерах и многоом другом. Это уже не аналоги простых карточных игр или многопользовательских социальных играх, реализованных с помощью Flash®, а гораздо более сложные вещи. Благодаря значительным улучшениям языка программирования JavaScript и появлению новых API браузера, Вы можете создавать игры, не зависящие от операционной системы. Для их работы необходим только браузер. А иногда, например на устройствах с поддержкой <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5">HTML5</a>, таких как <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>, не нужен даже он.</p>
+
+<h2 id="Игровая_платформа_HTML5">Игровая платформа HTML5</h2>
+
+<p>Вы действительно можете подумать, что Web - лучшая платформа для вашей игры. Как мы любим говорить:"Web - это тоже платформа." Давайте посмотрим на главные аспекты Web платформы:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Функционал</th>
+   <th scope="col">Технология</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Аудио</strong></td>
+   <td><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Графика</strong></td>
+   <td><a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
+  </tr>
+  <tr>
+   <td><strong>Ввод</strong></td>
+   <td><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Touch events</a>, <a href="/en-US/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>, датчики устройства, <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a>, <a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a>, <a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Язык</strong></td>
+   <td><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> (или C/C++ используйте <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> для компиляции в JavaScript)</td>
+  </tr>
+  <tr>
+   <td><strong>Сеть</strong></td>
+   <td><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> и/или <a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></td>
+  </tr>
+  <tr>
+   <td><strong>Данные</strong></td>
+   <td><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> или "облако"</td>
+  </tr>
+  <tr>
+   <td><strong>Веб</strong></td>
+   <td><a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/Social_API" title="/en-US/docs/Social_API">Social API</a> (и многое другое!)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Экономическое_обоснование">Экономическое обоснование</h2>
+
+<p>Как разработчик игр, независимо от того, являетесь ли вы частным лицом или крупной игровой студией, вы хотите знать, почему имеет смысл ориентироваться на Web со своим игровым проектом. Давайте посмотрим, как сеть может помочь вам.</p>
+
+<p>1. Охват паутины огромен, она повсюду. Игры, построенные на HTML5, работают на смартфонах, планшетах, ПК и смарт-телевизорах.</p>
+
+<p>2. Маркетинг и открытость улучшаются. Вы не ограничиваетесь продвижением своего приложения в чужом магазине приложений. Вместо этого вы можете рекламировать и продвигать свою игру по всему интернету, а также в других средствах массовой информации, используя преимущества присущей сети связности и доступности для новых клиентов.</p>
+
+<p>3. У вас есть контроль, где это имеет значение: Платежи. Вы не должны отдавать 30% своих доходов кому-то другому только потому, что ваша игра в их экосистеме. Вместо этого, взимать плату, что вы хотите, и использовать любую услугу обработки платежей вам нравится.</p>
+
+<p>4. Опять же, с большим контролем, вы можете обновить игру, когда захотите. Не жди, затаив дыхание, одобрения, пока кто-то прячется внутри другого.</p>
+
+<p>5. Контролируйте свою аналитику! Вместо того чтобы полагаться на кого-то другого в принятии решений о том, какая аналитика вам нужна, вы можете собрать свою собственную-или выбрать третью сторону, которая вам больше всего нравится, - чтобы собрать информацию о ваших продажах и досягаемости вашей игры.</p>
+
+<p>6. Вы можете управлять своими отношениями с клиентами более тесно, по-своему. Больше не придётся работать с обратной связью магазина приложений. Взаимодействуйте со своими клиентами так, как вы хотите, без посредника.</p>
+
+<p>7. Ваши игроки могут играть в вашу игру в любом месте, в любое время. Поскольку Web распространен повсеместно, ваши клиенты могут проверить статус своей игры на своих телефонах, планшетах, домашних ноутбуках, рабочих столах или на чем-либо еще.</p>
+
+<h2 id="Web-технологии_для_разработчиков_игр">Web-технологии для разработчиков игр</h2>
+
+<p>Давайте покопаемся в API Web'а, которое приносит на стол и обслуживает разработчиков игр. Вот подробный список, чтобы дать вам представление о том, что Web может сделать для вас:</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a></dt>
+ <dd>Этот простой API позволяет вашей игре использовать весь экран, тем самым погружая игрока в действие.</dd>
+ <dt><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a></dt>
+ <dd>Если вы хотите, чтобы ваши пользователи могли использовать геймпады и прочие игровые контроллеры для работы с игрой, вам потребуется этот API</dd>
+ <dt><a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> и <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a></dt>
+ <dd>Эти технологии помогут вам создать и разместить UI вашей игры, а HTML-элемент {{HTMLElement("canvas")}} это один из способов создать 2D-графику</dd>
+ <dt><a href="/en-US/docs/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio">HTML audio</a></dt>
+ <dd>Элемент {{HTMLElement ("audio")}} позволяет легко воспроизводить простые звуковые эффекты и музыку. Если ваше потребности выше, ознакомьтесь с Web Audio API для полной мощности обработки звука!</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
+ <dd>Мощный API для хранения пользовательских данных на собственном компьютере или устройстве. Отличный способ локально сохранить состояние игры и другую информацию, без необходимости подгружать ее каждый раз при необходимости. Также полезно дял того, чтобы сделать ваш проект играбельным, даже если пользователь не подключен к Интернету (например, когда он оказался в самолете на несколько часов).</dd>
+ <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript, язык программирования, используемый в Интернете, быстро развивается в современных браузерах и становится ещё быстрее. Используйте его возможности для написания кода своей игры или используйте такие технологии, как Emscripten или Asm.js, чтобы с легкотью переносить существующие игры.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></dt>
+ <dd>API Pointer Lock позволяет блокировать мышь или другое указывающее устройство в интерфейсе вашей игры. Вместо абсолютного позиционирования курсора вы получаете координаты дельты, которые дают вам более точные измерения того, что делает пользователь, и предотвращают случайную отправку ввода где-то еще, тем самым упуская важные пользовательские действия.</dd>
+ <dt></dt>
+ <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a> (масштабируемая векторная графика)</dt>
+ <dd>Позволяет создавать векторную графику, которая плавно масштабируется независимо от размера или разрешения дисплея пользователя.</dd>
+ <dt><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></dt>
+ <dd>Типизированные массивы JavaScript дают вам доступ к необработанным двоичным данным из кода, что позволяет вам манипулировать текстурами GL, игровыми данными или чем-то еще, даже если код не в формате JavaScript.</dd>
+ <dt><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></dt>
+ <dd>Этот API необходим для управления воспроизведением, синтезом звука и манипулированием аудио из кода JavaScript. Позволяет создавать потрясающие звуковые эффекты, а также воспроизводить и манипулировать музыкой в ​​режиме реального времени.</dd>
+ <dt><a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
+ <dd>Позволяет создавать высокопроизводительную аппаратно-ускоренную 3D (и 2D) графику из веб-контента. Это веб-реализация <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd>API WebRTC (Real-Time Communications) дает вам возможность управлять аудио- и видеоданными, включая телеконференции и передачу данных из других приложений между двумя пользователями. Хотите, чтобы ваши игроки могли общаться друг с другом, взрывая монстров? Это API для вас!</dd>
+ <dt><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">The WebSocket API позволяет подключить ваше приложение или сайт к серверу для передачи данных в реальном времени. Идеально подходит для многопользовательских игр, чатов и т. д.</p>
+ </dd>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
+ <dd>Web Workers даёт вам возможность создавать фоновые потоки, выполняющие собственный код JavaScript, используя преимущества современных многоядерных процессоров.</dd>
+ <dt><a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> и <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API" title="/en-US/docs/DOM/File_API">File API</a></dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Комбинация XMLHttpRequest и File API позволяет отправлять и получать любые нужные для вас данные (не позволяйте «XML» выкинуть вас!) с веб-сервера. Это отличный способ сделать что угодно: от загрузки новых игровых уровней и иллюстраций, до передачи информации о статусе игры в режиме  non-real-time и обратно.</p>
+ </dd>
+</dl>
+</div>
diff --git a/files/ru/games/инструменты/asm.js/index.html b/files/ru/games/инструменты/asm.js/index.html
new file mode 100644
index 0000000000..3f9b2afde0
--- /dev/null
+++ b/files/ru/games/инструменты/asm.js/index.html
@@ -0,0 +1,30 @@
+---
+title: asm.js
+slug: Games/Инструменты/asm.js
+tags:
+  - JavaScript
+  - WebAssembly
+  - asm.js
+translation_of: Games/Tools/asm.js
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary"><a href="http://asmjs.org/">Asm.js</a> - это подмножество JavaScript, имеющее более высокую оптимизацию. В этой статье описаны возможности asm.js, улучшения которые оно дает, где и как это можно применять, а также дополнительные ресурсы и примеры.</span></p>
+</div>
+
+<h2 id="Что_такое_asm.js">Что такое asm.js?</h2>
+
+<p>Это небольшое, более строгое подмножество JavaScript которое ограничивает стандартный язык только конструкциями, типа `while`, `if` и данными в виде чисел, именованных функций, и другими простыми вещами. Оно не разрешает использование объектов, строк, и всего, что требует больших нагрузок. <a href="http://asmjs.org/">Asm.js</a> напоминает C во многих вещах, но он является полностью валидным кодом на JavaScript и работает на всех имеющихся движках. Он позволяет JS движкам, поддерживающим <a href="http://asmjs.org/">asm.js</a>, оптимизировать такой код и даёт компиляторам, типа Emscripten, чёткое определение того, как нужно компилировать. Мы покажем, как asm.js код выглядит, чем он полезен и как с ним работать.</p>
+
+<p>Это подмножество JavaScript уже автоматически используется во многих движках, использующих технологию компиляции <a href="https://ru.wikipedia.org/wiki/JIT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F">Just-In-Time (JIT)</a>. Однако, указав явный стандарт, мы можем улучшить оптимизацию такого кода и получить максимальную производительность. Благодаря этому, упрощается совместная работа нескольких JS движков, потому что легче договориться о стандартах. Идея в том, что этот вид кода должен работать очень быстро в каждом движке, и если это не так, это ошибка, и есть четкая спецификация, что именно движки должны оптимизировать.</p>
+
+<p>Это также делает <a href="http://asmjs.org/">asm.js</a> достаточно простым для людей, которые пишут компиляторы высокопроизводительного кода под web. Они могут обратиться к спецификации <a href="http://asmjs.org/">asm.js</a>, чтобы найти более быстрые паттерны для него. <a href="https://github.com/kripken/emscripten">Emscripten</a>, компилятор C/C++ в JavaScript, выдает код <a href="http://asmjs.org/">asm.js</a>, работающий в некоторых браузерах с производительностью, близкой к машинному коду.</p>
+
+<p>Кроме того, если движок специально распознает код <a href="http://asmjs.org/">asm.js</a>, то можно сделать еще больше оптимизаций. На данный момент Chrome (<a href="https://www.chromestatus.com/feature/5053365658583040">статус</a>) и Firefox обладают поддержкой asm.js. Firefox имеет поддержку передовых фич asm.js</p>
+
+<h2 id="В_общем_об_asm.js">В общем об asm.js</h2>
+
+<p><a href="http://asmjs.org/">asm.js</a> - это вспомогательное подмножество языка JavaScript. Он имеет предсказуемый уровень производительности, т.к. ограничен только лишь некоторыми строгими типами и конструкциями. Рабочие характеристики близки скорее к машинному коду, чем к стандартам JS. Использование этого подмножества уже поддерживается главными веб браузерами. Работа <a href="http://asmjs.org/">asm.js</a> также зависит от браузера и от оборудования.</p>
diff --git a/files/ru/games/инструменты/index.html b/files/ru/games/инструменты/index.html
new file mode 100644
index 0000000000..8981085874
--- /dev/null
+++ b/files/ru/games/инструменты/index.html
@@ -0,0 +1,33 @@
+---
+title: Инструменты для разработки игр
+slug: Games/Инструменты
+translation_of: Games/Tools
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">На этой странице вы можете найти ссылки на наши статьи по инструментам для разработки игр, </span>которая в конечном итоге нацелена на покрытие фреймворков, компиляторов и инструментов отладки<span class="seoSummary">.</span></p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Tools/asm.js">asm.js</a></dt>
+ <dd>asm.js это очень ограниченное подмножество языка JavaScript, которое можно значительно оптимизировать и запустить в опережающем времени (AOT), компилируя движок гораздо быстрее, чем при типичной произвоительности языка. А это, конечно же, замечательно для игр.</dd>
+ <dt><a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a></dt>
+ <dd>
+ <p>Низккоуровневя виртуальная машина(LLVM) для JavaScript; с Emscripten вы можете компилировать C++ и другие языки, которые можно копировать в байткод LLVM с высокоц производительностью JavaScript. Это отличный веб-инструмент! Вот <a href="https://github.com/kripken/emscripten/wiki/Tutorial">полезный туториал по Emscripten</a>, доступный на вики. Заметьте, что мы <a href="/en-US/docs/Emscripten">стремимся охватить Emscripten в своих разделах на MDN</a>.</p>
+ </dd>
+ <dt><a href="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/" title="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/">Gecko profiler</a></dt>
+ <dd>Gecko profiler позволяет профилировать код, чтобы понять, где имеются проблемы производительности, и добиться максимальной скорости в .</dd>
+ <dt><a href="/en-US/docs/Games/Tools/Engines_and_tools">Игровые движки и инструменты</a></dt>
+ <dd>Список движков, шаблонов и технологий, полезных для разработчиков.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Projects/Shumway">Shumway</a></dt>
+ <dd>Shumway это рендер для Adobe Flash построенный полностью на JavaScript, WebGL, etc., преодолевающий разрыв между Flash и web-стандартами. Это статья поясняет, как пользоваться Shumway,и как вносить исправления в проекте.</dd>
+ <dt>Инструментарий для разработки и отладки игр</dt>
+ <dd>Чем это отличается от обычной отладки веб-приложения? Какие специальные инструменты доступны? Многое из этого доступно в <a href="/en-US/docs/Tools">инструментах</a>, но здесь мы должны обеспечить своего рода практический учебник для отладки игры, с ссылками :
+ <ul>
+  <li>Обзор базовых инстурментов</li>
+  <li><a href="/en-US/docs/Tools/Shader_Editor">Редактор шейдеров</a></li>
+  <li>Производственные инструменты (все еще находятся в производстве, по оценкам, в начале 2014 года)</li>
+ </ul>
+ </dd>
+</dl>