Практика построения объектов

В этой статье мы напишем классическую демонстрацию «прыгающих шаров», чтобы показать вам, насколько полезными могут быть объекты в JavaScript. Наши маленькие шары будут подпрыгивать на экране и менять цвет, когда они касаются друг друга. Готовый пример будет выглядеть примерно так:

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

Для начала создайте локальные копии наших файловindex.html, style.css и main.js. Они содержат следующее:

1. Очень простой HTML-документ, содержащий элемент <h1>, элемент <canvas> для рисования наших шаров и элементы для применения нашего CSS и JavaScript в нашем HTML.
2. Некоторые очень простые стили, которые в основном служат для стилизации и позиционирования <h1>, и избавляются от любых полос прокрутки или отступы по краю страницы (так что это выглядит красиво и аккуратно).
3. Некоторые JavaScript, которые служат для настройки элемента <canvas> и предоставляют общую функцию, которую мы собираемся использовать.

Первая часть скрипта выглядит так:

var canvas = document.querySelector("canvas");

var ctx = canvas.getContext("2d");

var width = (canvas.width = window.innerWidth);
var height = (canvas.height = window.innerHeight);

Этот скрипт получает ссылку на элемент <canvas>, а затем вызывает метод getContext(), чтобы дать нам контекст, по которому мы можем начать рисовать. Результирующая переменная (ctx) - это объект, который непосредственно представляет область рисования холста и позволяет рисовать на ней 2D-фигуры.

Затем мы устанавливаем переменные, называемые width и height, а также ширину и высоту элемента canvas (представленные свойствами canvas.width и canvas.height), чтобы равняться ширине и высоте окна просмотра браузера (область, на которой отображается веб-страница - это можно получить из свойств Window.innerWidth и Window.innerHeight).

Вы увидите здесь, что мы объединяем несколько назначений вместе, чтобы все переменные были установлены быстрее - это совершенно нормально.

Последняя часть исходного скрипта выглядит следующим образом:

function random(min, max) {
  var num = Math.floor(Math.random() * (max - min + 1)) + min;
  return num;
}

Эта функция принимает два числа в качестве аргументов и возвращает случайное число в диапазоне между ними.

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

function Ball(x, y, velX, velY, color, size) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.color = color;
  this.size = size;
}

Здесь мы включаем некоторые параметры, которые определяют свойства, которым должен соответствовать каждый шар в нашей программе:

• x и y координаты - горизонтальные и вертикальные координаты, где мяч будет запускаться на экране. Координаты могут находиться в диапазоне от 0 (верхний левый угол) до ширины и высоты окна просмотра браузера (нижний правый угол).
• горизонтальная и вертикальная скорость (velX и velY) - каждому шару задана горизонтальная и вертикальная скорость; в реальном выражении эти значения будут регулярно добавляться к значениям координат x/y, когда мы начнём анимировать шары, чтобы их перемещать на каждом кадре.
• color - каждый мяч получает цвет.
• size - каждый мяч получает размер - это будет его радиус в пикселях.

Этим мы сортируем свойства, но что насчёт методов? Мы хотим заставить эти шары на самом деле сделать что-то в нашей программе.

Сначала добавьте следующий метод draw() к Ball()'s prototype:

Ball.prototype.draw = function () {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
};

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

• Во-первых, мы используем beginPath(), чтобы указать, что мы хотим нарисовать фигуру на бумаге.

• Затем мы используем fillStyle для определения того, какой цвет нам нужен, - мы устанавливаем его в свойство цвета нашего шара.

• Затем мы используем метод arc() для отслеживания формы дуги на бумаге. Его параметры:

  • Положение x и y центра дуги - мы указываем свойства x и y нашего шара.
  • Радиус нашей дуги - мы указываем свойство size шарика.
  • Последние два параметра определяют начальное и конечное число градусов по кругу, по которому проходит дуга. Здесь мы указываем 0 градусов и 2 * PI, что эквивалентно 360 градусам в радианах (досадно, вы должны указать это в радианах). Это даёт нам полный круг. Если вы указали только 1 * PI, вы получите полукруг (180 градусов).

