From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../2d_breakout_game_phaser/bounce_off_the_walls/index.html | 2 +- .../2d_breakout_game_phaser/build_the_brick_field/index.html | 8 ++++---- .../2d_breakout_game_phaser/collision_detection/index.html | 2 +- .../tutorials/2d_breakout_game_phaser/extra_lives/index.html | 6 +++--- .../games/tutorials/2d_breakout_game_phaser/game_over/index.html | 2 +- files/ru/games/tutorials/2d_breakout_game_phaser/index.html | 2 +- .../2d_breakout_game_phaser/initialize_the_framework/index.html | 6 +++--- .../ru/games/tutorials/2d_breakout_game_phaser/physics/index.html | 2 +- .../2d_breakout_game_phaser/player_paddle_and_controls/index.html | 8 ++++---- .../ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html | 2 +- .../games/tutorials/2d_breakout_game_phaser/the_score/index.html | 2 +- .../tutorials/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 +++--- 15 files changed, 29 insertions(+), 29 deletions(-) (limited to 'files/ru/games/tutorials') 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
  • направление отрисовки: (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