From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- files/ru/games/anatomy/index.html | 14 +++++++------- files/ru/games/introduction/index.html | 6 +++--- .../building_up_a_basic_demo_with_three.js/index.html | 14 +++++++------- .../games/techniques/3d_on_the_web/glsl_shaders/index.html | 4 ++-- files/ru/games/techniques/controls_gamepad_api/index.html | 4 ++-- files/ru/games/tools/index.html | 6 +++--- .../bounce_off_the_walls/index.html | 2 +- .../build_the_brick_field/index.html | 8 ++++---- .../2d_breakout_game_phaser/collision_detection/index.html | 2 +- .../2d_breakout_game_phaser/extra_lives/index.html | 6 +++--- .../tutorials/2d_breakout_game_phaser/game_over/index.html | 2 +- .../ru/games/tutorials/2d_breakout_game_phaser/index.html | 2 +- .../initialize_the_framework/index.html | 6 +++--- .../tutorials/2d_breakout_game_phaser/physics/index.html | 2 +- .../player_paddle_and_controls/index.html | 8 ++++---- .../tutorials/2d_breakout_game_phaser/scaling/index.html | 2 +- .../tutorials/2d_breakout_game_phaser/the_score/index.html | 2 +- .../2d_breakout_game_phaser/win_the_game/index.html | 4 ++-- .../bounce_off_the_walls/index.html | 4 ++-- .../create_the_canvas_and_draw_on_it/index.html | 2 +- .../2d_breakout_game_pure_javascript/game_over/index.html | 6 +++--- 21 files changed, 53 insertions(+), 53 deletions(-) (limited to 'files/ru/games') diff --git a/files/ru/games/anatomy/index.html b/files/ru/games/anatomy/index.html index 261501f6d3..4d36d1f316 100644 --- a/files/ru/games/anatomy/index.html +++ b/files/ru/games/anatomy/index.html @@ -24,7 +24,7 @@ original_slug: Games/Анатомия

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

-

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

+

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

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

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

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

+

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

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

-

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

+

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

-

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

+

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

  1. Запустить новый кадр (пока предыдущий обрабатывается на дисплее.).
    2. @@ -119,9 +119,9 @@ main(); // Start the cycle
  2. Спать (если только какое-либо событие не прервет сон браузера) до тех пор, пока монитор не будет готов к вашему изображению (VSync), и повторить его.
-

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

+

Вы можете думать о разработке 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 мс, если способны на это. 

@@ -134,7 +134,7 @@ main(); // Start the cycle 
var tNow = window.performance.now();
-

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

+

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

