From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- files/ru/games/anatomy/index.html | 34 +++++++++++----------- files/ru/games/index.html | 16 +++++----- files/ru/games/introduction/index.html | 14 ++++----- .../index.html | 14 ++++----- .../3d_on_the_web/glsl_shaders/index.html | 2 +- files/ru/games/techniques/async_scripts/index.html | 4 +-- .../techniques/controls_gamepad_api/index.html | 26 ++++++++--------- files/ru/games/tools/asm.js/index.html | 8 ++--- files/ru/games/tools/index.html | 2 +- .../build_the_brick_field/index.html | 2 +- .../2d_breakout_game_phaser/extra_lives/index.html | 4 +-- .../2d_breakout_game_phaser/game_over/index.html | 2 +- .../2d_breakout_game_phaser/physics/index.html | 2 +- .../player_paddle_and_controls/index.html | 2 +- .../2d_breakout_game_phaser/scaling/index.html | 2 +- .../win_the_game/index.html | 2 +- .../bounce_off_the_walls/index.html | 14 ++++----- .../build_the_brick_field/index.html | 8 ++--- .../collision_detection/index.html | 10 +++---- .../finishing_up/index.html | 4 +-- .../game_over/index.html | 8 ++--- .../2d_breakout_game_pure_javascript/index.html | 6 ++-- .../mouse_controls/index.html | 4 +-- .../paddle_and_keyboard_controls/index.html | 10 +++---- .../track_the_score_and_win/index.html | 12 ++++---- 25 files changed, 106 insertions(+), 106 deletions(-) (limited to 'files/ru/games') diff --git a/files/ru/games/anatomy/index.html b/files/ru/games/anatomy/index.html index 91949c9ac0..b3022fa527 100644 --- a/files/ru/games/anatomy/index.html +++ b/files/ru/games/anatomy/index.html @@ -18,17 +18,17 @@ original_slug: Games/Анатомия

Особенности игр.

-

Некоторые игры управляют своим циклом при помощи пользовательского ввода. Представьте, что вы разрабатываете игру типа "найди разницу между этими двумя похожими картинками". Такого рода игры показывают пользователю две картинки; они получают их клики (или касания); они преобразуют ввод в успешный , не успешный, пауза, работа с меню, и так далее; в конечном итоге, в зависимости от данных действий, они вычисляют обновленное состояние сцены. Игровой цикл продвигается пользовательскими действиями и "спит" пока таковые отсутствуют. Это пример так называемой пошаговой игры, которая не зависит от постоянного обновления каждого кадра, а только от действий пользователя.

+

Некоторые игры управляют своим циклом при помощи пользовательского ввода. Представьте, что вы разрабатываете игру типа "найди разницу между этими двумя похожими картинками". Такого рода игры показывают пользователю две картинки; они получают их клики (или касания); они преобразуют ввод в успешный , не успешный, пауза, работа с меню, и так далее; в конечном итоге, в зависимости от данных действий, они вычисляют обновлённое состояние сцены. Игровой цикл продвигается пользовательскими действиями и "спит" пока таковые отсутствуют. Это пример так называемой пошаговой игры, которая не зависит от постоянного обновления каждого кадра, а только от действий пользователя.

Другие игры требуют контроля над каждым из минимально возможных индивидуальных временных интервалов. Те же принципы, что и выше, применяются с небольшим изменением: каждый кадр анимации продолжает цикл, и любое изменение пользовательского ввода фиксируется на первом доступном ходе. Эта покадровая модель реализована в так называемом основном цикле. Если ваша игра зацикливается на времени, то это будет её полномочия, которые будут соблюдать ваши симуляции.

Но покадровое управление может и не понадобиться. Ваш игровой цикл может быть похож на пример поиска отличий и основан на входных событиях. Это может потребовать как ввода, так и симуляции времени. Он может даже зацикливаться на чем-то совершенно другом.

-

Современный JavaScript, как описано в следующих разделах, к счастью, позволяет легко разработать эффективный основной цикл выполнения один раз в кадр. Конечно, ваша игра будет оптимизирована настолько, насколько вы ее сделаете. Если что-то выглядит так, как будто оно должно быть прикреплено к более редкому исходу, то часто бывает хорошей идеей вырвать его из основного цикла (но не всегда).

+

Современный JavaScript, как описано в следующих разделах, к счастью, позволяет легко разработать эффективный основной цикл выполнения один раз в кадр. Конечно, ваша игра будет оптимизирована настолько, насколько вы её сделаете. Если что-то выглядит так, как будто оно должно быть прикреплено к более редкому исходу, то часто бывает хорошей идеей вырвать его из основного цикла (но не всегда).

Построение основного цикла в JavaScript 

-

Лучше всего JavaScript работает с событиями и callback функциями. Современные браузеры стремятся вызывать методы по мере необходимости и бездействовать (или выполнять другие задачи) в промежутках. Привязать код к моменту, который для него подходит — это отличная идея.  Подумайте о том, действительно ли ваша функция должна вызываться на строго определенном интервале времени, в каждом кадре или только после того, как произойдет что-то еще.  Подумайте о том, действительно ли функцию нужно вызывать в определённом интервале времени, на каждый кадр или только после того, как что-то произойдёт. Больше конкретики с браузером в том, когда функция должна быть вызвана, позволяет ему лучше оптимизировать этот процесс. Так же, вероятно, это облегчит вам работу.   

+

Лучше всего JavaScript работает с событиями и callback функциями. Современные браузеры стремятся вызывать методы по мере необходимости и бездействовать (или выполнять другие задачи) в промежутках. Привязать код к моменту, который для него подходит — это отличная идея.  Подумайте о том, действительно ли ваша функция должна вызываться на строго определённом интервале времени, в каждом кадре или только после того, как произойдёт что-то ещё.  Подумайте о том, действительно ли функцию нужно вызывать в определённом интервале времени, на каждый кадр или только после того, как что-то произойдёт. Больше конкретики с браузером в том, когда функция должна быть вызвана, позволяет ему лучше оптимизировать этот процесс. Так же, вероятно, это облегчит вам работу.   

Некоторый код должен выполняться кадр за кадром, так зачем же прикреплять эту функцию к чему-то другому, кроме графика перерисовки браузера? В Web, {{ domxref("window.requestAnimationFrame()") }} будет основой большинства хорошо запрограммированных покадровых основных циклов.  Callback функция должна быть передана ему при вызове. Callback функция будет выполнена в подходящее время перед следующей перерисовкой. Вот пример простого основного цикла:

@@ -41,26 +41,26 @@ original_slug: Games/Анатомия main(); // Start the cycle
-

Примечание: В каждом из методов main(), обсуждаемых здесь, мы планируем новый requestAnimationFrame перед выполнением нашего содержимого цикла. Это не случайно и считает лучшей практикой. Ранний вызов следующего requestAnimationFrame гарантирует, что браузер получит его вовремя, чтобы спланировать соответствующим образом, даже если ваш текущий кадр пропустит свое окно VSync.

+

Примечание: В каждом из методов main(), обсуждаемых здесь, мы планируем новый requestAnimationFrame перед выполнением нашего содержимого цикла. Это не случайно и считает лучшей практикой. Ранний вызов следующего requestAnimationFrame гарантирует, что браузер получит его вовремя, чтобы спланировать соответствующим образом, даже если ваш текущий кадр пропустит своё окно VSync.

-

Приведенный выше фрагмент кода содержит два оператора. Первый оператор создает функцию как глобальную переменную с именем main().Эта функция выполняет некоторую работу, а также сообщает браузеру, что нужно вызвать следующий кадр с помощью window.requestAnimationFrame(). Второй оператор вызывает функцию main(), описанную в первом операторе. Поскольку main() вызывается один раз во втором операторе и каждый его вызов помещает себя в очерёдность действий, чтобы отрисовать следующий кадр, main() синхронизируется с вашей частотой кадров.

+

Приведённый выше фрагмент кода содержит два оператора. Первый оператор создаёт функцию как глобальную переменную с именем main().Эта функция выполняет некоторую работу, а также сообщает браузеру, что нужно вызвать следующий кадр с помощью window.requestAnimationFrame(). Второй оператор вызывает функцию main(), описанную в первом операторе. Поскольку main() вызывается один раз во втором операторе и каждый его вызов помещает себя в очерёдность действий, чтобы отрисовать следующий кадр, main() синхронизируется с вашей частотой кадров.

Конечно, этот цикл не идеален. Прежде чем мы обсудим способы его изменения, давайте обсудим, что он уже делает хорошо.

Синхронизация основного цикла с тем, когда браузер рисует на дисплее, позволяет запускать цикл так часто, как браузер хочет рисовать. Вам предоставляется контроль над каждым кадром анимации. Это также очень просто, потому что main() - единственная функция, которая зацикливается. Шутер от первого лица (или подобная игра) представляет новую сцену один раз в каждом кадре. Вы не можете добиться большей плавности и быстродействия.

-

Но не стоит сразу предполагать, что анимация требует покадрового управления. Простые анимации можно легко выполнять даже с ускорением на GPU с помощью CSS-анимации и других инструментов, включенных в браузер. Их очень много и они сделают вашу жизнь проще.

+

Но не стоит сразу предполагать, что анимация требует покадрового управления. Простые анимации можно легко выполнять даже с ускорением на GPU с помощью CSS-анимации и других инструментов, включённых в браузер. Их очень много и они сделают вашу жизнь проще.

Создание улучшенного основного цикла в JavaScript.

-

У нашего цикла есть две очевидные проблемы: main() загрязняет {{ domxref("window") }} объект (в нем хранятся все глобальные переменные) и код не оставляет нам возможность остановить цикл, если только вся вкладка не будет закрыта или обновлена. Для решения первой проблемы, если нужно, чтобы основной цикл просто выполнялся и вам не нужен легкий (прямой) доступ к нему, вы можете поместить его внутрь самовызывающейся Function Expression (IIFE).