• В последнем случае мы используем метод fill(), который в основном утверждает: «Закончите рисование пути, начатого с beginPath(), и заполните область, которую он занимает с цветом, указанным ранее в fillStyle».

Теперь вы можете начать тестирование своего объекта..

1. Сохраните код и загрузите HTML-файл в браузер.

2. Откройте консоль JavaScript браузера, а затем обновите страницу, чтобы размер холста изменился в соответствии с новой шириной и высотой окна просмотра браузера после открытия консоли.

3. Чтобы создать новый экземпляр шара, введите следующее:

   js

   var testBall = new Ball(50, 100, 4, 4, "blue", 10);
   

4. Попробуйте вызвать его свойства и методы:

   js

   testBall.x;
   testBall.size;
   testBall.color;
   testBall.draw();
   

5. После введения последней строки, вы должны увидеть, как мяч нарисовался где-то на вашем холсте.

Мы можем нарисовать мяч в нужном положении, но чтобы начать движение мяча, нам нужна функция обновления. Добавьте следующий код внизу вашего файла JavaScript, чтобы добавить метод update() к Ball()'s prototype:

Ball.prototype.update = function () {
  if (this.x + this.size >= width) {
    this.velX = -this.velX;
  }

  if (this.x - this.size <= 0) {
    this.velX = -this.velX;
  }

  if (this.y + this.size >= height) {
    this.velY = -this.velY;
  }

  if (this.y - this.size <= 0) {
    this.velY = -this.velY;
  }

  this.x += this.velX;
  this.y += this.velY;
};

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

В этих четырёх случаях мы:

• Проверяем больше ли координата x, чем ширина холста (мяч уходит с правого края).
• Проверяем будет ли координата x меньше 0 (мяч уходит с левого края).
• Проверяем будет ли координата y больше высоты холста (мяч уходит с нижнего края).
• Проверяем будет ли координата y меньше 0 (мяч уходит с верхнего края).

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

Последние две строки добавляют значение velX к координате x, а значение velY - координате y - шар фактически перемещается при каждом вызове этого метода.

На сейчас этого достаточно, давайте продолжим анимацию!

Теперь давайте приступать к веселью! Сейчас мы начнём добавлять шары к холсту и анимировать их.

1. Во-первых, нам нужно где-то хранить все наши шары. Следующий массив выполнит это задание - добавьте его внизу кода:

   js

   var balls = [];
   

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

2. Добавьте ниже эту часть кода:

   js

   function loop() {
     ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
     ctx.fillRect(0, 0, width, height);
   
     while (balls.length < 25) {
       var ball = new Ball(
         random(0, width),
         random(0, height),
         random(-7, 7),
         random(-7, 7),
         "rgb(" +
           random(0, 255) +
           "," +
           random(0, 255) +
           "," +
           random(0, 255) +
           ")",
         random(10, 20),
       );
       balls.push(ball);
     }
   
     for (var i = 0; i < balls.length; i++) {
       balls[i].draw();
       balls[i].update();
     }
   
     requestAnimationFrame(loop);
   }
   

   Наша функция loop() выполняет следующие действия:

   • Устанавливает цвет заливки на полупрозрачный чёрный, затем рисует прямоугольник цвета по всей ширине и высоте холста, используя fillRect() (четыре параметра обеспечивают начальную координату, а ширину и высоту для рисованного прямоугольника ). Это позволяет скрыть рисунок предыдущего кадра до того, как будет нарисован следующий. Если вы этого не сделаете, вы увидите, как длинные змеи пробираются вокруг холста, а не шары! Цвет заливки устанавливается на полупрозрачный, rgba(0,0,0,0,25), чтобы позволить нескольким кадрам слегка просвечивать, создавая маленькие тропы за шариками по мере их перемещения. Если вы изменили 0.25 на 1, вы больше не увидите их. Попробуйте изменить это число, чтобы увидеть эффект, который он имеет.
   • Создаёт новый экземпляр нашего Ball(), используя случайные значения, сгенерированные с помощью нашей функции random(), затем push() на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в balls.length < 25, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысяч шаров, это может довольно существенно повлиять на производительность анимации.
   • перебирает все шары в массиве balls и запускает каждую функцию draw() и update() для рисования каждого из них на экране, а затем выполняет необходимые обновления по положению и скорости во времени для следующего кадра.
   • Выполняет функцию снова с помощью метода requestAnimationFrame() - когда этот метод постоянно запускается и передаётся одно и то же имя функции, он будет запускать эту функцию определённое количество раз в секунду для создания плавной анимации. Обычно это делается рекурсивно - это означает, что функция вызывает себя каждый раз, когда она запускается, поэтому она будет работать снова и снова.

