We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

В процессе перевода.

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

Prerequisites: Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see First steps and Building blocks) and OOJS basics (see Introduction to objects).
Objective: Чтобы получить некоторую практику использования объектов и объектно-ориентированных методов в реальном мире.

Давайте подбросим несколько мячей

В этой статье мы напишем классическую демонстрацию «прыгающих шаров», чтобы показать вам, насколько полезными могут быть объекты в 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. Чтобы создать новый экземпляр шара, введите следующее:
    var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
  4. Попробуйте позвонить своим членам:
    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. Во-первых, нам нужно где-то хранить все наши яйца. Следующий массив выполнит это задание - добавьте его внизу кода:
    var balls = [];

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

  2. Добавьте ниже нижнюю часть кода:
    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. И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию.
    loop();

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

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

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

  1. Прежде всего, добавьте следующее определение метода ниже, где вы определили метод update() (т.е. блок Ball.prototype.update).
    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(); линия:
    balls[i].collisionDetect();
  3. Сохраните и обновите демо снова, и вы увидите, как ваши мячи меняют цвет, когда они сталкиваются!

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

Резюме

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

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

Смотрите также

 

In this module

 

Метки документа и участники

Внесли вклад в эту страницу: slychai85
Обновлялась последний раз: slychai85,