+

У нашего цикла есть две очевидные проблемы: main() загрязняет {{ domxref("window") }} объект (в нем хранятся все глобальные переменные) и код не оставляет нам возможность остановить цикл, если только вся вкладка не будет закрыта или обновлена. Для решения первой проблемы, если нужно, чтобы основной цикл просто выполнялся и вам не нужен лёгкий (прямой) доступ к нему, вы можете поместить его внутрь самовызывающейся Function Expression (IIFE).

/*
 * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера
 * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить,
 * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало
-* новой строки, если предыдущая не была пустой или завершенной.
+* новой строки, если предыдущая не была пустой или завершённой.
 */
 
 ;(function () {
@@ -73,19 +73,19 @@ main(); // Start the cycle
main(); // Вызов цикла })(); -

Когда браузер наткнется на IIFE (Immediately Invoked Function Expression), он определит основной цикл и сразу же поставит его в очередь для следующего кадра. Он не будет привязан ни к какому объекту, и main (или main() для методов) будет неиспользуемым именем, доступным в остальной части приложения для определения чего-то другого.

+

Когда браузер наткнётся на IIFE (Immediately Invoked Function Expression), он определит основной цикл и сразу же поставит его в очередь для следующего кадра. Он не будет привязан ни к какому объекту, и main (или main() для методов) будет неиспользуемым именем, доступным в остальной части приложения для определения чего-то другого.

Примечание: На практике распространено предотвращать следующий requestAnimationFrame() используя оператор if вместо вызова cancelAnimationFrame().

-

Чтобы остановить основной цикл, вам понадобиться отменить вызов main() с помощью {{ domxref("window.cancelAnimationFrame()") }}. Необходимо передать в cancelAnimationFrame() идентификатор последнего вызова requestAnimationFrame(). Давайте предположим, что функции и переменные вашей игры были определены в пространстве имен, которое вы назвали MyGame.  В таком случае, основной цикл будет выглядеть следующим образом:

+

Чтобы остановить основной цикл, вам понадобиться отменить вызов main() с помощью {{ domxref("window.cancelAnimationFrame()") }}. Необходимо передать в cancelAnimationFrame() идентификатор последнего вызова requestAnimationFrame(). Давайте предположим, что функции и переменные вашей игры были определены в пространстве имён, которое вы назвали MyGame.  В таком случае, основной цикл будет выглядеть следующим образом:

/*
 * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера
 * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить,
 * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало
-* новой строки, если предыдущая не была пустой или завершенной.
+* новой строки, если предыдущая не была пустой или завершённой.
 *
 * Давайте также предположим, что MyGame уже определена.
 */
@@ -100,7 +100,7 @@ main(); // Start the cycle
main(); // Вызов цикла })(); -

Теперь у нас есть переменная stopMain, объявленная в нашем пространстве имен MyGame, которая содержит идентификатор последнего вызова requestAnimationFrame() нашего основного цикла.  В любой момент мы может остановить основной цикл, сказав браузеру, чтобы тот отменил запрос, соответствующий последнему маркеру.

+

Теперь у нас есть переменная stopMain, объявленная в нашем пространстве имён MyGame, которая содержит идентификатор последнего вызова requestAnimationFrame() нашего основного цикла.  В любой момент мы может остановить основной цикл, сказав браузеру, чтобы тот отменил запрос, соответствующий последнему маркеру.

window.cancelAnimationFrame( MyGame.stopMain );
@@ -108,7 +108,7 @@ main(); // Start the cycle

Построение более оптимизированного основного цикла в JavaScript

-

В конце контов, в JavaScript браузер выполняет свой собственный основной цикл, и ваш код существует на некоторых его этапах. В приведенных выше разделах описываются основные циклы, которые стараются не отнимать контроль у браузера. Их методы прикрепляют себя к  window.requestAnimationFrame(), который запрашивает контроль над предстоящим кадром у браузера.  Браузер решает, как связать эти запросы с их основным циклом. Спецификация W3C для requestAnimationFrame на самом деле точно не определяет, когда браузеры должны выполнять колбэки requestAnimationFrame. Это может быть преимуществом, поскольку позволяет поставщикам браузеров свободно экспериментировать с решениями, которые они считают лучшими, и настраивать их с течением времени.

+

В конце контов, в JavaScript браузер выполняет свой собственный основной цикл, и ваш код существует на некоторых его этапах. В приведённых выше разделах описываются основные циклы, которые стараются не отнимать контроль у браузера. Их методы прикрепляют себя к  window.requestAnimationFrame(), который запрашивает контроль над предстоящим кадром у браузера.  Браузер решает, как связать эти запросы с их основным циклом. Спецификация W3C для requestAnimationFrame на самом деле точно не определяет, когда браузеры должны выполнять колбэки requestAnimationFrame. Это может быть преимуществом, поскольку позволяет поставщикам браузеров свободно экспериментировать с решениями, которые они считают лучшими, и настраивать их с течением времени.

Современные версии Firefox и Google Chrome (вероятно, и другие) пытаются подключить колбэки requestAnimationFrame к своему основному потоку в самом начале временного интервала фрейма. Таким образом основной поток браузера пытается выглядеть следующим образом: 

@@ -116,12 +116,12 @@ main(); // Start the cycle
  • Запустить новый кадр (пока предыдущий обрабатывается на дисплее.).
  • Пройтись по колбэкам requestAnimationFrame и вызвать их.
  • Выполнить сборку мусора и другие задачи для каждого кадра, когда вышеупомянутые колбэки перестают контролировать основной поток.
    • -
  • Спать (если только какое-либо событие не прервет сон браузера) до тех пор, пока монитор не будет готов к вашему изображению (VSync), и повторить его.
    • +
  • Спать (если только какое-либо событие не прервёт сон браузера) до тех пор, пока монитор не будет готов к вашему изображению (VSync), и повторить его.

    • Вы можете думать о разработке realtime applications, как о запасе времени для работы. Все вышеперечисленные шаги должны выполняться каждые 16  с половиной миллисекунд, чтобы не отставать от дисплея с частотой 60Гц.  Браузеры вызывают ваш код таким образом, чтобы предоставить ему максимум времени для вычислений. Ваш основной поток часто запускает рабочие нагрузки, которые даже не находятся в основном потоке (Например, растеризация или шейдеры в WebGL).  Большие вычисления могут выполняться на Web Worker-e или GPU одновременно с тем, как браузер использует свой основной поток для управления сборкой мусора, обработки асинхронных вызовов или других задач. 

    -

    Пока мы обсуждаем распределение нашего временного бюджета, многие браузеры имеют инструмент под названием High Resolution Time. Объект {{ domxref("Date") }} больше не используется в качестве основного метода синхронизации событий, поскольку он очень не точен и может быть изменен системными часами. High Resolution Time, с другой стороны, подсчитывает количество миллисекунд начиная с navigationStart (при выгрузке предыдущего документа). Это значение возвращается в виде десятичного числа с точностью до миллисекунды.  Он известен как DOMHighResTimeStamp, но для всех целей и задач считайте его числом с плавающей запятой.  

    +

    Пока мы обсуждаем распределение нашего временного бюджета, многие браузеры имеют инструмент под названием High Resolution Time. Объект {{ domxref("Date") }} больше не используется в качестве основного метода синхронизации событий, поскольку он очень не точен и может быть изменён системными часами. High Resolution Time, с другой стороны, подсчитывает количество миллисекунд начиная с navigationStart (при выгрузке предыдущего документа). Это значение возвращается в виде десятичного числа с точностью до миллисекунды.  Он известен как DOMHighResTimeStamp, но для всех целей и задач считайте его числом с плавающей запятой.  

    Примечание: Системы (аппаратные или программные), которые не могу обеспечить точность в микросекундах, могут по крайней мере обеспечить точность в миллисекундах.  Однако, они должны обеспечивать точность до 0,001 мс, если способны на это. 

    @@ -129,7 +129,7 @@ main(); // Start the cycle -

    Это значение нельзя использовать само по себе, потому что оно относиться к неинтересному событию, но его можно вычесть из другой временной ветки, чтобы четко и точно определить, сколько времени прошло между этими двумя точками. Чтобы получить одну из этих временных меток, вы можете вызвать window.performance.now() и сохранить результат в переменную. 

    +

    Это значение нельзя использовать само по себе, потому что оно относиться к неинтересному событию, но его можно вычесть из другой временной ветки, чтобы чётко и точно определить, сколько времени прошло между этими двумя точками. Чтобы получить одну из этих временных меток, вы можете вызвать window.performance.now() и сохранить результат в переменную. 

    var tNow = window.performance.now();
    @@ -140,7 +140,7 @@ main(); // Start the cycle * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало -* новой строки, если предыдущая не была пустой или завершенной. +* новой строки, если предыдущая не была пустой или завершённой. * * Давайте также предположим, что MyGame уже определена. */ diff --git a/files/ru/games/index.html b/files/ru/games/index.html index 68b713c1bb..f049abd074 100644 --- a/files/ru/games/index.html +++ b/files/ru/games/index.html @@ -21,7 +21,7 @@ translation_of: Games
    Введение в разработку игр для Web
    Ознакомление с технологиями, полезными для разработчиков игр, а также - как начать разработку игр, используя Web-технологии. Эта статья также рассматривает бизнес-кейс для создания web-игр.
    Анатомия видео игр
    -
    Что такое видео игры на самом деле? Есть определенные вещи, которые являются общими для всех игр (даже если, на первый взгляд, так и не кажется). Данная статья попытается объяснить такие понятия, как основные циклы, в совершенно общем контексте. При этом она все равно соответствует веб-стандартам.
    +
    Что такое видео игры на самом деле? Есть определённые вещи, которые являются общими для всех игр (даже если, на первый взгляд, так и не кажется). Данная статья попытается объяснить такие понятия, как основные циклы, в совершенно общем контексте. При этом она все равно соответствует веб-стандартам.
    Особые обсуждения для разработчиков игр
    Эта статья из App Center бегло рассматривает вещи, которые необходимо учитывать при попытке создать игру, которая будет работать как открытое веб-приложение.
    @@ -36,7 +36,7 @@ translation_of: Games
    Шаблоны программирования игр
    Онлайн-книга, написанная Bob Nystrom, которая рассказывает о шаблонах программирования в контексте разработки игр с целью помочь разработчикам создавать более эффективный, рациональный код.
    Artillery blog
    -
    В играх HTML5 компании Artillery есть несколько полезных статей в своем блоге.
    +
    В играх HTML5 компании Artillery есть несколько полезных статей в своём блоге.
    Создание игр для Firefox OS
    Краткое руководство по созданию 2D-игр с HTML5 для распространения на Firefox и других мобильных платформах.
    Gamedev.js Weekly
    @@ -56,7 +56,7 @@ translation_of: Games
    js13kGames
    Конкурс кодирования JavaScript для разработчиков игр HTML5 с ограничением размера файла, равным 13 килобайтам. Все представленные игры доступны в удобном для чтения виде на GitHub.
    Mozilla Hacks blog
    -
    Категория игр в блоге Mozilla Hacks, содержащем интересные статьи, посвященные gamedev.
    +
    Категория игр в блоге Mozilla Hacks, содержащем интересные статьи, посвящённые gamedev.
    @@ -65,24 +65,24 @@ translation_of: Games
    Инструменты
    -
    Это раздел об инструментах, созданных для облегчения создания эффективных игр для Web, таких как фреймворки, компиляторы (например, Emscripten), и инструменты для отладки. Объясняются основные концепции каждого, дается прочная база для работы с ними.
    -
    Технические приемы
    +
    Это раздел об инструментах, созданных для облегчения создания эффективных игр для Web, таких как фреймворки, компиляторы (например, Emscripten), и инструменты для отладки. Объясняются основные концепции каждого, даётся прочная база для работы с ними.
    +
    Технические приёмы
    Этот раздел содержит множество статей об очень важных техниках создания игр, таких как физика, обнаружение столкновения, анимация, 3D, хранение данных, и многое другое.
    Рабочий процесс
    -
    Этот раздел включает в себя несколько тематических исследований об основных инструментах и методах, охватываемых выше, и применение их к созданию удивительных игр. Здесь каждый найдет что-то полезное, являетесь ли вы опытным веб-разработчиком, желающим писать 2D или 3D игры, С++ разработчиком, задумавшим портировать свои игры в веб, или мобильным разработчиком, ищущим помощь в написании лучших мобильных игр.
    +
    Этот раздел включает в себя несколько тематических исследований об основных инструментах и методах, охватываемых выше, и применение их к созданию удивительных игр. Здесь каждый найдёт что-то полезное, являетесь ли вы опытным веб-разработчиком, желающим писать 2D или 3D игры, С++ разработчиком, задумавшим портировать свои игры в веб, или мобильным разработчиком, ищущим помощь в написании лучших мобильных игр.

    Примеры

    BananaBread
    -
    Многопользовательский трехмерный шутер от первого лица, разработанный с использованием Emscripten, WebGL и WebRTC. Одна из первых демонстрационных игр для WebGL.
    +
    Многопользовательский трёхмерный шутер от первого лица, разработанный с использованием Emscripten, WebGL и WebRTC. Одна из первых демонстрационных игр для WebGL.
    Monster Madness
    Сетевой шутер на основе WebGL и asm.js, разработанный Nom Nom Games и Trendy entertainment.
    Auralux
    Стратегия WebGL и asm.js: захватите все солнца, чтобы победить!
    Swooop
    -
    Полёт на самолёте в игре: контролируйте свой самолет и собирайте драгоценности. Снова, созданный с PlayCanvas.
    +
    Полёт на самолёте в игре: контролируйте свой самолёт и собирайте драгоценности. Снова, созданный с PlayCanvas.
    Polycraft
    Кораблекрушение. Исследуйте остров и победите монстров.
    Dead Trigger 2
    diff --git a/files/ru/games/introduction/index.html b/files/ru/games/introduction/index.html index 8db80d6d2d..088d012235 100644 --- a/files/ru/games/introduction/index.html +++ b/files/ru/games/introduction/index.html @@ -14,7 +14,7 @@ original_slug: Games/Ввод

    Современный web позволяет не только передавать различную информацию, но и создавать интерактивный контент. Например, потрясающие, высококачественные игры.

    -

    Диапазон игр, которые Вы можете встретить в web поражает и не уступает "нативным" играм, реализованным с использованием языка программирования c++ и java.Причем это касается не только относительно небольших игр, но и объемных игр жанра РПГ, 3d шутерах и многом другом. Это уже не аналоги простых карточных игр или многопользовательских социальных играх, реализованных с помощью Flash®, а гораздо более сложные вещи. Благодаря значительным улучшениям языка программирования JavaScript и появлению новых API браузера, Вы можете создавать игры, не зависящие от операционной системы. Для их работы необходим только браузер. А иногда, например на устройствах с поддержкой HTML5, таких как Firefox OS, не нужен даже он.

    +

    Диапазон игр, которые Вы можете встретить в web поражает и не уступает "нативным" играм, реализованным с использованием языка программирования c++ и java.Причём это касается не только относительно небольших игр, но и объёмных игр жанра РПГ, 3d шутерах и многом другом. Это уже не аналоги простых карточных игр или многопользовательских социальных играх, реализованных с помощью Flash®, а гораздо более сложные вещи. Благодаря значительным улучшениям языка программирования JavaScript и появлению новых API браузера, Вы можете создавать игры, не зависящие от операционной системы. Для их работы необходим только браузер. А иногда, например на устройствах с поддержкой HTML5, таких как Firefox OS, не нужен даже он.

    Игровая платформа HTML5

    @@ -75,7 +75,7 @@ original_slug: Games/Ввод

    6. Вы можете управлять своими отношениями с клиентами более тесно, по-своему. Больше не придётся работать с обратной связью магазина приложений. Взаимодействуйте со своими клиентами так, как вы хотите, без посредника.

    -

    7. Ваши игроки могут играть в вашу игру в любом месте, в любое время. Поскольку Web распространен повсеместно, ваши клиенты могут проверить статус своей игры на своих телефонах, планшетах, домашних ноутбуках, рабочих столах или на чем-либо еще.

    +

    7. Ваши игроки могут играть в вашу игру в любом месте, в любое время. Поскольку Web распространён повсеместно, ваши клиенты могут проверить статус своей игры на своих телефонах, планшетах, домашних ноутбуках, рабочих столах или на чем-либо еще.

    Web-технологии для разработчиков игр

    @@ -92,22 +92,22 @@ original_slug: Games/Ввод
    HTML audio
    Элемент {{HTMLElement ("audio")}} позволяет легко воспроизводить простые звуковые эффекты и музыку. Если ваше потребности выше, ознакомьтесь с Web Audio API для полной мощности обработки звука!
    IndexedDB
    -
    Мощный API для хранения пользовательских данных на собственном компьютере или устройстве. Отличный способ локально сохранить состояние игры и другую информацию, без необходимости подгружать ее каждый раз при необходимости. Также полезно для того, чтобы сделать ваш проект играбельным, даже если пользователь не подключен к Интернету (например, когда он оказался в самолете на несколько часов).
    +
    Мощный API для хранения пользовательских данных на собственном компьютере или устройстве. Отличный способ локально сохранить состояние игры и другую информацию, без необходимости подгружать её каждый раз при необходимости. Также полезно для того, чтобы сделать ваш проект играбельным, даже если пользователь не подключён к Интернету (например, когда он оказался в самолёте на несколько часов).
    JavaScript
    -
    JavaScript, язык программирования, используемый в Интернете, быстро развивается в современных браузерах и становится ещё быстрее. Используйте его возможности для написания кода своей игры или используйте такие технологии, как Emscripten или Asm.js, чтобы с легкостью переносить существующие игры.
    +
    JavaScript, язык программирования, используемый в Интернете, быстро развивается в современных браузерах и становится ещё быстрее. Используйте его возможности для написания кода своей игры или используйте такие технологии, как Emscripten или Asm.js, чтобы с лёгкостью переносить существующие игры.
    Pointer Lock API
    -
    API Pointer Lock позволяет блокировать мышь или другое указывающее устройство в интерфейсе вашей игры. Вместо абсолютного позиционирования курсора вы получаете координаты дельты, которые дают вам более точные измерения того, что делает пользователь, и предотвращают случайную отправку ввода где-то еще, тем самым упуская важные пользовательские действия.
    +
    API Pointer Lock позволяет блокировать мышь или другое указывающее устройство в интерфейсе вашей игры. Вместо абсолютного позиционирования курсора вы получаете координаты дельты, которые дают вам более точные измерения того, что делает пользователь, и предотвращают случайную отправку ввода где-то ещё, тем самым упуская важные пользовательские действия.
    SVG (масштабируемая векторная графика)
    Позволяет создавать векторную графику, которая плавно масштабируется независимо от размера или разрешения дисплея пользователя.
    Typed Arrays
    -
    Типизированные массивы JavaScript дают вам доступ к необработанным двоичным данным из кода, что позволяет вам манипулировать текстурами GL, игровыми данными или чем-то еще, даже если код не в формате JavaScript.
    +
    Типизированные массивы JavaScript дают вам доступ к необработанным двоичным данным из кода, что позволяет вам манипулировать текстурами GL, игровыми данными или чем-то ещё, даже если код не в формате JavaScript.
    Web Audio API
    Этот API необходим для управления воспроизведением, синтезом звука и манипулированием аудио из кода JavaScript. Позволяет создавать потрясающие звуковые эффекты, а также воспроизводить и манипулировать музыкой в ​​режиме реального времени.
    WebGL
    Позволяет создавать высокопроизводительную аппаратно-ускоренную 3D (и 2D) графику из веб-контента. Это веб-реализация OpenGL ES 2.0.
    WebRTC
    -
    API WebRTC (Real-Time Communications) дает вам возможность управлять аудио- и видеоданными, включая телеконференции и передачу данных из других приложений между двумя пользователями. Хотите, чтобы ваши игроки могли общаться друг с другом, взрывая монстров? Это API для вас!
    +
    API WebRTC (Real-Time Communications) даёт вам возможность управлять аудио- и видеоданными, включая телеконференции и передачу данных из других приложений между двумя пользователями. Хотите, чтобы ваши игроки могли общаться друг с другом, взрывая монстров? Это API для вас!
    WebSockets

    The WebSocket API позволяет подключить ваше приложение или сайт к серверу для передачи данных в реальном времени. Идеально подходит для многопользовательских игр, чатов и т. д.

    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 index 7f07e08d93..1df6408271 100644 --- 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 @@ -66,7 +66,7 @@ renderer.setClearColor(0xDDDDDD, 1); document.body.appendChild(renderer.domElement); -

    Создаем новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM элемент к странице. Вы могли заметить параметр antialias в первой строке — если он установлен в true, то границы объектов сглаживаются. Метод setClearColor() устанавливает цвет фона (мы установили в 0xDDDDDD, светло-серый, значение по умолчанию - черный).

    +

    Создаём новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM элемент к странице. Вы могли заметить параметр antialias в первой строке — если он установлен в true, то границы объектов сглаживаются. Метод setClearColor() устанавливает цвет фона (мы установили в 0xDDDDDD, светло-серый, значение по умолчанию - чёрный).

    Добавьте этот код в ваш элемент {{htmlelement("script")}}.

    @@ -81,7 +81,7 @@ document.body.appendChild(renderer.domElement);

    Камера

    -

    У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим ее позицию в координатной системе и направим ее на нужную нам точку, где расположено то, что мы хотим видеть:

    +

    У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим её позицию в координатной системе и направим её на нужную нам точку, где расположено то, что мы хотим видеть:

    var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
 camera.position.z = 50;
@@ -90,7 +90,7 @@ scene.add(camera);
 
 
    Добавьте следующий код в программу.
    
 
-
    Существует несколько типов камер: кубическая (Cube), ортографическая (Orthographic), но самая простая - перспективная (Perspective). Чтобы инициализировать ее, нужно установить угол обзора и соотношение сторон: Первое нужно для указания того, как широко мы видим, последний для того, чтобы эти объекты имели правильные пропорции. Объясним поподробнее, что означают числа, что мы установили:
    
+
    Существует несколько типов камер: кубическая (Cube), ортографическая (Orthographic), но самая простая - перспективная (Perspective). Чтобы инициализировать её, нужно установить угол обзора и соотношение сторон: Первое нужно для указания того, как широко мы видим, последний для того, чтобы эти объекты имели правильные пропорции. Объясним поподробнее, что означают числа, что мы установили:
    
 
 
      
  
    • Мы установили поле зрения в 70, с этим можно поэкспериментировать: чем больше число, тем больше угол обзора, тем шире мы видим. Представьте обычную камеру и камеру с эффектом fish eye, Которая позволяет увидеть больше. Значение по умолчанию 50.
      • 
@@ -115,9 +115,9 @@ scene.add(camera);
 render();
    -

    На каждом новом кадре вызывается функция render(), а renderer рендерит scene и camera. Сразу после объявления функции мы в первый раз вызываем ее, чтобы запустить цикл, после чего он будет использоваться бесконечно.

    +

    На каждом новом кадре вызывается функция render(), а renderer рендерит scene и camera. Сразу после объявления функции мы в первый раз вызываем её, чтобы запустить цикл, после чего он будет использоваться бесконечно.

    -

    Еще раз, добавьте этот новый код ниже ваших предыдущих дополнений. Попробуйте сохранить файл и открыть его в браузере. Теперь вы должны увидеть серое окно. Поздравляем!

    +

    Ещё раз, добавьте этот новый код ниже ваших предыдущих дополнений. Попробуйте сохранить файл и открыть его в браузере. Теперь вы должны увидеть серое окно. Поздравляем!

    Geometry

    @@ -155,7 +155,7 @@ render(); 
    scene.add(cube);
    -

    Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернем его, чтобы видеть больше сторон.  Добавить в конец кода эту строку:

    +

    Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернём его, чтобы видеть больше сторон.  Добавить в конец кода эту строку:

    cube.rotation.set(0.4, 0.2, 0);
    @@ -217,7 +217,7 @@ scene.add(light);

    Анимация

    -

    Мы можем использовать 'rotation', чтобы поменять положение куба. Также мы можем масштабировать фигуры или изменять их положение. Чтобы создать анимацию нужно внесенные изменения внести в цикл рендеринга, чтобы изменения происходили в каждом кадре.

    +

    Мы можем использовать 'rotation', чтобы поменять положение куба. Также мы можем масштабировать фигуры или изменять их положение. Чтобы создать анимацию нужно внесённые изменения внести в цикл рендеринга, чтобы изменения происходили в каждом кадре.

    Вращение

    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 index 9121cc00e2..7b7c6dc59e 100644 --- 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 @@ -131,7 +131,7 @@ translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders 
    // var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
    -

    Далее, создаем shaderMaterial:

    +

    Далее, создаём shaderMaterial:

    var shaderMaterial = new THREE.ShaderMaterial( {
 	vertexShader: document.getElementById( 'vertexShader' ).textContent,
diff --git a/files/ru/games/techniques/async_scripts/index.html b/files/ru/games/techniques/async_scripts/index.html
index 914600cd94..2f50c87da4 100644
--- a/files/ru/games/techniques/async_scripts/index.html
+++ b/files/ru/games/techniques/async_scripts/index.html
@@ -24,11 +24,11 @@ translation_of: Games/Techniques/Async_scripts
 script.src = "file.js";
 document.body.appendChild(script);
    -

    (скрипты создаются из скрипта по умолчанию async.) Стандартная оболочка HTML, которую генерирует Emscripten, создает последнее.

    +

    (скрипты создаются из скрипта по умолчанию async.) Стандартная оболочка HTML, которую генерирует Emscripten, создаёт последнее.

    Когда асинхронный не асинхронный?

    -

    Две распространенные ситуации, в которых сценарий * не * асинхронен (как определено спецификацией HTML ):

    +

    Две распространённые ситуации, в которых сценарий * не * асинхронен (как определено спецификацией HTML ):

    <script async>code</script>
    diff --git a/files/ru/games/techniques/controls_gamepad_api/index.html b/files/ru/games/techniques/controls_gamepad_api/index.html index 512f3143d4..6f84031d8d 100644 --- a/files/ru/games/techniques/controls_gamepad_api/index.html +++ b/files/ru/games/techniques/controls_gamepad_api/index.html @@ -17,13 +17,13 @@ translation_of: Games/Techniques/Controls_Gamepad_API

    Элементы управления для web игр

    -

    Исторически игра на консоли, подключенной к телевизору, всегда была совершенно другим опытом, чем игра на ПК, в основном из-за уникальных элементов управления. В конце концов, дополнительные драйверы и плагины позволили нам использовать консольные геймпады с настольными играми - либо нативными играми, либо теми, которые работают в браузере. Теперь, в эпоху HTML5, у нас наконец есть API Gamepad, который дает нам возможность играть в браузерные игры с использованием геймпад-контроллеры без каких-либо плагинов. API Gamepad достигает этого, предоставляя интерфейс, демонстрирующий нажатия кнопок и изменения оси, которые могут быть использованы внутри кода JavaScript для обработки входных данных. Это хорошие времена для браузерных игр.

    +

    Исторически игра на консоли, подключённой к телевизору, всегда была совершенно другим опытом, чем игра на ПК, в основном из-за уникальных элементов управления. В конце концов, дополнительные драйверы и плагины позволили нам использовать консольные геймпады с настольными играми - либо нативными играми, либо теми, которые работают в браузере. Теперь, в эпоху HTML5, у нас наконец есть API Gamepad, который даёт нам возможность играть в браузерные игры с использованием геймпад-контроллеры без каких-либо плагинов. API Gamepad достигает этого, предоставляя интерфейс, демонстрирующий нажатия кнопок и изменения оси, которые могут быть использованы внутри кода JavaScript для обработки входных данных. Это хорошие времена для браузерных игр.

    gamepad-controls

    API статус и поддержка браузера

    -

    Gamepad API все еще находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все еще может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad.

    +

    Gamepad API все ещё находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все ещё может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad.

    Какие геймпады лучше всего?

    @@ -37,11 +37,11 @@ translation_of: Games/Techniques/Controls_Gamepad_API

    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 try Hungry Fridge here.

    -

    Конкурс GitHub Game Off II состоялся в ноябре 2013 года, и Enclave Games решила принять в нем участие. Тема для конкурса была "переменна", поэтому они представили игру, в которой Вы должны накормить голодный холодильник, нажав на здоровую пищу (яблоки, морковь, салат) и избежать "плохой" пищи (пиво, гамбургеры, пицца.) Обратный отсчет меняет тип пищи, которую холодильник хочет съесть каждые несколько секунд, поэтому вы должны быть осторожны и действовать быстро. Вы можете попробовать Голодный холодильник здесь.

    +

    Конкурс GitHub Game Off II состоялся в ноябре 2013 года, и Enclave Games решила принять в нем участие. Тема для конкурса была "переменна", поэтому они представили игру, в которой Вы должны накормить голодный холодильник, нажав на здоровую пищу (яблоки, морковь, салат) и избежать "плохой" пищи (пиво, гамбургеры, пицца.) Обратный отсчёт меняет тип пищи, которую холодильник хочет съесть каждые несколько секунд, поэтому вы должны быть осторожны и действовать быстро. Вы можете попробовать Голодный холодильник здесь.

    hungryfridge-mainmenu

    -

    Вторая, скрытая реализация "изменения" - это возможность превратить статичный холодильник в полноценную движущуюся, стреляющую и едящую машину. Когда вы подключаете контроллер, игра значительно меняется (голодный холодильник превращается в супер турбо голодный холодильник), и вы можете управлять бронированным холодильником с помощью API Gamepad. Вы должны сбивать еду, но вы все еще должны искать тип пищи, которую холодильник хочет съесть в каждой точке, иначе вы потеряете энергию.

    +

    Вторая, скрытая реализация "изменения" - это возможность превратить статичный холодильник в полноценную движущуюся, стреляющую и едящую машину. Когда вы подключаете контроллер, игра значительно меняется (голодный холодильник превращается в супер турбо голодный холодильник), и вы можете управлять бронированным холодильником с помощью API Gamepad. Вы должны сбивать еду, но вы все ещё должны искать тип пищи, которую холодильник хочет съесть в каждой точке, иначе вы потеряете энергию.

    hungryfridge-howtoplay-gamepad

    @@ -63,7 +63,7 @@ translation_of: Games/Techniques/Controls_Gamepad_API

    Реализация

    -

    Есть два важных события, которые можно использовать вместе с API Gamepad-gamepadconnected и gamepaddisconnected. Первый срабатывает, когда браузер обнаруживает подключение нового геймпада, а второй - когда геймпад отключен (либо физически пользователем, либо из-за бездействия).) В демо-версии объект gamepadAPI используется для хранения всего, что связано с API:

    +

    Есть два важных события, которые можно использовать вместе с API Gamepad-gamepadconnected и gamepaddisconnected. Первый срабатывает, когда браузер обнаруживает подключение нового геймпада, а второй - когда геймпад отключён (либо физически пользователем, либо из-за бездействия).) В демо-версии объект gamepadAPI используется для хранения всего, что связано с API:

    var gamepadAPI = {
   controller: {},
@@ -118,11 +118,11 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 
 
    Объект геймпада
    
 
-
    В объекте gamepad содержится много полезной информации, причем наиболее важными являются состояния кнопок и осей:
    
+
    В объекте gamepad содержится много полезной информации, причём наиболее важными являются состояния кнопок и осей:
    
 
 
      
  
    • id: Строка, содержащая информацию о контроллере.
      • 
- 
    • index: Уникальный идентификатор для подключенного устройства.
      • 
+ 
    • index: Уникальный идентификатор для подключённого устройства.
      • 
  
    • connected: Логическая переменная. Возвращает true при подключении.
      • 
  
    • mapping: Тип компоновки кнопок; Стандартный - единственный доступный вариант на данный момент.
      • 
  
    • axes: Состояние каждой оси, представленное массивом значений с плавающей запятой.
      • 
@@ -133,7 +133,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 
 
      Запрос объекта геймпада
      
 
-
      Помимо connect() и disconnect(), в объекте gamepadAPI есть еще два метода: update() и buttonPressed(). update() выполняется на каждом кадре внутри игрового цикла, чтобы регулярно обновлять фактическое состояние объекта геймпада:
      
+
      Помимо connect() и disconnect(), в объекте gamepadAPI есть ещё два метода: update() и buttonPressed(). update() выполняется на каждом кадре внутри игрового цикла, чтобы регулярно обновлять фактическое состояние объекта геймпада:
      
 
 
      update: function() {
   // clear the buttons cache
@@ -175,7 +175,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 
 
      Обнаружение нажатия кнопок
      
 
-
      Метод buttonPressed() также помещается в основной игровой цикл для обработки нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придется отпустить кнопку и нажать ее снова, чтобы получить желаемый эффект.
      
+
      Метод buttonPressed() также помещается в основной игровой цикл для обработки нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придётся отпустить кнопку и нажать её снова, чтобы получить желаемый эффект.
      
 
 
      buttonPressed: function(button, hold) {
   var newPress = false;
@@ -213,7 +213,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 }
 
      
 
-
      Если gamepadAPI.turbo возвращает true, при нажатии (или удержании) данных кнопок мы выполняем соответствующие функции, возложенные на них. В этом случае нажатие или удержание "A" приведет к выстрелу пули, а нажатие "B" поставит игру на паузу.
      
+
      Если gamepadAPI.turbo возвращает true, при нажатии (или удержании) данных кнопок мы выполняем соответствующие функции, возложенные на них. В этом случае нажатие или удержание "A" приведёт к выстрелу пули, а нажатие "B" поставит игру на паузу.
      
 
 
      Порог оси
      
 
@@ -229,7 +229,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 }
 
      
 
-
      Даже если мы немного сдвинем его по ошибке или стик не вернется в исходное положение, танк не повернется неожиданно.
      
+
      Даже если мы немного сдвинем его по ошибке или стик не вернётся в исходное положение, танк не повернётся неожиданно.
      
 
 
      Обновление спецификаций
      
 
@@ -237,7 +237,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 
 
      Получение геймпадов
      
 
-
      Метод {{domxref ("Navigator.getGamepads ()")}} был обновлен с более длинным объяснением и примером кода. Теперь длина массива геймпадов должна быть n+1, где n-количество подключенных устройств — когда подключено одно устройство и оно имеет индекс 1, длина массива равна 2, и он будет выглядеть следующим образом: [null, [object Gamepad]]. Если устройство отключено или недоступно, то для него устанавливается значение null.
      
+
      Метод {{domxref ("Navigator.getGamepads ()")}} был обновлён с более длинным объяснением и примером кода. Теперь длина массива геймпадов должна быть n+1, где n-количество подключённых устройств — когда подключено одно устройство и оно имеет индекс 1, длина массива равна 2, и он будет выглядеть следующим образом: [null, [object Gamepad]]. Если устройство отключено или недоступно, то для него устанавливается значение null.
      
 
 
      Стандартное отображение
      
 
@@ -257,4 +257,4 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 
 
      Подведение итогов
      
 
-
      API геймпада очень прост в разработке. Теперь это проще, чем когда-либо, вы можете использовать браузер как консоль без необходимости каких-либо плагинов. Вы можете играть в полную версию игры Hungry Fridge непосредственно в вашем браузере, установить ее из Firefox Marketplace или проверить исходный код демо-версии вместе со всеми другими ресурсами в комплекте контента Gamepad API.
      
+
      API геймпада очень прост в разработке. Теперь это проще, чем когда-либо, вы можете использовать браузер как консоль без необходимости каких-либо плагинов. Вы можете играть в полную версию игры Hungry Fridge непосредственно в вашем браузере, установить её из Firefox Marketplace или проверить исходный код демо-версии вместе со всеми другими ресурсами в комплекте контента Gamepad API.
      
diff --git a/files/ru/games/tools/asm.js/index.html b/files/ru/games/tools/asm.js/index.html
index 08e08bb6bc..852bcf954e 100644
--- a/files/ru/games/tools/asm.js/index.html
+++ b/files/ru/games/tools/asm.js/index.html
@@ -13,18 +13,18 @@ original_slug: Games/Инструменты/asm.js
 
      {{IncludeSubnav("/en-US/docs/Games")}}
      
 
 
      
-
      Asm.js - это подмножество JavaScript, имеющее более высокую оптимизацию. В этой статье описаны возможности asm.js, улучшения которые оно дает, где и как это можно применять, а также дополнительные ресурсы и примеры.
      
+
      Asm.js - это подмножество JavaScript, имеющее более высокую оптимизацию. В этой статье описаны возможности asm.js, улучшения которые оно даёт, где и как это можно применять, а также дополнительные ресурсы и примеры.
      
 
      
 
 
      Что такое asm.js?
      
 
 
      Это небольшое, более строгое подмножество JavaScript которое ограничивает стандартный язык только конструкциями, типа `while`, `if` и данными в виде чисел, именованных функций, и другими простыми вещами. Оно не разрешает использование объектов, строк, и всего, что требует больших нагрузок. Asm.js напоминает C во многих вещах, но он является полностью валидным кодом на JavaScript и работает на всех имеющихся движках. Он позволяет JS движкам, поддерживающим asm.js, оптимизировать такой код и даёт компиляторам, типа Emscripten, чёткое определение того, как нужно компилировать. Мы покажем, как asm.js код выглядит, чем он полезен и как с ним работать.
      
 
-
      Это подмножество JavaScript уже автоматически используется во многих движках, использующих технологию компиляции Just-In-Time (JIT). Однако, указав явный стандарт, мы можем улучшить оптимизацию такого кода и получить максимальную производительность. Благодаря этому, упрощается совместная работа нескольких JS движков, потому что легче договориться о стандартах. Идея в том, что этот вид кода должен работать очень быстро в каждом движке, и если это не так, это ошибка, и есть четкая спецификация, что именно движки должны оптимизировать.
      
+
      Это подмножество JavaScript уже автоматически используется во многих движках, использующих технологию компиляции Just-In-Time (JIT). Однако, указав явный стандарт, мы можем улучшить оптимизацию такого кода и получить максимальную производительность. Благодаря этому, упрощается совместная работа нескольких JS движков, потому что легче договориться о стандартах. Идея в том, что этот вид кода должен работать очень быстро в каждом движке, и если это не так, это ошибка, и есть чёткая спецификация, что именно движки должны оптимизировать.
      
 
-
      Это также делает asm.js достаточно простым для людей, которые пишут компиляторы высокопроизводительного кода под web. Они могут обратиться к спецификации asm.js, чтобы найти более быстрые паттерны для него. Emscripten, компилятор C/C++ в JavaScript, выдает код asm.js, работающий в некоторых браузерах с производительностью, близкой к машинному коду.
      
+
      Это также делает asm.js достаточно простым для людей, которые пишут компиляторы высокопроизводительного кода под web. Они могут обратиться к спецификации asm.js, чтобы найти более быстрые паттерны для него. Emscripten, компилятор C/C++ в JavaScript, выдаёт код asm.js, работающий в некоторых браузерах с производительностью, близкой к машинному коду.
      
 
-
      Кроме того, если движок специально распознает код asm.js, то можно сделать еще больше оптимизаций. На данный момент Chrome (статус) и Firefox обладают поддержкой asm.js. Firefox имеет поддержку передовых фич asm.js
      
+
      Кроме того, если движок специально распознает код asm.js, то можно сделать ещё больше оптимизаций. На данный момент Chrome (статус) и Firefox обладают поддержкой asm.js. Firefox имеет поддержку передовых фич asm.js
      
 
 
      В общем об asm.js
      
 
diff --git a/files/ru/games/tools/index.html b/files/ru/games/tools/index.html
index 91e2bf3f41..f4adb6f5b3 100644
--- a/files/ru/games/tools/index.html
+++ b/files/ru/games/tools/index.html
@@ -28,7 +28,7 @@ original_slug: Games/Инструменты
  
        
   
      • Обзор базовых инструментов
        • 
   
      • Редактор шейдеров
        • 
-  
      • Производственные инструменты (все еще находятся в производстве, по оценкам, в начале 2014 года)
        • 
+  
      • Производственные инструменты (все ещё находятся в производстве, по оценкам, в начале 2014 года)
        •
    diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.html index 8d4171bde1..45bdac302b 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.html @@ -107,7 +107,7 @@ var brickInfo; var brickY = (r*(brickInfo.height+brickInfo.padding))+brickInfo.offset.top; -

    Координата x каждого кирпича рассчитывается на основе суммы ширины кирпича brickInfo.width и зазора brickInfo.padding, умноженной на номер столбца с, после этого добавляем отступ от левого края brickInfo.offset.left; Расчет y аналогичен, только используются номер ряда r, высота кирпича brickInfo.height и отступ от верхнего края brickInfo.offset.top. Вот теперь каждый кирпич на своём месте, с учётом всех отступов и зазоров.

    +

    Координата x каждого кирпича рассчитывается на основе суммы ширины кирпича brickInfo.width и зазора brickInfo.padding, умноженной на номер столбца с, после этого добавляем отступ от левого края brickInfo.offset.left; Расчёт y аналогичен, только используются номер ряда r, высота кирпича brickInfo.height и отступ от верхнего края brickInfo.offset.top. Вот теперь каждый кирпич на своём месте, с учётом всех отступов и зазоров.

    Проверяем код функции initBricks()

    diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html index d19481e9ca..b01d6bf0ac 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html @@ -97,7 +97,7 @@ lifeLostText.visible = false; } -

    Вместо того, чтобы сразу вызывать сообщение, когда мяч выходит за пределы Canvas, мы сначала вычитаем одну жизнь из текущего числа и проверяем, не равно ли оно нулю. Если не равно, то у игрока все еще осталось несколько жизней, и он может продолжать играть - он увидит сообщение о потере жизни, позиции мяча и платформы будут сброшены и при следующем клике мышью сообщение будет скрыто и мяч снова начнет двигаться.

    +

    Вместо того, чтобы сразу вызывать сообщение, когда мяч выходит за пределы Canvas, мы сначала вычитаем одну жизнь из текущего числа и проверяем, не равно ли оно нулю. Если не равно, то у игрока все ещё осталось несколько жизней, и он может продолжать играть - он увидит сообщение о потере жизни, позиции мяча и платформы будут сброшены и при следующем клике мышью сообщение будет скрыто и мяч снова начнёт двигаться.

    Когда количество жизней достигнет нуля игра заканчивается, а игроку показывается соответствующее сообщение.

    @@ -113,6 +113,6 @@ lifeLostText.visible = false;

    Следующий шаг

    -

    Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут еще 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать ее более красивой, добавив анимацию и эффекты .

    +

    Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут ещё 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать её более красивой, добавив анимацию и эффекты .

    {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}}

    diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.html index c39dd38a7c..9e890e0d65 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.html @@ -14,7 +14,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser

    Это 8 из 16 уроков руководства разработки игры с помощью Phaser. Исходный код этого урока вы можете найти здесь:  Gamedev-Phaser-Content-Kit/demos/lesson08.html.

    -

    Чтобы разнообразить игру, давайте добавим возможность проигрыша — если вы не отобьете мячик и дадите ему упасть на пол, то game over.

    +

    Чтобы разнообразить игру, давайте добавим возможность проигрыша — если вы не отобьёте мячик и дадите ему упасть на пол, то game over.

    Проигрыш

    diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html index e9de5c8ec3..ba34f51148 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html @@ -31,7 +31,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser 
    game.physics.startSystem(Phaser.Physics.ARCADE);
    -

    Во-вторых, нам необходимо добавить мяч в физическую систему, потому что объект, отвечающий за физику в Phaser, не включен по умолчанию. Добавьте следующую строку в конце функции create(): 

    +

    Во-вторых, нам необходимо добавить мяч в физическую систему, потому что объект, отвечающий за физику в Phaser, не включён по умолчанию. Добавьте следующую строку в конце функции create(): 

    game.physics.enable(ball, Phaser.Physics.ARCADE);
    diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.html index 2064e6aa09..06441df2ff 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.html @@ -20,7 +20,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser

    С точки зрения фреймворка, платформа и мячик не сильно различаются - нам так же понадобится переменная для платформы, спрайт и немного магии.

    -

    Создаем платформу

    +

    Создаём платформу

    Сначала, добавим переменную paddle, сразу после переменной ball:

    diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html index 30c80ddf18..878ab3eedc 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html @@ -39,7 +39,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
  • NO_SCALE — ничего не масштабировать.
  • EXACT_FIT — масштабировать с полным заполнением пустого места вертикально и горизонтально, не соблюдая соотношение (aspect ratio).
  • SHOW_ALL — масштабирует игру, но сохраняет соотношение так, что картинки не будут искажаться, как и при предыдущем значении. Возможно наличие чёрных полос по краям экрана, но мы можем жить с этим.
    • -
  • RESIZE — создает {{htmlelement("canvas")}} с доступными шириной и высотой так, что вы можете помещать объекты в игру динамически; это расширенный режим (advanced mode).
    • +
  • RESIZE — создаёт {{htmlelement("canvas")}} с доступными шириной и высотой так, что вы можете помещать объекты в игру динамически; это расширенный режим (advanced mode).
  • USER_SCALE — позволяет вам делать динамическое масштабирование, подсчёт размеров, масштаб и соотношение самостоятельно; опять же это расширенный режим.
    • diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html index 95f3e31b65..aea0e44784 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html @@ -38,7 +38,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser } -

    Чтобы перебрать все кирпичи в наборе, необходимо обратиться к полю bricks.children. Найдём все неразрешенные кирпичи, проверяя поле alive у каждого кирпича и, если все кирпичи разрушены, выведем всплывающее окно с текстом о победе. После закрытия этого окна, страница перезагрузится.

    +

    Чтобы перебрать все кирпичи в наборе, необходимо обратиться к полю bricks.children. Найдём все неразрешённые кирпичи, проверяя поле alive у каждого кирпича и, если все кирпичи разрушены, выведем всплывающее окно с текстом о победе. После закрытия этого окна, страница перезагрузится.

    Сравните свой код

    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 index f94fabfb04..54bcf6cb81 100644 --- 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 @@ -21,13 +21,13 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_

    Это 3-й этап из 10  Gamedev Canvas tutorial. Вы можете найти исходный код как он должен выглядеть после завершения этого урока в Gamedev-Canvas-workshop/lesson3.html.

    -

    Приятно наблюдать за нашим мяч, но он быстро исчезает с экрана, удовольствие длится недолго! Чтобы продлить, мы реализуем некоторое очень простое обнаружение столкновений (о которых будет рассказано далее более подробно), чтобы сделать отскок мяча от четырех краев холста.

    +

    Приятно наблюдать за нашим мяч, но он быстро исчезает с экрана, удовольствие длится недолго! Чтобы продлить, мы реализуем некоторое очень простое обнаружение столкновений (о которых будет рассказано далее более подробно), чтобы сделать отскок мяча от четырёх краёв холста.

    Простое обнаружение столкновений

    Для обнаружения столкновения мы будем проверять -  касается ли мяч стены, и если это так, изменим направление его движения в нужную сторону.

    -

    Чтобы сделать расчеты проще, давайте определим переменную ballRadius, что задаст радиус нарисованного круга и будет использоваться для вычислений. Добавьте это в ваш код, где-то ниже существующих переменных:

    +

    Чтобы сделать расчёты проще, давайте определим переменную ballRadius, что задаст радиус нарисованного круга и будет использоваться для вычислений. Добавьте это в ваш код, где-то ниже существующих переменных:

    var ballRadius = 10;
    @@ -37,7 +37,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_

    Отскакивание от верхней и нижней стены

    -

    Есть четыре стены, от которых мяч будет отскакивать — давайте сначала сосредоточимся на верхней. При каждом кадре нужно проверять, коснулся ли мяч верхней границы — если да, то будет обратное движение мяча, поэтому он начнет двигаться в противоположном направлении и остановится в пределах видимой границы. Вспомнив, что система координат начинается с левого верхнего угла, мы можем придумать что-то вроде этого:

    +

    Есть четыре стены, от которых мяч будет отскакивать — давайте сначала сосредоточимся на верхней. При каждом кадре нужно проверять, коснулся ли мяч верхней границы — если да, то будет обратное движение мяча, поэтому он начнёт двигаться в противоположном направлении и остановится в пределах видимой границы. Вспомнив, что система координат начинается с левого верхнего угла, мы можем придумать что-то вроде этого:

    if(y + dy < 0) {
     dy = -dy;
@@ -45,7 +45,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_
 
 
    Если значение y положения шара ниже нуля, изменить направление движения по оси y установив его с тем же значением но с другим знаком. Если мяч движется вверх со скоростью 2 пикселя на кадр, теперь он будет двигаться "вверх" со скоростью -2 пикселя, что на самом деле означает движение вниз со скоростью 2 пикселя.
    
 
-
    Приведенный выше код описывает отражение только от верхней границы, так что теперь давайте думать о нижнем крае:
    
+
    Приведённый выше код описывает отражение только от верхней границы, так что теперь давайте думать о нижнем крае:
    
 
 
    if(y + dy > canvas.height) {
     dy = -dy;
@@ -77,7 +77,7 @@ if(y + dy > canvas.height || y + dy < 0) {
 
 
    Мяч продолжает исчезать в стене!
    
 
-
    Проверьте сейчас свой код, и вы будете впечатлены — теперь мяч, отскакивает от всех четырех краёв нашего <canvas>!  Однако есть некоторая проблема - когда мяч попадает в любую стену, он немного заходит за границы <canvas> перед отскоком:
    
+
    Проверьте сейчас свой код, и вы будете впечатлёны — теперь мяч, отскакивает от всех четырёх краёв нашего <canvas>!  Однако есть некоторая проблема - когда мяч попадает в любую стену, он немного заходит за границы <canvas> перед отскоком:
    
 
 
    
 
@@ -94,7 +94,7 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
 
 
    Сравните ваш код
    
 
-
    Давайте еще раз проверим готовый код для этой части, и код, что у вас есть, и играйте:
    
+
    Давайте ещё раз проверим готовый код для этой части, и код, что у вас есть, и играйте:
    
 
 
    {{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}
    
 
@@ -104,6 +104,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
 
 
    Следующий шаг
    
 
-
    Теперь мы добрались до стадии, где наш мяч одновременно двигается и остаётся на игровом поле. В четвертой главе мы рассмотрим реализацию управления — см. Paddle and keyboard controls.
    
+
    Теперь мы добрались до стадии, где наш мяч одновременно двигается и остаётся на игровом поле. В четвёртой главе мы рассмотрим реализацию управления — см. Paddle and keyboard controls.
    
 
 
    {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}
    
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html
index c2b6c134d0..043994fe01 100644
--- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html
@@ -1,8 +1,8 @@
 ---
-title: Создаем зону кирпичей
+title: Создаём зону кирпичей
 slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
 translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
-original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаем_зону_кирпичей
+original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей
 ---
 
    {{GamesSidebar}}
    
 
@@ -44,7 +44,7 @@ for(var c=0; c<brickColumnCount; c++) {
     }
 }
    
 
-
    Вышеприведенный код будет прокручивать строки и столбцы и создавать новые кирпичи. Обратите внимание, что кирпичные объекты также будут использоваться для целей обнаружения столкновений позже.
    
+
    Вышеприведённый код будет прокручивать строки и столбцы и создавать новые кирпичи. Обратите внимание, что кирпичные объекты также будут использоваться для целей обнаружения столкновений позже.
    
 
 
    Механизм отрисовки кирпичей
    
 
@@ -71,7 +71,7 @@ var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
    -

    Каждая позиция brickX разрабатывается как brickWidth + brickPadding , умноженная на номер столбца, c , плюс brickOffsetLeft ; логика для brickY идентична, за исключением того, что она использует значения для номера строки, r, brickHeight и brickOffsetTop . Теперь каждый отдельный кирпич может быть помещен в правильное место и столбец места, с отступом между каждым кирпичом, нарисованным на смещение от левого и верхнего краев холста.

    +

    Каждая позиция brickX разрабатывается как brickWidth + brickPadding , умноженная на номер столбца, c , плюс brickOffsetLeft ; логика для brickY идентична, за исключением того, что она использует значения для номера строки, r, brickHeight и brickOffsetTop . Теперь каждый отдельный кирпич может быть помещён в правильное место и столбец места, с отступом между каждым кирпичом, нарисованным на смещение от левого и верхнего краёв холста.

    Окончательная версия функции drawBricks() после назначения brickX и brickY в качестве координат вместо (0,0) каждый раз будет выглядеть следующим образом: добавьте это в свой код ниже функции drawPaddle() :

    diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html index 3f03e0f748..21e52d9a3d 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -8,12 +8,12 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Обнаруже
    {{IncludeSubnav("/en-US/docs/Games")}}
    -

    {{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаем_зону_кирпичей", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

    +

    {{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

    Это 7 шаг из 10 в Gamedev Canvas tutorial. Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут Gamedev-Canvas-workshop/lesson7.html.

    -

    У нас уже есть кирпичи, появляющиеся на экране, но игра все еще не так интересна, ведь мяч проходит сквозь них. Нам нужно подумать о добавлении обнаружения столкновений, чтобы он мог отскакивать от кирпичей и ломать их.

    +

    У нас уже есть кирпичи, появляющиеся на экране, но игра все ещё не так интересна, ведь мяч проходит сквозь них. Нам нужно подумать о добавлении обнаружения столкновений, чтобы он мог отскакивать от кирпичей и ломать их.

    Конечно, это наше решение, как реализовать это, но может быть сложно рассчитать, касается ли шар прямоугольника или нет, потому что в Canvas нет вспомогательных функций для этого. В этом уроке мы сделаем это самым простым способом. Мы проверим, сталкивается ли центр мяча с любым из данных кирпичей. Это не идеальное решение на все случаи жизни, и есть намного более сложные и эффективные способы обнаружения столкновений, но это научит вас основным понятиям.

    @@ -53,11 +53,11 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Обнаруже } } -

    Добавьте вышеприведенный блок к вашему коду под keyUpHandler() функцией .

    +

    Добавьте вышеприведённый блок к вашему коду под keyUpHandler() функцией .

    Удаление кирпичей после их попадания

    -

    Вышеприведенный код будет работать, как и задумано, и мяч изменит свое направление. Проблема в том, что кирпичи остаются на своих местах. Мы должны придумать, как избавляться от тех, в которые мы уже попали мячом. Мы можем сделать это, добавив дополнительный параметр кирпичам, определяющий, будет ли кирпич отрисовываться на экране или нет. В той части кода, где мы инициализируем кирпичи, добавим свойство status к каждому кирпичному объекту. Обновите следующую часть кода, как показано ниже:

    +

    Вышеприведённый код будет работать, как и задумано, и мяч изменит своё направление. Проблема в том, что кирпичи остаются на своих местах. Мы должны придумать, как избавляться от тех, в которые мы уже попали мячом. Мы можем сделать это, добавив дополнительный параметр кирпичам, определяющий, будет ли кирпич отрисовываться на экране или нет. В той части кода, где мы инициализируем кирпичи, добавим свойство status к каждому кирпичному объекту. Обновите следующую часть кода, как показано ниже:

    var bricks = [];
 for(var c=0; c<brickColumnCount; c++) {
@@ -124,6 +124,6 @@ for(var c=0; c<brickColumnCount; c++) {
 
 
    Следующие шаги
    
 
-
    Мы уверенно движемся вперёд! Поехали! В восьмой главе мы будем учиться отслеживать счет и выигрывать .
    
+
    Мы уверенно движемся вперёд! Поехали! В восьмой главе мы будем учиться отслеживать счёт и выигрывать .
    
 
 
    {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}
    
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
index 6a62e46e4e..5c09478700 100644
--- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
@@ -27,7 +27,7 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Заключен
 
 
    var lives = 3;
    
 
-
    Отрисовка счетчика жизни выглядит почти так же, как и счетчика баллов - добавьте в код следующую функцию под функцией drawScore() :
    
+
    Отрисовка счётчика жизни выглядит почти так же, как и счётчика баллов - добавьте в код следующую функцию под функцией drawScore() :
    
 
 
    function drawLives() {
     ctx.font = "16px Arial";
@@ -56,7 +56,7 @@ else {
     paddleX = (canvas.width-paddleWidth)/2;
 }
    
 
-
    Теперь, когда мяч попадает в нижний край экрана, мы вычитаем одну жизнь из переменной lives. Если жизней не осталось, игра проиграна, если осталось еще несколько жизней, то положение мяча и биты сбрасываются вместе с движением мяча.
    
+
    Теперь, когда мяч попадает в нижний край экрана, мы вычитаем одну жизнь из переменной lives. Если жизней не осталось, игра проиграна, если осталось ещё несколько жизней, то положение мяча и биты сбрасываются вместе с движением мяча.
    
 
 
    Визуализация дисплея жизней
    
 
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
index 37ed140976..8fa11624a5 100644
--- 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
@@ -12,7 +12,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over
 
 
    {{IncludeSubnav("/en-US/docs/Games")}}
    
 
-
    {{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаем_зону_кирпичей")}}
    
+
    {{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей")}}
    
 
 
    
 
    Это - 5-й шаг из 10 из Gamedev Canvas tutorial. Вы можете найти исходный код к этому уроку в Gamedev-Canvas-workshop/lesson5.html.
    
@@ -32,7 +32,7 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
     dy = -dy;
 }
    -

    Вместо того, чтобы позволить шару отталкиваться от всех четырех стен, давайте позволим отталкиваться только от трех стен — левую, верхнюю и правую. Удар об нижнюю стенку закончит игру. Мы отредактируем второй блок if, таким образом, что if else вызовет "Конец Игры" , когда шар столкнется  с нижней стенкой холста. Сохраните документ, взгляните на выводящееся сообщение перезагрузите игру путем перезагрузки страницы.

    +

    Вместо того, чтобы позволить шару отталкиваться от всех четырёх стен, давайте позволим отталкиваться только от трёх стен — левую, верхнюю и правую. Удар об нижнюю стенку закончит игру. Мы отредактируем второй блок if, таким образом, что if else вызовет "Конец Игры" , когда шар столкнётся  с нижней стенкой холста. Сохраните документ, взгляните на выводящееся сообщение перезагрузите игру путём перезагрузки страницы.

    Во-первых, измените код, где вы изначально вызывали setInterval()

    @@ -62,7 +62,7 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {

    Отбить шар

    -

    Последняя вещь, которую нужно сделать на этом уроке состоит в том, чтобы создать некоторое обнаружение столкновений между шаром и битой, таким образом, шар оттолкнется от биты и возвратиться в область игры. Самая простая вещь состоит в том, чтобы проверить, является ли центр шара между левыми и правыми краями биты. Обновите последний бит кода, который Вы изменили:

    +

    Последняя вещь, которую нужно сделать на этом уроке состоит в том, чтобы создать некоторое обнаружение столкновений между шаром и битой, таким образом, шар оттолкнётся от биты и возвратиться в область игры. Самая простая вещь состоит в том, чтобы проверить, является ли центр шара между левыми и правыми краями биты. Обновите последний бит кода, который Вы изменили:

    if(y + dy < ballRadius) {
     dy = -dy;
@@ -90,6 +90,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
 
 
    Следующие шаги
    
 
-
    Все идет хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все еще не хватает чего-то. Перейдем к шестой главе — Build the brick field — и создадим некоторые кирпичи для шара, чтобы их уничтожить.
    
+
    Все идёт хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все ещё не хватает чего-то. Перейдём к шестой главе — Build the brick field — и создадим некоторые кирпичи для шара, чтобы их уничтожить.
    
 
 
    {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}
    
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
index 2a30bbadb5..0d37f7d427 100644
--- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.html
@@ -37,12 +37,12 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript
  
  • Конец игры
    • 
  
  • Построение поля кирпичей
    • 
  
  • Реакция при столкновении
    • 
- 
  • Счет и выигрыш
    • 
+ 
  • Счёт и выигрыш
    • 
  
  • Контроль мышью
    • 
  
  • Заключение
    • 
 
 
-
    Лучший способ получить надежные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, нелишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript.
    
+
    Лучший способ получить надёжные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, нелишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript.
    
 
 
    
 
    Примечание. Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей 2D игра Breakout с использованием Phaser.
    
@@ -54,6 +54,6 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript
 
 
    Следующий шаг
    
 
-
    Ладно, давайте начнем! Перейдите к первой главе — Создание Canvas и рисование на нем.
    
+
    Ладно, давайте начнём! Перейдите к первой главе — Создание Canvas и рисование на нем.
    
 
 
    {{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} 
    
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
index e6f61bebe1..28cf380c31 100644
--- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
@@ -23,7 +23,7 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управлен
 
 
    Отслеживание движений мыши
    
 
-
    Отслеживание движений мыши еще проще, чем обработка нажатий клавиш. Все, что нам нужно, это следить за событиями {{event("mousemove")}}. Добавьте следующую строку в том же месте, как и для других событий, чуть ниже keyup event:
    
+
    Отслеживание движений мыши ещё проще, чем обработка нажатий клавиш. Все, что нам нужно, это следить за событиями {{event("mousemove")}}. Добавьте следующую строку в том же месте, как и для других событий, чуть ниже keyup event:
    
 
 
    document.addEventListener("mousemove", mouseMoveHandler, false);
    
 
@@ -54,6 +54,6 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управлен
 
 
    Следующий шаг
    
 
-
    Теперь у нас есть полная игра, мы закончим нашу серию уроков с еще несколькими небольшими хитростями — Finishing up.
    
+
    Теперь у нас есть полная игра, мы закончим нашу серию уроков с ещё несколькими небольшими хитростями — Finishing up.
    
 
 
    {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}
    
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
index f96c85e459..420347d83d 100644
--- 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
@@ -23,7 +23,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyb
 var paddleWidth = 75;
 var paddleX = (canvas.width-paddleWidth)/2;
    -

    Здесь мы определяем высоту и ширину ракетки, и его начальную точку на оси X, для дальнейшего использования в расчетах. Давайте создадим функцию, которая будет рисовать ракетку на экране. Добавьте следующий блок после функции drawBall():

    +

    Здесь мы определяем высоту и ширину ракетки, и его начальную точку на оси X, для дальнейшего использования в расчётах. Давайте создадим функцию, которая будет рисовать ракетку на экране. Добавьте следующий блок после функции drawBall():

    function drawPaddle() {
     ctx.beginPath();
@@ -76,7 +76,7 @@ function keyUpHandler(e) {
 
 
    Когда мы нажимаем клавишу, эта информация хранится в переменной. Соответствующая переменная в каждом конкретном случае устанавливается в true. Когда клавиша отпущена, переменная устанавливается обратно в false.
    
 
-
    Обе функции принимают параметр, представленный переменной e. Из нее вы можете получить полезную информацию: key содержит информацию о нажатой клавише. Например, код 37 — это клавиша стрелка влево и 39 — стрелка вправо. Если стрелка влево нажата, то переменная leftPressed имеет значение true, когда кнопка отпущена, то переменная leftPressed имеет значение false. Та же схема со стрелкой вправо и переменной rightPressed.
    
+
    Обе функции принимают параметр, представленный переменной e. Из неё вы можете получить полезную информацию: key содержит информацию о нажатой клавише. Например, код 37 — это клавиша стрелка влево и 39 — стрелка вправо. Если стрелка влево нажата, то переменная leftPressed имеет значение true, когда кнопка отпущена, то переменная leftPressed имеет значение false. Та же схема со стрелкой вправо и переменной rightPressed.
    
 
 
    Логика перемещения ракетки
    
 
@@ -100,7 +100,7 @@ else if(leftPressed && paddleX > 0) {
 
 
    Позиция paddleX будет двигаться от 0 на левой стороне холста и canvas.width-paddleWidth на правой стороне. Это будет работать именно так, как нам нужно.
    
 
-
    Добавьте вышеприведенный блок кода в функцию draw() в самый конец, чуть выше закрывающей фигурной скобки.
    
+
    Добавьте вышеприведённый блок кода в функцию draw() в самый конец, чуть выше закрывающей фигурной скобки.
    
 
 
    Единственное, что осталось сделать сейчас, это вызвать drawPaddle() функцию внутри функции draw(), чтобы нарисовать ракетку на экране. Добавьте следующую строку внутрь функции draw(), чуть ниже строки, которая вызывает drawBall():
    
 
@@ -114,11 +114,11 @@ else if(leftPressed && paddleX > 0) {
 
    {{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}
    
 
 
    
-
    Упражнение: Сделайте скорость движения ракетки быстрее или медленнее, или измените ее размер.
    
+
    Упражнение: Сделайте скорость движения ракетки быстрее или медленнее, или измените её размер.
    
 
    
 
 
    Следующий шаг
    
 
-
    Теперь у нас есть что-то похожее на игру. Беда только в том, что пока вы можете лишь бесконечно бить мяч ракеткой. Это все изменится в пятой главе, Game over, когда мы начнем добавлять конечное состояние для нашей игры.
    
+
    Теперь у нас есть что-то похожее на игру. Беда только в том, что пока вы можете лишь бесконечно бить мяч ракеткой. Это все изменится в пятой главе, Game over, когда мы начнём добавлять конечное состояние для нашей игры.
    
 
 
    {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}
    
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
index f9993a8b31..cef5f1e065 100644
--- 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
@@ -1,12 +1,12 @@
 ---
-title: Счет и выигрыш
+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
 ---
 
    {{GamesSidebar}}
    
@@ -19,9 +19,9 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score
 
    Это 8й шаг из 10 в Gamedev Canvas tutorial. Вы можете найти исходный код для этого урока по ссылке Gamedev-Canvas-workshop/lesson8.html.
    
 
 
-
    Уничтожение кирпичей действительно классно, но, чтобы быть еще более удивительным, игра должна присуждать очки за каждый кирпич, в который попадает игрок, и подсчитывать общий балл.
    
+
    Уничтожение кирпичей действительно классно, но, чтобы быть ещё более удивительным, игра должна присуждать очки за каждый кирпич, в который попадает игрок, и подсчитывать общий балл.
    
 
-
    Подсчет очков
    
+
    Подсчёт очков
    
 
 
    Если вы можете увидеть свои очки на протяжении всей игры, вы можете произвести впечатление на своих друзей. Вам нужна переменная для записи очков. Добавьте следующие данные в свой JavaScript, после остальных переменных:
    
 
@@ -35,7 +35,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score
     ctx.fillText("Score: "+score, 8, 20);
 }
    -

    Рисование текста на канве аналогично рисованию фигур. Определение шрифта выглядит точно так же, как и в CSS - вы можете установить размер и тип шрифта в {{domxref("CanvasRenderingContext2D.font","font()")}} методе. Затем используйте {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} для установки цвета шрифта и  {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} для установки фактического текста, который будет помещен на канву, и где он будет размещен. Первым параметром является сам текст - приведенный выше код показывает текущее количество точек, а два последних параметра - это координаты, в которых текст будет помещен на канву.

    +

    Рисование текста на канве аналогично рисованию фигур. Определение шрифта выглядит точно так же, как и в CSS - вы можете установить размер и тип шрифта в {{domxref("CanvasRenderingContext2D.font","font()")}} методе. Затем используйте {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} для установки цвета шрифта и  {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} для установки фактического текста, который будет помещён на канву, и где он будет размещён. Первым параметром является сам текст - приведённый выше код показывает текущее количество точек, а два последних параметра - это координаты, в которых текст будет помещён на канву.

    Чтобы начислять баллы каждый раз при ударе кирпича, добавьте строку в функцию collisionDetection(), чтобы увеличить значение переменной оценки каждый раз при обнаружении столкновения. Добавьте в код следующую выделенную строку:

    @@ -54,7 +54,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score } } -

    Вызов drawScore()из функции draw() позволяет обновить счет с каждым новым фреймом - добавьте следующую строку внутри draw(), чуть ниже вызова drawPaddle():

    +

    Вызов drawScore()из функции draw() позволяет обновить счёт с каждым новым фреймом - добавьте следующую строку внутри draw(), чуть ниже вызова drawPaddle():

    drawScore();
    -- cgit v1.2.3-54-g00ecf