3. И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию.

   js

   loop();
   

Вот и все для основы - попробуйте сохранить и освежить, чтобы проверить свои прыгающие шары!

Теперь немного поиграем, давайте добавим в нашу программу обнаружение конфликтов, поэтому наши мячи узнают, когда они ударят по другому шару.

1. Прежде всего, добавьте следующее определение метода ниже, где вы определили метод update() (т.е. блок Ball.prototype.update).

   js

   Ball.prototype.collisionDetect = function () {
     for (var j = 0; j < balls.length; j++) {
       if (!(this === balls[j])) {
         var dx = this.x - balls[j].x;
         var dy = this.y - balls[j].y;
         var distance = Math.sqrt(dx * dx + dy * dy);
   
         if (distance < this.size + balls[j].size) {
           balls[j].color = this.color =
             "rgb(" +
             random(0, 255) +
             "," +
             random(0, 255) +
             "," +
             random(0, 255) +
             ")";
         }
       }
     }
   };
   

   Этот метод немного сложный, поэтому не беспокойтесь, если вы не понимаете, как именно это работает. Ниже приводится объяснение:

   • Для каждого шара нам нужно проверить каждый другой шар, чтобы увидеть, столкнулся ли он с текущим мячом. Чтобы сделать это, мы открываем ещё один цикл for через все шары в массиве balls[].
   • Сразу же в нашем цикле for мы используем оператор if, чтобы проверить, проходит ли текущий шарик, тот же самый шар, что и тот, который мы сейчас проверяем. Мы не хотим проверять, что мяч столкнулся с самим собой! Для этого мы проверяем, является ли текущий мяч (т.е. мяч, метод которого вызван методом collisionDetect) такой же, как шар петли (т.е. шар, на который ссылается текущая итерация цикла for в collisionDetect метод). Затем мы используем ! чтобы отменить проверку, чтобы код внутри оператора if выполнялся только в том случае, если они не совпадают.
   • Затем мы используем общий алгоритм для проверки столкновения двух окружностей. Мы в основном проверяем, перекрывается ли какая-либо из областей круга. Это объясняется далее 2D collision detection.
   • Если обнаружено столкновение, выполняется код внутри внутреннего оператора if. В этом случае мы просто устанавливаем свойство color обоих кругов на новый случайный цвет. Мы могли бы сделать что-то гораздо более сложное, например, заставить шары отскакивать друг от друга реалистично, но это было бы гораздо сложнее реализовать. Для такого моделирования физики разработчики склонны использовать игры или библиотеку физики, такие как PhysicsJS, matter.js, Phaser и т.д.

2. Вы также должны вызвать этот метод в каждом кадре анимации. Добавьте следующий код после строки balls[i].update();

   js

   balls[i].collisionDetect();
   

3. Сохраните и обновите демо снова, и вы увидите, как ваши мячи меняют цвет, когда они сталкиваются!

Мы надеемся, что вам понравилось писать собственный пример случайных прыгающих шаров в реальном мире, используя различные объектные и объектно-ориентированные методы из всего модуля! Это должно было дать вам некоторую полезную практику использования объектов и хорошего контекста реального мира.

Вот и все для предметных статей - все, что осталось сейчас, - это проверить свои навыки в оценке объекта.

• Canvas tutorial — руководство для новичков по использованию 2D-холста.
• requestAnimationFrame()
• 2D collision detection
• 3D collision detection
• 2D breakout game using pure JavaScript — a great beginner's tutorial showing how to build a 2D game.
• 2D breakout game using Phaser — explains the basics of building a 2D game using a JavaScript game library.

• Назад
• Обзор: Введение в объекты JavaScript
• Далее