/*
 * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера
diff --git a/files/ru/games/introduction/index.html b/files/ru/games/introduction/index.html
index 56359a41eb..a107d280d5 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

 
@@ -92,9 +92,9 @@ 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 позволяет блокировать мышь или другое указывающее устройство в интерфейсе вашей игры. Вместо абсолютного позиционирования курсора вы получаете координаты дельты, которые дают вам более точные измерения того, что делает пользователь, и предотвращают случайную отправку ввода где-то еще, тем самым упуская важные пользовательские действия.

  

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 7205f72e7a..487d366dcc 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
@@ -21,7 +21,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 
Чтобы начать разработку с Three.js, нужно:

 
 
    
- 
  • Удостовериться, что вы используете современную версию браузера с поддеркой WebGL, например, Firefox или Chrome.
    • 
+ 
  • Удостовериться, что вы используете современную версию браузера с поддержкой WebGL, например, Firefox или Chrome.
    • 
  
  • Создать папку для экспериментов.
    • 
  
  • Сохранить копию последней версии библиотеки Three.js в вашей папке.
    • 
  
  • Открыть документацию Three.js в отдельной вкладке.
    • 
@@ -58,7 +58,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 
 
    Renderer
    
 
-
    Renderer это инструмент для отрисовки сцены в браузере. Есть 2 вида таких инструментов: WebGL по умолчанию, другие - Canvas, SVG, CSS, и DOM. Они различаются по тому как все рендерится. Несмотря на различия в них, для пользователя все будет выглядить одинаково. Поэтому, вы можете выбрать запасной вариант на случай, если браузер пользователя не поддерживает выбранную вами технологию.
    
+
    Renderer это инструмент для отрисовки сцены в браузере. Есть 2 вида таких инструментов: WebGL по умолчанию, другие - Canvas, SVG, CSS, и DOM. Они различаются по тому как все рендерится. Несмотря на различия в них, для пользователя все будет выглядеть одинаково. Поэтому, вы можете выбрать запасной вариант на случай, если браузер пользователя не поддерживает выбранную вами технологию.
    
 
 
    var renderer = new THREE.WebGLRenderer({antialias:true});
 renderer.setSize(WIDTH, HEIGHT);
@@ -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")}}.
    
 
@@ -150,17 +150,17 @@ render();
 
 
    Добавление куба в сцену
    
 
-
    Сейчас мы создали куб, используя 'geometry' и 'material'. Последнее, что мы долны сделать - добавить куб на сцену. Добавте в код эту строку:
    
+
    Сейчас мы создали куб, используя 'geometry' и 'material'. Последнее, что мы должны сделать - добавить куб на сцену. Добавьте в код эту строку:
    
 
 
    scene.add(cube);
 
    
 
-
    Есди вы сохраните код и обновите вкладку браузера, вы увидете квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У обьектов есть полезное свойтво - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Чтож давайте немного повернем его, чтобы видеть больше сторон.  Добавть в конец кода эту строку:
    
+
    Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернем его, чтобы видеть больше сторон.  Добавить в конец кода эту строку:
    
 
 
    cube.rotation.set(0.4, 0.2, 0);
 
    
 
-
    Поздровляю, Вы создали обьект в 3D-среде! This might have proven easier than you first thought? Here's how it should look:
    
+
    Поздравляю, Вы создали объект в 3D-среде! This might have proven easier than you first thought? Here's how it should look:
    
 
 
    Blue cube on a gray background rendered with Three.js.
    
 
@@ -221,7 +221,7 @@ scene.add(light);
 
 
    Вращение
    
 
-
    Вращать фигуры просто. Вы просто добавляете или отнимаете значение по оси вращения. Добавте эту строкуу кода сразу после: requestAnimationFrame() invocation inside the render function:
    
+
    Вращать фигуры просто. Вы просто добавляете или отнимаете значение по оси вращения. Добавьте эту строку кода сразу после: requestAnimationFrame() invocation inside the render function:
    
 
 
    cube.rotation.y += 0.01;
 
    
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 2d157a2109..9121cc00e2 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
@@ -11,11 +11,11 @@ translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders
 ---
 
    {{GamesSidebar}}
    
 
-
    Шейдеры используют GLSL (OpenGL Shading Language), специальный язык программирования шейдеров от OpenGL, который во многом напоминает С (Си). GLSL выполняется напрямую графическим процессором. Существует два типа шейдеров: вершинные шейдеры и фрагментные (пиксельные) шейдеры. Вершинные шейдеры изменяют положение фигуры в системе 3D координат. Фрагментные шейдеры расчитывают цвет и другие атрибуты отображения.
    
+
    Шейдеры используют GLSL (OpenGL Shading Language), специальный язык программирования шейдеров от OpenGL, который во многом напоминает С (Си). GLSL выполняется напрямую графическим процессором. Существует два типа шейдеров: вершинные шейдеры и фрагментные (пиксельные) шейдеры. Вершинные шейдеры изменяют положение фигуры в системе 3D координат. Фрагментные шейдеры рассчитывают цвет и другие атрибуты отображения.
    
 
 
    GLSL не так прост в изучении, как JavaScript. GLSL является строго типизированным и в нем часто используются операции с векторами и матрицами. It can get very complicated — very quickly. В этой статье мы создадим небольшой пример кода, который отображает куб. Чтобы ускорить разработку, мы будем использовать Three.js API.
    
 
-
    Как Вы помните из статьи о теоретических основах, вертекс или вершина это точка в системе 3D кординат. Также вершины могут иметь дополнительные свойства. Система 3D координат определяет пространство, а вертексы позволяют определять формы в этом пространстве.
    
+
    Как Вы помните из статьи о теоретических основах, вертекс или вершина это точка в системе 3D координат. Также вершины могут иметь дополнительные свойства. Система 3D координат определяет пространство, а вертексы позволяют определять формы в этом пространстве.
    
 
 
    Типы шейдеров
    
 
diff --git a/files/ru/games/techniques/controls_gamepad_api/index.html b/files/ru/games/techniques/controls_gamepad_api/index.html
index edbb3e0a40..7931059e64 100644
--- a/files/ru/games/techniques/controls_gamepad_api/index.html
+++ b/files/ru/games/techniques/controls_gamepad_api/index.html
@@ -51,7 +51,7 @@ translation_of: Games/Techniques/Controls_Gamepad_API
 
 
    Демо-версия
    
 
-
    Сначала была построена полная версия игры Hungry Fridge, а затем, чтобы для демострации API Gamepad в действии и показа исходного кода JavaScript, была создана простая демо-версия. Это часть набора контента Gamepad API, доступного на GitHub, где вы можете глубоко погрузиться в код и изучить, как именно он работает.
    
+
    Сначала была построена полная версия игры Hungry Fridge, а затем, чтобы для демонстрации API Gamepad в действии и показа исходного кода JavaScript, была создана простая демо-версия. Это часть набора контента Gamepad API, доступного на GitHub, где вы можете глубоко погрузиться в код и изучить, как именно он работает.
    
 
 
    Hungry Fridge demo using Gamepad API
    
 
@@ -122,7 +122,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);
 
 
      
  
    • id: Строка, содержащая информацию о контроллере.
      • 
- 
    • index: Уникальный индентификатор для подключенного устройства.
      • 
+ 
    • index: Уникальный идентификатор для подключенного устройства.
      • 
  
    • connected: Логическая переменная. Возвращает true при подключении.
      • 
  
    • mapping: Тип компоновки кнопок; Стандартный - единственный доступный вариант на данный момент.
      • 
  
    • axes: Состояние каждой оси, представленное массивом значений с плавающей запятой.
      • 
diff --git a/files/ru/games/tools/index.html b/files/ru/games/tools/index.html
index 8129376e06..91e2bf3f41 100644
--- a/files/ru/games/tools/index.html
+++ b/files/ru/games/tools/index.html
@@ -12,10 +12,10 @@ original_slug: Games/Инструменты
 
 
      
  
      asm.js
      
- 
      asm.js это очень ограниченное подмножество языка JavaScript, которое можно значительно оптимизировать и запустить в опережающем времени (AOT), компилируя движок гораздо быстрее, чем при типичной произвоительности языка. А это, конечно же, замечательно для игр.
      
+ 
      asm.js это очень ограниченное подмножество языка JavaScript, которое можно значительно оптимизировать и запустить в опережающем времени (AOT), компилируя движок гораздо быстрее, чем при типичной производительности языка. А это, конечно же, замечательно для игр.
      
  
      Emscripten
      
  
      
- 
      Низккоуровневя виртуальная машина(LLVM) для JavaScript; с Emscripten вы можете компилировать C++ и другие языки, которые можно копировать в байткод LLVM с высокоц производительностью JavaScript. Это отличный веб-инструмент! Вот полезный туториал по Emscripten, доступный на вики. Заметьте, что мы стремимся охватить Emscripten в своих разделах на MDN.
      
+ 
      Низкоуровневая виртуальная машина(LLVM) для JavaScript; с Emscripten вы можете компилировать C++ и другие языки, которые можно копировать в байт-код LLVM с высокой производительностью JavaScript. Это отличный веб-инструмент! Вот полезный туториал по Emscripten, доступный на вики. Заметьте, что мы стремимся охватить Emscripten в своих разделах на MDN.
      
  
      
  
      Gecko profiler
      
  
      Gecko profiler позволяет профилировать код, чтобы понять, где имеются проблемы производительности, и добиться максимальной скорости в .
      
@@ -26,7 +26,7 @@ original_slug: Games/Инструменты
  
      Инструментарий для разработки и отладки игр
      
  
      Чем это отличается от обычной отладки веб-приложения? Какие специальные инструменты доступны? Многое из этого доступно в инструментах, но здесь мы должны обеспечить своего рода практический учебник для отладки игры, с ссылками :
  
        
-  
      • Обзор базовых инстурментов
        • 
+  
      • Обзор базовых инструментов
        • 
   
      • Редактор шейдеров
        • 
   
      • Производственные инструменты (все еще находятся в производстве, по оценкам, в начале 2014 года)
        • 
  
      
diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html
index 0b945f61fc..090b6c4b26 100644
--- a/files/ru/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html
@@ -23,7 +23,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
      ball.body.collideWorldBounds = true;
 
      
 
-
      Теперь мяч будет останавливаться у границ экрана, вместо того чтобы исчезать, но он не отскакивает. Чтобы это происодило нам нужно установить его "отскакиваемость". Добавте следующий код ниже предыдущей строки:
      
+
      Теперь мяч будет останавливаться у границ экрана, вместо того чтобы исчезать, но он не отскакивает. Чтобы это происходило нам нужно установить его "отскакиваемость". Добавите следующий код ниже предыдущей строки:
      
 
 
      ball.body.bounce.set(1);
 
      
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 4b68f11f31..8d4171bde1 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
@@ -18,14 +18,14 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
 
      Определяем переменные
      
 
-
      Сначала, давайте определим необходимые переменные — добавьте следующий код ниже всех наших текущих опеределений переменных:
      
+
      Сначала, давайте определим необходимые переменные — добавьте следующий код ниже всех наших текущих определений переменных:
      
 
 
      var bricks;
 var newBrick;
 var brickInfo;
 
      
 
-
      Переменная bricks будет использоваться в качестве набора кирпичей, newBrick будет тем самым кирпичем, который мы будем создавать в каждой итерации цикла и добавлять в набор, а в brickInfo будет хранить всю необходимую информацию о кирпичах, как таковых.
      
+
      Переменная bricks будет использоваться в качестве набора кирпичей, newBrick будет тем самым кирпичом, который мы будем создавать в каждой итерации цикла и добавлять в набор, а в brickInfo будет хранить всю необходимую информацию о кирпичах, как таковых.
      
 
 
      Добавляем графику для кирпича
      
 
@@ -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()

@@ -142,7 +142,7 @@ var brickY = (r*(brickInfo.height+brickInfo.padding))+brickInfo.offset.top; } -

Если вы перезапустите страницу index.html, то увидете кирпичи, нарисованные на расстоянии друг от друга.

+

Если вы перезапустите страницу index.html, то увидеть кирпичи, нарисованные на расстоянии друг от друга.

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

diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html index f8bf45148e..8785cc28d5 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html @@ -36,7 +36,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser

Вот и всё! Перезагрузите страницу и вы увидите, что все коллизии обрабатывается, как следует.

-

Спасибо Phaser за то, что передал нам в функцию эти два параметра — мячик и тот кирпич, с которым у мячика произошла коллизия. А дальше мы просто удаляем кирпчи с экрана, вызвав у него функцию kill().

+

Спасибо Phaser за то, что передал нам в функцию эти два параметра — мячик и тот кирпич, с которым у мячика произошла коллизия. А дальше мы просто удаляем кирпич с экрана, вызвав у него функцию kill().

Вы думали, что нам придётся писать много кода для отслеживания коллизий, как мы это делали на чистом JavaScript? В этом и прелесть фреймворков — рутину они сделают за нас, а мы, в это время, можем сосредоточиться на действительно интересных вещах.

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 94734655f6..d19481e9ca 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 @@ -18,7 +18,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser

Новый переменные

-

Добавьте следующие переменные сразу после всех наших текущих опеределений переменных:

+

Добавьте следующие переменные сразу после всех наших текущих определений переменных:

var lives = 3;
 var livesText;
@@ -38,13 +38,13 @@ lifeLostText.anchor.set(0.5);
 lifeLostText.visible = false;
-

Объекты livesText иlifeLostText очень похожи на scoreText — они определяют положение на экране, текст надписи и стилизацию шрифта. Чтобы всё выглядило должным образом, надпись с жизнями мы закрепляем в правом верхнем углу, а надпись о потере жизни, мы выводим в центре экрана. И всё это при помощи функции anchor.set().

+

Объекты livesText иlifeLostText очень похожи на scoreText — они определяют положение на экране, текст надписи и стилизацию шрифта. Чтобы всё выглядело должным образом, надпись с жизнями мы закрепляем в правом верхнем углу, а надпись о потере жизни, мы выводим в центре экрана. И всё это при помощи функции anchor.set().

Надпись lifeLostText появится только при потере жизни, поэтому её видимость мы выставляем в false.

Чистим код, стилизирующий надписи

-

Как вы могли заметить, мы используем одинаковые стили для всех надписей: scoreText, livesText и lifeLostText. Однако, налицо копирование кода и если мы, когда-либо, захотим изменить размер шрифта или цвет, то нам придётся делать это в нескольких местах. Чтобы избежать этого, мы вынесем стиль в отдельную переменную. Напишите следующую строку сразу после всех наших текущих опеределений переменных:

+

Как вы могли заметить, мы используем одинаковые стили для всех надписей: scoreText, livesText и lifeLostText. Однако, налицо копирование кода и если мы, когда-либо, захотим изменить размер шрифта или цвет, то нам придётся делать это в нескольких местах. Чтобы избежать этого, мы вынесем стиль в отдельную переменную. Напишите следующую строку сразу после всех наших текущих определений переменных:

var textStyle = { font: '18px Arial', fill: '#0095DD' };
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 1916b9b931..c39dd38a7c 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 @@ -23,7 +23,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser 
game.physics.arcade.checkCollision.down = false;
-

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

+

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

ball.checkWorldBounds = true;
 ball.events.onOutOfBounds.add(function(){
diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/index.html
index c99663b5ef..0dac18277f 100644
--- a/files/ru/games/tutorials/2d_breakout_game_phaser/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/index.html
@@ -21,7 +21,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
 
В этом пошаговом руководстве мы создадим простую мобильную игру MDN Breakout с помощью JavaScript и фреймворка Phaser.

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

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

 
 
Чтобы получить наибольшую пользу от этого руководства, вам необходимо иметь базовые знания JavaScript. После прочтения вы научитесь создавать собственные простые веб-игры с помощью Phaser.

 
diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html
index aab8ab6cf4..081725bbed 100644
--- a/files/ru/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html
@@ -55,9 +55,9 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
 
    
  
  1. Перейдите на страницу загрузки Phaser.
    2. 
- 
  2. Выберите наиболее удобный для вас вариант загрузки. Я рекоммендую min.js скачивание, потому что исходный код будет меньше, да и вам не придётся разбираться в нём.
    3. 
+ 
  3. Выберите наиболее удобный для вас вариант загрузки. Я рекомендую min.js скачивание, потому что исходный код будет меньше, да и вам не придётся разбираться в нём.
    4. 
  
  4. Сохраните Phaser внутри /js директории, находящейся в том же месте, что и index.html
    5. 
- 
  5. Обновите аттрибут src в первом элементе {{htmlelement("script")}}, как это показано выше.
    6. 
+ 
  6. Обновите атрибут src в первом элементе {{htmlelement("script")}}, как это показано выше.
    7. 
 

 
 
Что мы имеем

@@ -69,7 +69,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
    
  
  • width и height устанавливают ширину и высоту {{htmlelement("canvas")}} соответственно.
    • 
  
  • Метод рендеринга. Здесь есть три опции AUTO, CANVAS и WEBGL. Мы можем установить одно из двух последних значений или AUTO, чтобы Phaser сам определил, что использовать. Обычно используется WebGL, но если браузер его не поддерживает, то Canvas 2D.
    • 
- 
  • id элемнта {{htmlelement("canvas")}} используется для рендеринга, если один {{htmlelement("canvas")}} уже есть (мы установили значение null, чтобы Phaser создал свой собственный).
    • 
+ 
  • id элемента {{htmlelement("canvas")}} используется для рендеринга, если один {{htmlelement("canvas")}} уже есть (мы установили значение null, чтобы Phaser создал свой собственный).
    • 
  
  • Дальше идут названия трёх ключевых функций Phaser: загрузки (load), старта (start) и обновления (update) игры на каждом кадре; мы выбрали такие же названия, чтобы сохранять чистоту кода.
   
      
    
    • preload заботится о предзагрузке ресурсов игры
      • 
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 d7acbb92d3..e9de5c8ec3 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
@@ -84,7 +84,7 @@ function update() {
 
 
      Вы можете делать гораздо больше вещей с физикой. Например, добавив ball.body.gravity.y = 100, вы установите вертикальную гравитацию для мячика. Как результат он будет сначала запущен вверх, но затем начнёт падать, находясь под действием гравитации.
      
 
-
      Это лишь верхушка айсберга: есть огромное количество перменных и функции, с помощью которых вы можете взаимодействовать с физическими объектами. Посмотрите официальную документацию, чтобы увидеть огромное количество примеров применения Arcade и P2.
      
+
      Это лишь верхушка айсберга: есть огромное количество переменных и функции, с помощью которых вы можете взаимодействовать с физическими объектами. Посмотрите официальную документацию, чтобы увидеть огромное количество примеров применения Arcade и P2.
      
 
 
      Сравните свой код
      
 
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 35001ea66d..2064e6aa09 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
@@ -47,9 +47,9 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
      paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle');
 
      
 
-
      Мы можем использовать world.width и world.height для позиционирования платформы в том месте, где мы хотим: game.world.width*0.5 расположит платформу прямо по середине экрана. В данном случае, нам повезло, что наш игровой мир совпадает с <canvas>, однако, в других играх мир может быть гараздо больше экрана. 
      
+
      Мы можем использовать world.width и world.height для позиционирования платформы в том месте, где мы хотим: game.world.width*0.5 расположит платформу прямо по середине экрана. В данном случае, нам повезло, что наш игровой мир совпадает с <canvas>, однако, в других играх мир может быть гораздо больше экрана. 
      
 
-
      Как вы могли заметить, перезагрузив, на данном этапе, страницу index.html, платформа находится не совсем по середине экрана. Почему? Всё дело в том, что, по умолчанию, точка, из которой начинается позиционирование объекта (якорь), находится в левом верхнем углу. Но мы можем это изменить и переместить якорь в середину платформы по ширине и в самый низ повысоте, чтобы проще было позиционировать платформу, относительно нижней грани экрана. Добавьте следующую строку кода:
      
+
      Как вы могли заметить, перезагрузив, на данном этапе, страницу index.html, платформа находится не совсем по середине экрана. Почему? Всё дело в том, что, по умолчанию, точка, из которой начинается позиционирование объекта (якорь), находится в левом верхнем углу. Но мы можем это изменить и переместить якорь в середину платформы по ширине и в самый низ по высоте, чтобы проще было позиционировать платформу, относительно нижней грани экрана. Добавьте следующую строку кода:
      
 
 
      paddle.anchor.set(0.5,1);
 
      
@@ -75,7 +75,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
 
      Управляем платформой
      
 
-
      Следующая проблема заключается в том, что мы не можем двигать платформу. Чтобы сделать это мы можем воспользоваться вводом input (мышь или сенсорный экран, в зависимости от платформы) и расположить нашу плаформу в месте расположения курсора. Добавьте следующую строку кода в функцию update(), как показано ниже:
      
+
      Следующая проблема заключается в том, что мы не можем двигать платформу. Чтобы сделать это мы можем воспользоваться вводом input (мышь или сенсорный экран, в зависимости от платформы) и расположить нашу платформу в месте расположения курсора. Добавьте следующую строку кода в функцию update(), как показано ниже:
      
 
 
      function update() {
     game.physics.arcade.collide(ball, paddle);
@@ -83,7 +83,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 }
 
      
 
-
      Теперь, каждый кадр координата x платформы будет соответствовать координате x курсора. Однако, при старте игры, положение нашей платформы не по центру экрана, из-за того, что положение курсора не определено. Чтобы это исправить, давайте добавим платформе координату x по умолчанию, на случаей, если положение курсора не определено. Обновите предыдущую строку кода:
      
+
      Теперь, каждый кадр координата x платформы будет соответствовать координате x курсора. Однако, при старте игры, положение нашей платформы не по центру экрана, из-за того, что положение курсора не определено. Чтобы это исправить, давайте добавим платформе координату x по умолчанию, на случай, если положение курсора не определено. Обновите предыдущую строку кода:
      
 
 
      paddle.x = game.input.x || game.world.width*0.5;
 
      
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 78495b48fa..30c80ddf18 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 — cоздаёт {{htmlelement("canvas")}} с доступными шириной и высотой так, что вы можете помещать объекты в игру динамически; это раширенный режим (advanced mode).
      • 
+ 
    • RESIZE — создает {{htmlelement("canvas")}} с доступными шириной и высотой так, что вы можете помещать объекты в игру динамически; это расширенный режим (advanced mode).
      • 
  
    • USER_SCALE — позволяет вам делать динамическое масштабирование, подсчёт размеров, масштаб и соотношение самостоятельно; опять же это расширенный режим.
      • 
 
    
 
diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/the_score/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/the_score/index.html
index e7a01d4c61..ff777f690a 100644
--- a/files/ru/games/tutorials/2d_breakout_game_phaser/the_score/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/the_score/index.html
@@ -20,7 +20,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
 
    Определим переменные
    
 
-
    Добавьте две новых переменных после всех наших текущих опеределений переменных:
    
+
    Добавьте две новых переменных после всех наших текущих определений переменных:
    
 
 
    // ...
 var scoreText;
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 72e57116a1..95f3e31b65 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 у каждого кирпича и, если все кирпичи разрушены, выведем всплывающее окно с текстом о победе. После закрытия этого окна, страница перезагрузится.
    
 
 
    Сравните свой код
    
 
@@ -50,6 +50,6 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
 
    Следующий шаг
    
 
-
    Логику прогрыша и выигрыша мы сделали, так что, основная часть игры готова. Теперь давайте добавим какую-нибудь фишку — дадим игроку три жизни, вместо одной.
    
+
    Логику проигрыша и выигрыша мы сделали, так что, основная часть игры готова. Теперь давайте добавим какую-нибудь фишку — дадим игроку три жизни, вместо одной.
    
 
 
    {{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Очки", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Жизни")}}
    
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 1e5796777e..f94fabfb04 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
@@ -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")}}
    
 
diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
index aa69757156..4e8984d006 100644
--- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
@@ -88,7 +88,7 @@ ctx.closePath();
  • направление отрисовки: (false - по часовой стрелке, по умолчанию, или true - против часовой стрелки). Последний параметр не обязательный.
    • -

    Свойство {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} выглядит не так, как прежде. Это потому что, как и в CSS, цвет может быть задан в шестнадцатиричном формате, названием цвета, функцией rgba() , или же любым другим методом для цвета.

    +

    Свойство {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} выглядит не так, как прежде. Это потому что, как и в CSS, цвет может быть задан в шестнадцатеричном формате, названием цвета, функцией rgba() , или же любым другим методом для цвета.

    Вместо {{domxref("CanvasRenderingContext2D.fill()","fill()")}} и заполнения фигур цветом, можно использовать {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}}, чтобы окрасить только внешнюю обводку фигуры. Попробуйте добавить этот код к Вашему коду JavaScript:

    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 bb944fae5d..37ed140976 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 @@ -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) {

    Отбить шар

    -

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

    +

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

    if(y + dy < ballRadius) {
     dy = -dy;
@@ -76,7 +76,7 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
     }
 }
    -

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

    +

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

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

    -- cgit v1.2.3-54-g00ecf