Вот тут уже можно посмотреть сайт, хотя смотреть особо нечего

Играть

Играть в первую часть

Страничка второй части в Steam

Играть

Играть

Сайт игры

Страничка игры в Steam

Исходный код на GitHub

Играть

Играть

Исходный код на GitHub

Играть

Исходный код на GitHub

Играть

Исходный код на Github

Играть

Исходный код на GitHub

⚠ Эту статью также можно прочитать на Хабре

Гитхаб с моим Понгом: https://github.com/Buninman/Pong

Кстати, оригинальная игра 1972 года называется Pong, а пинг-понг. Хотя идеей-прародительницей для нее действительно был настольный теннис.

Что примечательно, Понг была первой коммерчески успешной видеоигрой.

Тут можно поиграть в готовый Понг

setting.js

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

export default class Setting {
  constructor() {
    // Высота и ширина игрового поля, и всех слоев канваса
    this.boxWidth = 800
    this.boxHeight = 500
    // Радиус закругления углов игрового поля
    this.boxRound = 20
    // Серый цвет заливки игрового поля
    this.boxColor = '#333333'
    // Толщина линий
    this.lineWidth = 6
    // Цвет линий. Темно-серый, как основной фон окна брузера в CSS
    this.lineColor = '#232323'
    // Светло-серый цвет, используется для текста таймера и бегунка
    this.textColor = '#EBEBEB'
    // Вспомогательные красный и желтый цвета,
    // используются для подсветки технических нюансов
    this.supportColorRed = '#FA0556'
    this.supportColorYellow = '#FAC405'

Далее идут все параметры мячика. В отдельный объект вынесены те параметры, которые изменяются в процессе игры.

    // Скорость мячика
    this.ballSpeed = 7
    // Радиус мячка, диаметр получается 16px
    this.ballRadius = 8
    // Координаты мячика по умолчанию,
    // равны половине длины и ширины поля, это центр
    this.ballXDefault = (this.boxWidth / 2)
    this.ballYDefault = (this.boxHeight / 2)
    // Цвет мячика, я сделал таким же светло-серым как textColor
    this.ballColor = '#EBEBEB'
    // Счетчик отбитых мячей, также к нему привязано увеличение
    // скорости мячика. Увеличиваем скорость при каждом ударе
    this.ballHitScore = 0
    
    this.ball = {
      // Текущие координаты мячика, которые меняются в процессе
      // игры, изначально они равны дефолтным - мячик в центре поля
      x: this.ballXDefault,
      y: this.ballYDefault,
      // Ускорение мячика по осям. Изначально равно 0, но
      // позже получает рандомное значение от 0.8 до 1, с + или - 
      dx: 0,
      dy: 0,
      // Еще одно значение скорости, оно нужно, т.к. скорость мяча
      // постепено растет и переодически надо ее возвращать
      // к дефолтному this.ballSpeed
      speed: this.ballSpeed
    }

Дальше идут параметры обоих игроков. В отдельные объекты вынесены параметры уникальные для каждого игрока. Мы будем передавать эти отдельные объекты при создании экземпляра класса Player

    // Радиус игрока. Правильнее было бы назвать толщиной, т.к.
    // игрок это векторная линия. Но в расчетах столкновений, 
    // я использую крайние точки как окружности, поэтому это радиус.
    // Реальная толщина игрока - это два его радиуса, 14px.
    this.playerRadius = 7        
    // Высота игрока. Растояние от верхней до нижней точки игрока.
    // Но т.к. платформы игроков имеют закругления, реальный размер
    // получается на два радиуса больше, 94px
    this.playerHeight = 80
    // Скорость игрока. Используется как коэффициент для ускорения
    this.playerSpeed = 8
    // Пространство от краев игрока до стенки сверху и снизу
    this.playerBorder = this.playerRadius * 3
    // Пространство от центра платформы игрока до стенки за ним
    this.playerSpace = this.playerRadius * 6
    // Изначальная координата игрока Y равна половине высоты
    // игрового поля минус половина высоты игрока, таким образом
    // игрок будет распологаться посередине при любой заданной длине
    this.playerYDefault =
                   (this.boxHeight / 2) - (this.playerHeight / 2)
    this.playerL = {
      // Счетчик очков
      score: 0,
      // Координата Х для появления надписей "+1" на игровом поле.
      // Для левого игрока равна ширине поля минус 2 растояния
      // до игрока. Таким образом она находится на поле противника,
      // справа
      goalPointX: this.boxWidth - this.playerSpace * 2,
      // Параметр определяет выравнивание текста "+1".
      // Я также использую этот параметр для определения стороны
      // в которую полетит мяч после забития гола
      align: 'right',
      // Кординаты игрока. X равен заданному растоянию playerSpace,
      // а Y дефолтному значению, общему для обоих игроков
      x: this.playerSpace,
      y: this.playerYDefault,
      // Зарезервированная переменная со значением Y по умолчанию
      yDefault: (this.boxHeight / 2) - (this.playerHeight / 2),
      // Цвет игрока. Оранжевый
      color: '#A55F02',
      // Создаем массив с парами ключ-значение.
      // Номер клавиши и строка
      // с направлением. Узнать номер клавиш можно тут:
      // https://puzzleweb.ru/javascript/char_codes-key_codes.php
      keys: [[87,'up'], [83,'down']],  
    }
    this.playerR = {
      score: 0,
      goalPointX: this.playerSpace * 2,
      align: 'left',
      // Координата X для правого игрока равна всей ширине поля,
      // минус заданное растояние playerSpace
      x: this.boxWidth - (this.playerSpace),
      y: this.playerYDefault,
      // Цвет игрока. Голубой
      color: '#38887A',
      keys: [[38,'up'], [40,'down']],
    }
  }
}

canvas.js

Модуль можно использовать в других проектах, практически в неизменном виде, т.к. он содержит непосредственные функции рисования примитивов на 2D-канвасе, которые в свою очередь используются модулем printer.js.

Для начала рассмотрим конструктор класса Canvas:

export default class Canvas {
  constructor(setting) {
    // Передаем переменной set общие настройки
    this.set = setting
    // Создаем элемент canvas и переменную для доступа к нему
    this.canvas = document.createElement('canvas')
    // Создаем в канвасе 2d-контекст, нужен для рисования фигур
    this.ctx = this.canvas.getContext('2d')
    // Задаем канвасу высоту и ширину
    this.canvas.width = this.set.boxWidth
    this.canvas.height = this.set.boxHeight
    // Находим в html тег game (id="game") и как дочерний эллемент
    // создаем в нем наш canvas
    document.querySelector('#game').appendChild(this.canvas)
  }

Рисование текста. В него передается сам текст, координаты, размер текста, цвет, выравнивание и выравнивание по базовой линии (координате y)

  drawText(text, x, y, fontSize, color = this.set.textColor, 
                            align = "center", baseline = 'middle') {
    // Указываем цвет заливки
    this.ctx.fillStyle = color
    // Указываем шрифт и атрибуты
    this.ctx.font = `bold ${fontSize} 'Fira Mono', monospace`
    // Указываем выравнивание по краю
    this.ctx.textAlign = align
    // Указываем выравнивание по базовой линии
    this.ctx.textBaseline = baseline
    // Пишем текст, передаем туда строку с текстом
    // и ккординаты начальной точки
    this.ctx.fillText(text, x, y)
  }

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

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

  drawLine(xS, yS, xF, yF, lineWidth, color) {
    // Указываем, что линия будет с закруглениями на концах
    this.ctx.lineCap = 'round'
    // beginPath() начинает вектор
    this.ctx.beginPath() 
    // Аргументами указываем координаты начальной точки линии
    this.ctx.moveTo(xS, yS)
    // Аргументами  указываем координаты конечной точки линии
    this.ctx.lineTo(xF, yF)
    // Указываем толщину линии, ее мы также передаем аргументом
    this.ctx.lineWidth = lineWidth
    // Указываем цвет обводки
    this.ctx.strokeStyle = color
    // Рисуем обводку (линию)
    this.ctx.stroke()
    // Завершем создание вектора
    this.ctx.closePath()
  }
  
  drawRectangleRound(x, y, width, height, radius, color) {
    // beginPath() начинает вектор
    this.ctx.beginPath()
    // Указываем координаты начальной точки линии
    this.ctx.moveTo(x + radius, y)
    // Указываем координаты следующей точки линии
    this.ctx.lineTo(x + width - radius, y)
    // Указываем координаты точки, до куда будет идти закругление
    this.ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
    // Указываем координаты следующей точки линии и т.д
    this.ctx.lineTo(x + width, y + height - radius)
    this.ctx.quadraticCurveTo(x + width, y + height,
                                     x + width - radius, y + height)
    this.ctx.lineTo(x + radius, y + height)
    this.ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
    this.ctx.lineTo(x, y + radius)
    this.ctx.quadraticCurveTo(x, y, x + radius, y)
    // Завершем создание вектора
    this.ctx.closePath()
    // Указываем цвет заливки
    this.ctx.fillStyle = color
    // Создаем заливку
    this.ctx.fill()
  }
  
  drawCircle(x, y, radius, fillColor, stroke = true) {
    // beginPath() начинает вектор
    this.ctx.beginPath()
    // Создаем арку. Агругументами выступают координаты
    // центра окружности, радиус, начальный угол в радианах
    // и конечный угол в радианах.
    // Math.PI*2 это число Пи умноженное на 2, дает замкнутый круг
    this.ctx.arc(x, y, radius, 0, Math.PI * 2)
    // Указываем цвет заливки
    this.ctx.fillStyle = fillColor
    // Создаем заливку
    this.ctx.fill()
    // Если нам не нужна обводка, то аргументам мы передаем false,
    // а по умолчанию обводка есть
    if (stroke) {
      // Указываем толщину линии
      this.ctx.lineWidth = 6
      // Указываем цвет обводки
      this.ctx.strokeStyle = this.set.lineColor
      // Рисуем обводку
      this.ctx.stroke()
    }
    // Завершем создание вектора
    this.ctx.closePath()
  }

В основе рисования круга функцией drawCircle() используется метод arc() в котором используется значение угла в радианах. Про радианы на википедии есть понятная статья с картинкой, если интересно. ༼ つ ◕_◕ ༽つ

Функция drawArc(), также использует в основе своей метод arc(), но тут мы не замыкаем дугу, а оставляем ее небольшой кусочек. Можно было бы обойтись одной функцией, но нужно было бы передавать в нее больше аргументов. Поэтому для таймера я сделал отдельную функцию.

  drawArc(radius, sAngle, eAngle, color = this.set.textColor) {
    const centerW = (this.set.boxWidth / 2)
    const centerH = (this.set.boxHeight / 2)
    
    // lineCap определяет то что обводка будет закругляться на конце
    this.ctx.lineCap = 'round'
    this.ctx.beginPath()
    this.ctx.arc(centerW, centerH, radius, sAngle, eAngle)
    this.ctx.lineWidth = 6
    this.ctx.strokeStyle = color
    this.ctx.stroke()
    this.ctx.closePath()
  }

Функция отчищает канвас. Используется в метод clearRect(), который принимает начальные и конечные точки прямоугольника, который надо отчистить. В данном случае мы чистим канвас целиком.

  clear() {        
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
  }
}

printer.js

Модуль работает напрямую с функциями канваса. В нем создаются сразу несколько канвасов, которые выступают слоями и перерисовываются независимо друг от друга.

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

Для начала рассмотрим конструктор класса Printer:

// В файл подключаем класс Canvas
import Canvas from './canvas.js'

export default class Printer {
  // В принтер передаем только настройки
  constructor(setting) {    
    // Передаем общие настройки переменной set,
    this.set = setting
    // а переменной ball настройки мячика, для удобства
    this.ball = setting.ball
    // Создаем новый Map с пятью классами Canvas под разные нужды,
    // порядок будущих слоев влияет на их видимость, первый будет 
    // перекрывать вторым и т.д.
    this.canvas = new Map([
      // На слое background рисуется неподвижные и необновляемые
      // элементы игры. Игровое поле
      ['background', new Canvas(this.set)],
      // Слой для отрисовки счета игроков
      ['score', new Canvas(this.set)],
      // Слой для впомогательных функций, не нужен для игры
      ['support', new Canvas(this.set)],
      // Дополнительный слой для разных задач
      ['other', new Canvas(this.set)],
      // Слой для текста, появляющегося на экране
      ['text', new Canvas(this.set)],
      // Слой для игровых элементов с постоянной перерисовкой,
      // таких как мячик и игроки
      ['gamelayer', new Canvas(this.set)]
      ])
    // Для сокращения ширины кода, помещаю пути обращения
    // к Canvas в переменные, можно этого не делать
    this.bgCan = this.canvas.get('background')
    this.scoreCan = this.canvas.get('score')
    this.supCan = this.canvas.get('support')
    this.othCan = this.canvas.get('other')
    this.txtCan = this.canvas.get('text')
    this.gameCan = this.canvas.get('gamelayer')
    
    // Переменная ballDirectionAngle нужна передачи значения угла,
    // под которым требуется рисовать белый бегунок, отображающий    
    // направление броска мячика
    this.ballDirectionAngle = 0
  }

Функция ниже рисует игровое поле, это фон с закругленными краями и разные темные линии. Рисуется на специальном слое канваса - 'background'.

  drawBackground() {        
    // Высота и ширина игрового поля и всех слоев канваса
    const width = this.set.boxWidth        
    const height = this.set.boxHeight        
    // Радиус закругления углов игрового поля 
    const boxRound = this.set.boxRound        
    // Цвет заливки игрового поля         
    const boxColor = this.set.boxColor        
    // Толщина и цвет линий             
    const lineW = this.set.lineWidth        
    const lineColor = this.set.lineColor        
    // Пространство от центра платформы игрока до стенки за ним
    const plSpace = this.set.playerSpace        
    // Пространство от краев игрока до стенки сверху и снизу
    const plBorder = this.set.playerBorder        
    
    // Рисуем основной прямоугольник игрового поля с закруглениями
    this.bgCan.drawRectangleRound(0, 0, width, height,
                                               boxRound, boxColor)
    // Рисуем вертикальную линию посередине
    this.bgCan.drawLine((width / 2), 0, (width / 2),
                                           height, lineW, lineColor)
    // Рисуем круг посередине, с радиусом в 1/4 высоты поля
    this.bgCan.drawCircle((width / 2), (height / 2),
                                    (height / 4), boxColor)
    // Рисуем 2 линии под игроками с отступами от края
    this.bgCan.drawLine(plSpace, plBorder, plSpace,
                             (height - plBorder), lineW, lineColor)
    this.bgCan.drawLine((width - plSpace), plBorder,
          (width - plSpace), (height - plBorder), lineW, lineColor)
  }

Функция drawBriefing() рисует инструкцию с клавишами управления. Рисую ее на слое для игры 'game', т.к. при первоначальном отчете он не перерисовывается и мы можем им воспользоваться.

К моменту вызова drawBriefing() у нас уже будут нарисованы игроки с помощью функции drawPlayer(), о ней ниже.

  drawBriefing() {
    // Цвета левого и правого игроков
    const plLColor = this.set.playerL.color
    const plRColor = this.set.playerR.color
    // Координаты x и y для текста с инструкцией
    // Немного сложно, но все координаты отталкиваются от статичных
    // значений и масштабируются с игровым полем
    const controlXL = (this.set.playerSpace * 2)
    const controlXR = this.set.boxWidth - (this.set.playerSpace * 2)
    const controlY = (this.set.boxHeight / 17)
    
    // Рисуем текст инструкций. Для каждого игрока свой цвет.
    // Параметры 'left' и 'right' отвечаю за выравнивание текста
    this.gameCan.drawText('keys:', controlXL , (controlY * 8),
                                         '15px', plLColor, 'left')
    this.gameCan.drawText('W and S', controlXL, (controlY * 9),
                                         '20px', plLColor, 'left')
    this.gameCan.drawText('keys:', controlXR, (controlY * 8),
                                        '15px', plRColor, 'right')
    this.gameCan.drawText('Arrows', controlXR, (controlY * 9),
                                        '20px', plRColor, 'right')
  }

Функция drawScore() отвечает за визуальное отображение текущего счета на игровом поле. Рисуется на специальном слое 'score'.

  drawScore() {
    // Цвета левого и правого игроков
    const plLColor = this.set.playerL.color
    const plRColor = this.set.playerR.color
    // Значение количества очков каждого игрока
    const plLScore = this.set.playerL.score
    const plRScore = this.set.playerR.score
    // Координаты x и y для отбражения очков игроков
    // отталкиваются от статичных значений ширины и высоты поля
    const scoreXL = (this.set.boxWidth / 9 * 4)
    const scoreXR = (this.set.boxWidth / 9 * 5)
    const scoreY = (this.set.boxHeight / 20)
    
    // Рисуем текст счета. Для каждого игрока свой цвет.
    // Параметр 'left' рисует текст справа от точки координат,
    // а параметр 'right', наоборот, слева.
    // Таким образом цифры счета никогда не слипнутся (⊙_⊙)
    this.scoreCan.drawText(plLScore, scoreXL, scoreY, '40px',
                                         plLColor, 'right', 'top')
    this.scoreCan.drawText(plRScore, scoreXR, scoreY, '40px',
                                          plRColor, 'left', 'top')
  }

Функции ниже проверяют какое направление для мяча выбрано и запускают цикл рисования белой полосочки бегающей по кругу. Вызывается drawBallDirection() из модуля game.js, при старте каждого матча.

В основе рисования этого "белого бегунка" используется метод arc() в котором используется значение угла в радианах. Про радианы на википедии есть понятная статья с картинкой, если интересно. ༼ つ ◕_◕ ༽つ

  // В функцию передается переменная int, которая содержит
  // корректировщик коээфициента значения угла. Она может иметь
  // значение 2 для таймера после гола и 4 для начального таймера
  drawBallDirection(int = 2) {   
    // Ось координат канваса начинается сверху слева, поэтому
    // если направление мячика по X больше 0, то он летит вправо,
    // если направление мячика по Y больше 0, то он летит вниз     
    // следовательно здесь мячик летит по диагонали вправо вниз
    if (this.ball.dx > 0 && this.ball.dy > 0) {
      // Я подобрал необходимые коэффициенты для       
      // значений угла окружности, в котором бегунок 
      // должен будет остановиться
      
      // В зависимости от направления полета мячика
      // передаем нужное значение во внешнюю переменную
      this.ballDirectionAngle = 6.3
    }
    if (this.ball.dx < 0 && this.ball.dy > 0) {
        this.ballDirectionAngle = 6.8
    }        
    if (this.ball.dx < 0 && this.ball.dy < 0) {
        this.ballDirectionAngle = 7.3
    }
    if (this.ball.dx > 0 && this.ball.dy < 0) { 
        this.ballDirectionAngle = 7.8
    }
    // Запускаем цикл рисования белого бегунка,        
    // передаем в него значение угла минус значение переменной int.
    // Я нарочно увеличил значения углов на 2 оборота окружности,
    // чтоб при вычитании значения оставались положительными.
    // В противном случае появляются погрешности¯\_(ツ)_/¯
    this.loopBallDirection(this.ballDirectionAngle - int) 
  }
  
  // Функция представляет собой цикл, перерисовывающий бегунок,
  // пока он не достигнет нужного угла на окружности  
  loopBallDirection(someAngle) {    
    // Радиус окружности такой же, как радиус круга на игровом поле
    const rad = (this.set.boxHeight / 4)        
    // При первом вызове функции переменной angle присваивается   
    // значение угла, полученного из drawBallDirection(),
    // но в последствии оно берется из цикла
    let angle = someAngle        
    
    // Рисуем часть окружности через функцию канвасе      
    this.othCan.drawArc(rad, Math.PI * angle - 0.3, Math.PI * angle)
    // С помощью встроенной в JS функции setTimeout(),        
    // делаем задержку в 0.06 секунд, или '60' милисекунд        
    setTimeout(() => {
      angle += 0.1 
      if(angle <= this.ballDirectionAngle) {                
      this.clear('other')                
      this.loopBallDirection(angle)            
      }        
    }, 60)
  }

Первая функция ниже является посреднической, она используется для рисования текста по центру игрового поля, а две другие функции уже используют ее внутри себя для рисования различного текста на поле.

  // Функция рисует текст в центре экрана, по умолчанию использует    
  // белый цвет и '90px' размер шрифта, это счетчик стартового таймера
  centerText(text, fontSize = '90px', color = this.set.textColor) {
    // Координаты центра игрового поля
    const centerW = (this.set.boxWidth / 2)
    const centerH = (this.set.boxHeight / 2)
    
    this.txtCan.drawText(text, centerW, centerH, fontSize, color)
  }
  
  // Функция рисует счетчик ударов по цетру экрана.
  // Можно было обойтись одной фунцией centerText(), но так понятнее
  drawBallHit() {
    // Используем цвет линий, чтоб счетсчик не отвлекал внимание
    this.centerText(this.set.ballHitScore, '70px', this.set.lineColor)
  }
  
  // Функция вызывается из экземпляра Player и принимает координату Х,
  // цвет игрока и выравнивание
  drawGoal(x, color, align) {
    // рисуем "+1" на поле проигравшего. Цветом забившего игрока
    this.txtCan.drawText('+1', x, this.ball.y, '20px', color, align)
    // Рисуем надпись "Goal" в центре. Цветом забившего игрока  
    this.centerText('Goal!', '50px', color)
    // Через 0.8 сукунд отчищаем слой 'text'
    setTimeout(() => {
      this.clear('text') }, 800)
  }

Функции рисуют мячик и игрока. Мячик это круг, а игрок это линия с обводкой и закругленными краями.

  // Рисует мячик используя его текущее местоположение
  drawBall() {    
    let ballX = this.ball.x
    let ballY = this.ball.y
    let radius = this.set.ballRadius
    let color = this.set.ballColor
    
    this.gameCan.drawCircle(ballX, ballY, radius, color, false)
  } 
  
  // Рисуем игрока используя его текущее местоположение.
  // Принимает координату Х и две координаты Y, верхнюю и нижнюю.
  // Рисует между ними линию. Также принимает толщину линии
  // и цвет игрока
  drawPlayer(xS, yS, yF, lineWidth, color) {
    this.gameCan.drawLine(xS, yS, xS, yF, lineWidth, color)
  }

Функция очистки канваса. Как аргумент принимает название слоя канваса который надо почистить и вызывает для него метод clear().

  // Функция отчищает нужный канвас    
  // Передаем в нее имя нужного слоя в виде 'строки' текста
  clear(canvas) {
    this.canvas.get(canvas).clear()    
  }

Функции ниже нужны только для проверки игровых механик, они делают видимыми внутренние механизмы игры, такие как "тень" игроков, желтая зона и возможные направления вылета мячика

  // Функция рисует фактический размер игрока.
  // В движении зона отбития платформы увеличивается
  drawShadowPlayer(xS, yS, yF) {    
    const color = this.set.supportColorYellow
    const plWidth = (this.set.playerRadius * 2)
  
    this.supCan.drawLine(xS, yS, xS, yF, plWidth, color)
  }
  
  // Если мячик находится в желтой зоне (перед игроком),
  // то он отскакивает от координаты X игрока. Тут мы подсвечиваем
  // эту желтую зону
  drawYellowZone(x, yS, yF) {    
    const color = this.set.supportColorYellow
    const center = (this.set.boxWidth / 2)

    this.supCan.drawLine(x, yS, center, yS, 1, color)
    this.supCan.drawLine(x, yF, center, yF, 1, color)
  }
  
  // Функция подсвечивает все направления вылета мяча,
  // нужны были для расчета угла остановки белого бегунка
  drawAngleZone() {    
    const color = this.set.supportColorRed
    const radius = (this.set.boxHeight / 4)
    
    this.supCan.drawArc(radius, Math.PI * 0.2, Math.PI * 0.3, color)
    this.supCan.drawArc(radius, Math.PI * 0.7, Math.PI * 0.8, color)
    this.supCan.drawArc(radius, Math.PI * 1.2, Math.PI * 1.3, color)
    this.supCan.drawArc(radius, Math.PI * 1.7, Math.PI * 1.8, color)
    }
  }

game.js

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

Для начала рассмотрим конструктор класса Game:

// В файл подключаем Настройки, Игрока, Мячик и Принтер
import Setting from './setting.js'
import Player from './player.js'
import Ball from './ball.js'
import Printer from './printer.js'

class Game {
  constructor() {        
    // Передаем переменной set общие настройки
    this.set = new Setting()
    // В Printer передаем настройки
    this.print = new Printer(this.set)
    // В Ball передаем весь класс Game
    this.ball = new Ball(this)
    // Создаем два класса Player и передаем туда весь класс Game, 
    // а также отдельно настройки каждого игрока
    this.playerL = new Player(this, this.set.playerL)
    this.playerR = new Player(this, this.set.playerR)
    // Переменная "requestId" служит для запуска и остановки анимации.
    // Меняя значение на false, мы сможем останавливать анимацию
    this.reqId = true        
    // Инициируем первый запуск игры
    this.firstLaunch()
  }

Функция firstLaunch() отвечает только за первый запуск и срабатывает один раз при запуске. Функции которые она вызывает внутри себя будут подробнее расписаны внутри своих классов.

  firstLaunch() { 
    // Рисуем игровое поле
    this.print.drawBackground()
    // Вспомогательные функции. Вызвав ее здесь, мы увидим
    // 4 возможных направления для полета мячика
    this.support()
    // Рисуем игроков
    this.playerL.draw()
    this.playerR.draw()
    // Рисуем цифры счета, они пока равны 0   
    this.print.drawScore()
    // Функция drawBriefing() рисует инструкцию по управлению  
    this.print.drawBriefing()
    // dropBall() выбирает рандомное направление для мячика 
    this.ball.dropBall()
    // drawBallDirection(4) проверяет какое направление для мяча 
    // выбрано и запускает цикл рисования белой полосочки, 
    // бегающей по кругу
    this.print.drawBallDirection(4)
    // Рисуем цифру 3. Передаем значение в метод класса Print
    this.print.centerText('3')

    setTimeout(() => {
      // Отчищаем слой с цифрой 3 и рисуем цифру 2
      // с помощью встроенной в JS функции setTimeout(),
      // делаем задержку выполнений блока {} кода в 0.8 секунд, 
      // или '800' милисекунд
      this.print.clear('text'),
      this.print.centerText('2') }, 800)
    setTimeout(() => {
      // Каждое следующее действие происходит еще на '800' милисекунд
      // позднее предыдущего 
      this.print.clear('text'),
      this.print.centerText('1') }, 1600)
    setTimeout(() => {
      // Стираем цифру и пишем "Go"
      this.print.clear('text'),
      this.print.centerText('Go')}, 2400)
    setTimeout(() => {
      // На последней функции отчищаем слои и запускаем игру.
      // В функцию start() передаем переменную this.reqId, 
      // значение которой изначально стоит true
      this.print.clear('text'),
      this.print.clear('other')
      this.start(this.reqId) }, 3200)
    }

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

  // Функция запускает анимацию, при условии что переданная
  // переменная равна true  
  start(reqId) {
    if (reqId) {
      // Если reqId = true, то метод requestAnimationFrame()
      // вызвает указанную функцию для обновления данных перед
      // следующим перерисовыванием 
      this.reqId = requestAnimationFrame((t) => this.timeLoop(t))
    }
  }
  
  timeLoop(t) { 
    // Отчищаем игровой слой, это нужно чтоб игроки и мяч
    // не оставляли за собой след из предыдущих отрисовок
    this.print.clear('gamelayer')
    // Функции обновления мячика и игроков, они, в свою очередь, 
    // вызывают все нужные функции внутри своих классов
    this.ball.update()
    this.playerL.update()
    this.playerR.update()
    // Вспомогательные функции. Вызвав ее здесь, мы увидим
    // границы желтых зон, от которых зависит направление
    // в котором отбивается мячик от платформы
    this.support()
    // Снова вызываем start() вызывая зацикленность анимации.
    // В качестве значения передаем requestId, он содержит
    // метод requestAnimationFrame() и выдаст true
    this.start(this.reqId)
  }

Функция reStart() отвечает за остановку анимации и перезапуск матча. Ее задачи частично схожи с функцией firstLaunch().

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

  reStart(align) {
    // присваиваем reqId значение false, это останавливает анимацию
    this.reqId = false        

    // Делаем задержку в 0.8 секунд, и выполняем следующее:    
    setTimeout(() => {        
      // Отчищаем игровой слой
      this.print.clear('gamelayer')
      // Возвращаем игрокам и мячику значения позиций по умолчанию
      this.playerL.defaultSet()            
      this.playerR.defaultSet()            
      this.ball.defaultSet()            
      // Снова рисуем игроков и мячик, уже в стартовых позициях   
      this.playerL.draw()
      this.playerR.draw()
      this.ball.draw()
      // Вспомогательные функции. Вызвав ее здесь, мы увидим
      // 4 возможных направления для полета мячика   
      this.support()            
      // dropBall() выбирает рандомное направление для мячика 
      // Значение align укажет направление броска в забившего
      // предыдущий гол. Рандомость будет заключатся только в 
      // напрвлении вверх или вниз
      this.ball.dropBall(align)            
      // Функция запускает белый бегунок по направлению,
      // определенному выше в dropBall()
      this.print.drawBallDirection()            
    }, 800)
    
    // Следующие действия произойдут уже через 1.6 секунды
    setTimeout(() => {
      // Отчищаем слой other, это удалит белый бегунок с экрана
      this.print.clear('other')
      // Снова присваиваем reqId значение true
      // и перезапускаем игровой цикл
      // Эти действия произойдут уже через 1.6 секунды,
      // после предыдущего setTimeout()
      this.reqId = true
      this.start(this.reqId)
    }, 2400)
  }

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

Подробнее о желтой зоне в модуле Player

  // Функция вызывается в firstLaunch(), timeLoop() и reStart() 
  // и запускает отрисовку всех вспомогательных функций
  support() {
    // Отчищает свой слой канваса
    this.print.clear('support')
    // Рисует желтые зоны игроков
    this.playerL.support()
    this.playerR.support()
    // Рисует 4 направления для мяча
    this.print.drawAngleZone()
  }
}

Функция ниже запускается первой, после загрузки index.html, создает класс Game и по факту запускает весь остальной JavaScript код

// Функция создает объект Game после того как все файлы
// будут подгружены браузером
window.onload = () => {
  const game = new Game()
}

ball.js

Модуль отвечает за мячик. За рандомность его направления, разворот, отрисовку и т.п.

export default class Ball {
  // При создании в Ball мы передали в него весь класс Game    
  constructor(Game) {  
    // Через game мы будем получать доступ в методу reStart()  
    this.game = Game
    // Передаем переменной set общие настройки
    this.set = Game.set
    // Для удобства, сразу выделим в отдельную переменную ball,
    // настройки мячика которые изменяюся по ходу игры
    this.ball = Game.set.ball
    // Переменная для доступа к модулю Printer
    this.print = Game.print
  }

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

Мячик двигается путем прибавления значения ускорения к его координатам. Например, чтобы сместить мячик вправо, мы можем прибавить 1 к координате x, а чтобы сместить его вниз, прибавить 1 к координате y (ось координат начинается в верхнем левом углу). Но таким образом, мячик будет лететь строго под 45°.

Чтоб этого не происходило есть функция getRandom(), она возвращает рандомное число в промежутке от 0.8 до 1. Получается, что мы прибавляем к координатам x и y разные значения и мячик никогда НЕ двигается строго под 45°. Этого практически не заметно, но такое поведение не дает мячику зацикливаться в одной траектории и делает игру более разнообразной.

Функция getRandomDirection() в случайном порядке присваивает отрицательное или положительное значение результату getRandom().

  getRandom() {
    // Метод Math.random() генерирует случайное положительное        
    // значение в диапазоне от 0 до <1,       
    // а формула Math.random() * (max - min) + min позволяет
    // получить рандомное число в нужном диапазоне от min до max  
    return Math.random() * (1 - 0.8) + 0.8        
  }
  
  getRandomDirection() {  
    // Math.random() генерирует случайное значение        
    // Math.round() округляет это значение до целого 0 или 1
    // Boolean() возвращает 0 как false, а 1 как true          
    if (Boolean(Math.round(Math.random()))) {        
      // Если Boolean() вернул true, возвращаем случайное число   
      // в нужном нам диапазоне функцией getRandom()        
      return this.getRandom()            
    // Если Boolean() вернул false, то возвращаем тоже самое,   
    // но со знаком "минус"
    } else { return -this.getRandom() }
  }

Следующие две функции отвечает за движение мячика.

Так, функция dropBall() выбирает изначальное направление для полета мячика. Чтоб он мог полететь из центра в любой из 4 углов поля.

Используя описанные выше функции, она генерирует рандомные значения и присваивает их переменным dx и dy, это значения ускорения для каждой из координат мячика.

А функция move() присваевает получившиеся значения dx и dy реальным координатам мячика. Ее мы будем вызывать на каждом кадре.

  // Функция принимаем значение align от игрока,
  // это дает нам понять какой игрок забил гол в прошлом матче
  dropBall(player) {        
    // С помощью getRandomDirection() мы генерируем        
    // рандомное ускорение с рандомным знаком + или -  
    this.ball.dx = this.getRandomDirection()  
    this.ball.dy = this.getRandomDirection()           
    // Так как мы не знаем какое значение нагенерировано,        
    // приминяем следующее:            
    switch (player) {
      // Если значение left, то подает левый игрок,
      // значит мячик должен лететь вправо.             
      case 'left':
        // Чтоб исключить возможность полета влево  
        // Используем метод Math.abs(), который возвращает
        // положительно значение.
        // Присваеваем dx точно положительное значение dx
        this.ball.dx = Math.abs(this.ball.dx)
        break  
      // Для полета влево мы также применяем Math.abs(),  
      // но после превращения значения в положительное,       
      // делаем его отрицательным с помощью - 
      case 'right':                
        this.ball.dx = -Math.abs(this.ball.dx)
        break        
    }        
    // Если значение player не было передано, т.е оно undefined, 
    // то ничего не меняется и все значения останутся
    // полностью случайны, такое случается на первом старте игры
  }
  
  // Двигает мяч в пространсте прибавляя сгенерированные ранее
  // значения к его координатам, умножая на коэффециент скорости
  // который мы задали в настройках мячика как speed
  move() {
    // Оператор += сначала складывает исходное значение (это х)
    // и расчетное значение (результат умножения),
    // а потом присваивает полученное значение переменной х
    this.ball.x += (this.ball.dx * this.ball.speed)
    this.ball.y += (this.ball.dy * this.ball.speed)
  }

Функция checkCollisionWithWalls() отвечает за просчет столкновений мячика со стенками игрового поля и, в случае столкновения мяча со стенкой за игроком, вызывает функцию goalProcess().

Ось координат в JavaScript начинается с верхнего левого угла, что показано на рисунке ниже. Следовательно верхняя и левая стенки будут иметь координаты 0, а правая и нижняя равны длине и ширине поля.

  checkCollisionWithWalls() {  
    // В данном случае ballX и ballY это координаты мяча в будующем,
    // которые будут на следующем кадре, но без учета скорости
    let ballX = (this.ball.x + this.ball.dx)   
    let ballY = (this.ball.y + this.ball.dy)    
    // Координата Х правой стены (ширина поля) минус размер 
    // радиуса мяча, чтоб при столкновении мяч не утопал в стену
    const rightWall = (this.set.boxWidth - this.set.ballRadius)
    // Координата Х левой стены (это 0) плюс размер радиуса мяча.
    // Просто отступ от края размером с половинку мячика   
    const leftWall = this.set.ballRadius
    // Координата Y верхней стены (также 0),
    // Просто берем радиус мячика    
    const TopWall = this.set.ballRadius    
    // Координата Y нижней стены (высота поля) минус радиус
    const BottomWall = (this.set.boxHeight - this.set.ballRadius)
    
      // Если координаты мячика стали больше координат правой стены,
      // то:
      if (ballX >= rightWall) {        
        // Меняем направление по оси Х с помощью функции reverseBall()
        this.ball.dx = this.reverseBall(this.ball.dx)
        // Вызываем функцию goalProcess() которая завершает матч
        this.goalProcess(this.set.playerL)
        }
      // Если координаты мячика стали меньше координат левой стены,
      // то:          
      if (ballX <= leftWall) {        
        this.ball.dx = this.reverseBall(this.ball.dx)
        this.goalProcess(this.set.playerR)
      }
      // Если мячик коснулся верхней или нижней стенки, то:  
      if (ballY >= BottomWall || ballY <= TopWall) {        
        // Разворачиваем мяч по оси Y  
        this.ball.dy = this.reverseBall(this.ball.dy)
      }
    }

Как следует из названия, функция reverseBall() разворачивает мячик по одной из оси координат. меняя значение его ускорения с отрицательного на положительное и наоборот.

  // В функцию передается значение ускорения dx или dy
  reverseBall(dir) {
    // Если значение ускорения положительное, то
    if (dir > 0) {
      // Возвращаем новое рандомное значение для ускорения
      // со знаком минус, т.е. отрицательное
      return -this.getRandom()
    // Если значение ускорения отрицательное, то
    } else {
      // Также возвращаем новое рандомное значение,
      // но уже положительное
      return this.getRandom()
    }
  }

Функция goalProcess() запускает процесс завершения матча после гола. Аргументом в нее передаются настройки игрока, который забил мяч.

  // Запускает процесс завершения матча после гола.
  // Сюда передается align игрока, который забил мяч
  goalProcess(winner) {
    winner.score++
    // Прибавляем к счету забившего +1 очко,
    // отчищаем старый счет со слоя 'score' и рисуем новый счет
    this.print.clear('score')
    this.print.drawScore()
    // Отчищаем слой 'text', чтоб удалить с центра поля
    // счетчик количества отбитий мяча в матче
    this.print.clear('text')
    // Обнуляем счетчик отбитий, чтоб в следующем матче
    // он пошел с нуля
    this.set.ballHitScore = 0
    // Вызываем функцию рисования Гола, она просто пишет
    // в центре надпись "Goal!" и рисует "+1" на поле соперника
    this.print.drawGoal(winner.goalPointX, winner.color, winner.align)
    // Вызываем метод reStart() класса Game, он остановит анимацию,
    // обнулит положение всех элементов и нарисует их заного
    this.game.reStart(winner.align)
  }

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

Она также прибавляет 1 к счетчику ударов мяча о платформу, так мы видим сколько раз игрокам удалось отбить мяч.

  // Увеличивает скорость мяча на 0.1    
  // и прибавляет 1 к счетчику ударов мяча о платформу.    
  // Отчищает слой 'text' и рисует заного  
  speedМagnifier() {  
    // Оператор += сначало прибавляет 0.1,        
    //а потом присваивает полученное значение    
    this.ball.speed += 0.1        
    // Оператор ++ прибавляет 1 к значению счетчика ударов
    this.set.ballHitScore++        
    // Отчищает слой 'text' и рисует новое значение счетчика
    // на игровом поле
    this.print.clear('text')
    this.print.drawBallHit()
  }

Далее идут довольно простые функции.

defaultSet() возвращает настройки мячика к дефолтным значениям, это требуется для перезапуска партии при забитии гола.

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

update() вызывает все функции, которые необходимо пересчитывать для отрисовки кадров, она вызывается в цикле анимации из класса Game.

  defaultSet() {
    // Ставит мячик на центр поля обнуляя координаты
    this.ball.x = this.set.ballXDefault
    this.ball.y = this.set.ballYDefault
    // Возвращает исходную скорость
    this.ball.speed = this.set.ballSpeed
  }
  
  // Функция отправляет запрос на отрисовку мячика.
  // Создана для удобства
  draw() {
    this.print.drawBall()    
  }
  
  // Функция вызывает функции проверки столкновений,
  // движения мячика и отрисовки. Создана для удобства,
  // вызывается из метода timeLoop() в классе Game
  update() {
    this.checkCollisionWithWalls()
    this.move()
    this.draw()
  }
}

player.js

Модуль отвечает за платформу игрока, ее положение и взаимодействие с мячиком. Класса Player создается два, и в каждый передаются свойства разных игроков, это делается в классе Game.

Для начала рассмотрим конструктор класса Player:

export default class Player {
  // В Player мы передали весь класс Game и отдельно свойства игрока
  constructor(Game, playerSet) {
    // Передаем переменной set общие настройки     
    this.set = Game.set
    // Для удобства, выделим в отдельную переменную ball
    // все изменяемые настройки мячика, а через classBall,
    // мы будем получать доступ к классу Ball и его методам
    this.ball = Game.set.ball
    this.classBall = Game.ball
    // Для доступа к модулю Printer
    this.print = Game.print
    // Переменной player присваиваем свойсва игрока переданные
    // в класс Player, уникальные для каждого экземпляра Player
    this.player = playerSet
    // Создаем новый Map (это коллекция ключ/значение) из keys.
    // В данном случаем ключ - это номер клавиши, 
    // а значение - это строка с направлением движения
    // Пример => keys: [[87,'up'], [83,'down']], 
    this.keyMap = new Map(playerSet.keys)
    // Создаем два слушателя событий. В них передаем событие
    // (нажатие или отжатие клавиши) и слушателя
    document.addEventListener('keydown',
                             (e) => this.keyController(e, true))
    document.addEventListener('keyup',
                             (e) => this.keyController(e, false))
    // Две переменные, которые нужны для виртуального
    // расширения платформ во время движения, чтоб был шанс
    // отбить мяч "в последний момент" ╰(*°▽°*)╯
    // то как это работает, покажет функция support()
    this.shadowUp = 0
    this.shadowDown = 0
    // Переменная служит индикатором нахождения мяча в желтой зоне.
    // Это зона перед платформой.
    // Желтую зону также покажет функция support()
    this.yellowZone = true
    // Переменная служит для запрета разворота мячика, чтоб он
    // не мог менять направления чаще чем каждые полсекунды
    // используется в функции checkCollisionWithBall()
    this.ballReversStatus = true
  }

Функции ниже занимаются движением игроков. keyController() отрабатывает нажатия с клавиатуры, а move() выполняет движения в зависимости от нажатых клавиш.

Нужно помнить, что ось координат в JavaScript начинается с верхнего левого угла, как показано на рисунке ниже. Следовательно верхняя и левая стенки будут иметь координаты 0, а правая и нижняя равны длине и ширине поля.

  keyController(e, state) {
    // Метод has() показывает существует ли элемент
    // с указанным значением в объекте
    // И если нажата клавиша, которая есть в keyMap,
    // то он выдает true
    if(this.keyMap.has(e.keyCode)) {
      // get() возвращает связанный с ключем элемент, он
      // вернет 'up' или 'down' в зависимости от нажатой клавиши.
      // Создаем переменную с именем результата метода get()
      // и присваиваем ей статус true или false
      this[this.keyMap.get(e.keyCode)] = state
    }
  }
  
  // Двигает платформу игрока, прибавляя 1 к его координатам,
  // умножая на коэффециент скорости
  move() {
    // Переменные созданы только для уменьшения ширины кода,
    // чтоб он влез в статью без горизонтальной прокрутки¯\_(ツ)_/¯
    const plHeight = this.set.playerHeight
    const plSpeed = this.set.playerSpeed
    const plBorder = this.set.playerBorder
    const boxHeight = this.set.boxHeight
    
    // Если this.up = true, т.е. клавиша 'вверх' нажата, то
    if (this.up) {
      // Бордер это растояние от задней стены, до центра игрока.
      // На такое же растояние платформы 'недоезжают' до краев поля.
      // Если растояние от Y игрока (это верхний край платформы)
      // больше чем бордер, то
      if (this.player.y > plBorder) {
        // Мы уменьшаем текущую координату Y на скорость 
        // платформы игрока из настроек (по умолчанию это 10).
        // Т.е. двигаем игрока вверх на 10 пикселей
        this.player.y -= plSpeed
      // Если платформа достигла ограничения или перескочила его
      // (это возможно т.к. платформы движуться по 8 пикселей), то  
      } else {
        // Мы возвращаем платформу в последнее возможное положение,
        // на растояние бордера от края поля
        this.player.y = plBorder  
      }
      // Если this.up = true, т.е. клавиша 'вверх' нажата, то
      // присваиваем переменной shadowUp двойное значение скорости
      // это 16 пикселей
      this.shadowUp = (plSpeed * 2)
    }
    // Если this.down = true, т.е. клавиша 'вниз' нажата, то
    else if (this.down) {
      // Т.к. игрок это верхняя точка платформы, надо прибавить
      // длину игрока, для получения координаты нижней его точки
      if ((this.player.y + plHeight + plBorder) < boxHeight) {
        // Мы увеличиваем текущую координату Y на скорость 
        // платформы игрока из настроек (по умолчанию это 10).
        // Т.е. двигаем игрока вниз на 10 пикселей
        this.player.y += plSpeed
      } else {
        // Возвращаем платформу в последнее возможное положение,
        // на растояние бордера от нижнего края поля
        this.player.y = (boxHeight - plHeight - plBorder)
      }
      // Если this.down = true, т.е. клавиша 'вниз' нажата, то
      // присваиваем переменной shadowDown двойное значение скорости
      // это 16 пикселей
      this.shadowDown = (plSpeed * 2)
    // Если клавиши не нажаты, возвращаем нашу "тень" в ноль  
    } else {
      this.shadowUp = 0
      this.shadowDown = 0
    }
  }

функция checkYellowZone() проверяет находится ли мячик в желтой зоне перед игроком и присваивает переменной yellowZone значения true или false в зависимости от результата проверки.

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

  checkYellowZone() {
    // Длина игрока, растояние от его верхней до нижней точки  
    const plHeight = this.set.playerHeight
    
    // Если Y мячика больше (мячик ниже) верхней точки игрока
    // и Y мячика меньше (мячик выше) нижней точки игрока
    if (this.ball.y > (this.player.y - this.shadowUp)
    && this.ball.y < (this.player.y + plHeight + this.shadowDown)) {
      // Значит мячик находится перед игроком, в желтой зоне
      this.yellowZone = true
    // Если нет, то не в желтой ¯\_(ツ)_/¯  
    } else {
      this.yellowZone = false
    }
  }  

Функция checkCollisionWithBall() отвечает за столкновение мяча с платформой. Она вычисляет разницу между координатами x и y объектов, а затем вычисляет их фактическое расстояние d. И если сумма радиусов объектов меньше, чем расстояние между ними, значит имело место столкновение этих объектов и можно производить нужные нам действия, с помощью функции hitBall().

Формулу расчета столкновений я взял из этой статьи на хабре.

  checkCollisionWithBall() {
    // Длина игрока, растояние от его верхней до нижней точки
    const plHeight = this.set.playerHeight
    // Вычисляем разницу между координатами X мячика и Y игрока
    let dx = this.ball.x - this.player.x
    // Разница между Y мячика и Y игрока (верхним краем игрока),
    // также учитываем тень, если она есть
    let dy = this.ball.y - (this.player.y - this.shadowUp)
    // Разница координаты Y мячика и нижнего края игрока,
    // с учетом его тени, если она есть
    let dyF =this.ball.y -(this.player.y + plHeight + this.shadowDown)
    // Сумма радиусов мячика и платформы
    let radSum = this.set.ballRadius + this.set.playerRadius
    // Растояние от центра мячика, до края платформы.
    // Math.sqrt() вычисляет квадратный корень, а
    // Math.pow() возводит значение dx в степень 2 (в квадрат)
    let dY = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2))
    // Растояние от центра мячика, до нижнего края платформы
    let dYF = Math.sqrt(Math.pow(dx, 2) + Math.pow(dyF, 2))
    // Убрал из расчета кординату Y, чтобы видеть столкновение
    // координат Х независимо от положения мячика по Y.
    // Это надо для расчета удара о плоскость платформы
    let dX = Math.sqrt(Math.pow(dx, 2))
    
    // Если растояние между центрами объектов меньше суммы их
    // радиусов (в данном случае это Х мячика и Х платформы), то
    if (dX <= radSum) {
      // Если мячик находится в желтой зоне
      // и он не менял направление последние полсекунды, то
      if (this.yellowZone && this.ballReversStatus) {
        // Вызываем функцию hitBall() для разворота мяча
        // и передаем в нее только значение dx, т.к в желой зоне
        // мячик отбивается от плоскости платформы только по оси Х
        this.hitBall(this.ball.dx)
      }
    }
    // Если ускорение мячика положительное, т.е. мячик летит вниз, то
    if (this.ball.dy > 0) {
      // Если есть столкновение с верхним краем платформы, то
      if (dY <= radSum) {
        // Если мячик не в желтой зоне, то
        if (!this.yellowZone) {
          // Вызываем функцию hitBall() для разворота мяча по обои
          // осям, мячик развернутся на 180°
          this.hitBall(this.ball.dx, this.ball.dy)
        }
      }
    }
    // Если ускорение мячика отрицательное, т.е. мячик летит вверх, то
    if (this.ball.dy < 0) {
      // Если есть столкновение с нижним краем платформы, то
      if (dYF <= radSum) {
        // Если мячик не в желтой зоне, то
        if (!this.yellowZone) {
          // Вызываем функцию hitBall() для разворота мяча по обои
          // осям, мячик также развернутся на 180°
          this.hitBall(this.ball.dx, this.ball.dy)
        }
      }
    }
  }
  
  // Аргументом мы передаем только dx или dx и dy мячика
  hitBall(dx, dy) {
    // Разворачиваем мячик по оси Х с помощью метода reverseBall().
    // Он всегда разворачивается по оси Х при ударе о платформу
    this.ball.dx = this.classBall.reverseBall(dx)
    
    // Если мы передали в функцию значение dy, то
    if (dy) {
      // Разворачиваем мячик по оси Y. Это удар о ребро платформы
      this.ball.dy = this.classBall.reverseBall(dy)
    }
    // Т.к. мячик отбит платформой, запускаем функцию,
    // которая увеличит его скорость
    this.classBall.speedМagnifier()
    // Запрещаем мячику разворачиваться
    this.ballReversStatus = false
    // А через 500 милисекунд разрешаем мячику разворачиваться.
    // Такое поведение нужно, чтоб он не мог застрять в платформе
    // постоянно разворачиваясь
    setTimeout(() => {
      this.ballReversStatus = true
    }, 500)
  }

Далее идут довольно простые функции.

defaultSet() возвращает положение игрока к дефолтному значению, это требуется для перезапуска партии при забитии гола.

draw() просто вызывает функцию рисования игрока. Можно было обойтись без нее, вызывая рисование напрямую из класса Printer везде где это необходимо, но так мне мой код нравится больше.

update() вызывает все функции, которые необходимо пересчитывать для отрисовки кадров, она вызывается в цикле анимации из класса Game.

  // Функция обнуляет положение игрока,
  // так как X в процессе игры не меняется, а вторая координата Y
  // вычисляется из первой, достаточно обнулить только Y
  defaultSet() {
    this.player.y = this.set.playerYDefault
  }
  
  draw() {
    // Кордината верхней точки игрока
    let x = this.player.x
    let yStart = this.player.y
    // Кордината нижней точки игрока
    let yFinish = (this.player.y + this.set.playerHeight)
    // Цвет и толщина игрока (2 радиуса)
    const plColor = this.player.color
    const plWidth = (this.set.playerRadius * 2)
    
    // Т.к. игрок это векторная линия с закругленными краями,
    // передаем в принтер кординаты верхней и нижней точки,
    // толщину линии (2 радиуса) и цвет
    this.print.drawPlayer(x, yStart, yFinish, plWidth, plColor)
  }
  
  // Функция вызывает функции проверки желтой зоны, столкновений,
  // движения игрока и отрисовки. Создана для удобства.
  // Вызывается из метода timeLoop() в классе Game
  update() {
    this.checkYellowZone()
    this.checkCollisionWithBall()
    this.move()
    this.draw()
  }

Функция support() занимается визуальной отрисовкой желтой зоны для проверки ее работы. Вызывается из класса Game.

  support() {
    const plHeight = this.set.playerHeight
    let x = this.player.x        
    let yS = this.player.y - this.shadowUp
    let yF = this.player.y + this.set.playerHeight + this.shadowDown
    
    this.print.drawShadowPlayer(x, yS, yF)
    if (this.yellowZone) {
      this.print.drawYellowZone(x, yS, yF)
    }
  }
}

index.html

В теге <body> прописан id="game" для создания канваса. Хотя можно было попробовать обойтись без него и посылать canvas прямо на тег <body>. Внутри тега находиться только скрипт.

<!DOCTYPE html>
<html lang="en">
<head>    
  <meta charset="UTF-8">    
  <title>Pong by Buninman.ru</title>    
  <meta name="description" content="Created by Buninman.ru">    
  <meta property="og:title" content="The best Pong game">    
  <meta property="og:image" content="img/pongOG.png">    
  <meta property="og:description" content="Created by Buninman.ru">  
    <meta http-equiv="expires" content="0">    
  <link rel="stylesheet" href="pong/style.css">    
  <link rel="apple-touch-icon" sizes="180x180" href="img/icon.png"> 
  <link rel="icon" type="image/png" sizes="32x32" href="img/fv32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="img/fv16.png">
</head>

<body id="game">    
  <script src="pong/game.js" type="module"></script>
</body>

</html>

style.css

В css минимальный набор стилей. Мы делаем весь <body> одним большим флекс-боксом во весь экран.

body {
  margin: 0px;    
  height: 100vh;    
  width: 100vw;    
  display: flex;    
  justify-content: center;    
  align-items: center;    
  background-color: #232323;    
}

#game canvas {  
  display: block;    
  position: absolute;
}

Мой Гитхаб с моей змейкой: https://github.com/Buninman/Snake

Основные изменения моей змейки:

• Поменял дизайн игрового поля, добавил вниз блок с подсказкой;
• Сделал счетчик рекорда, он запоминает наибольший накопленный результат;
• Добавил возможность менять скорость змейки клавишами PgUp, PgDwn;
• Теперь есть режим бога, в котором змейка не может себя съесть. Кнопка G;
• Убрал возможность змейке разворачиваться на 180º и кусать себя. Больше она не умирает от случайного нажатия.

Тут можно поиграть в готовую змейку

supportFunction.js

В модуле всего одна функция, подробнее о ней можно посмотреть в документации, она целиком оттуда.

export const getRandomInt = (min, max) =>
    Math.floor( Math.random() * (max - min) + min )
    
    // Math.random() возвращает псевдослучайное число
    // с плавающей запятой в диапазоне от 0 до менее 1
    // (включая 0, но не 1)
    
    // Math.floor() возвращает наибольшее целое число,
    // меньшее или равное заданному числу. Округляет

Эта функция возвращает случайное число между указанными значениями. Возвращаемое значение не меньше (и, возможно, равно) minи меньше (и не равно)max.

getRandomInt() вызывается в файле berry.js и имеет такой вид:

Для x: getRandomInt(0, this.canvas.element.width /
                       this.config.sizeCell) *
                       this.config.sizeCell
Для y: getRandomInt(0, this.canvas.element.height /
                       this.config.sizeCell) *
                       this.config.sizeCell

Соответственно на min передается 0, а на max передается:

Для x: ширинаПоля (688) / размерЯчейки (16) - это 43
Для y: высотаПоля (480) / размерЯчейки (16) - это 30

Таким образом, когда функция срабатывает, мы получаем число в диапазоне от 1 до 42 для x и от 1 до 49 для y.

config.js

Этот модуль претерпел самые большие изменения, вместо 8 строк кода, теперь тут 38.

Значения config.js используются в berry.js, snake.js и gameloop.js

export default class Config {
    constructor() {        
        this.speedBlock = document.querySelector('#speed')
        this.godModeColor = document.querySelector('.game-header')
        this.textBlock = document.querySelector('.keys-conf')
        // Ищем значения в HTML коде, по названиям классов и id
        // Тут мы ищем индикатор скорости, цвет плашки под ним
        // и блок текста с инструкцией
        
        this.step = 0
        this.maxStep = 6
        // step и maxStep нужны чтоб пропускать игровой цикл,
        // их использует функция в файле gameLoop.js.
        // Также maxStep регулирует скорость змейки,
        // чем выше значение тем реже перерисовывается змейка

        this.sizeCell = 16
        this.sizeBerry = this.sizeCell / 4
        // sizeCell это размер ячейки, а sizeBerry это размер ягодки
        
        this.godMode = false
        // Переменная отвечает за режим бога. Изначально он выключен

        this.colorLight = '#A55E00'        
        this.colorDark = '#5E3908'
        // Переменные с цветами змейки. Есть темный оттенок
        // и светлый, для головы змейки
        
        this.drawSpeed()
        // Метод отрисовывает значение скорости
    }
    
    speedLevel() {        
        return 10 - this.maxStep
        // Чтоб значения скорости были понятнее я сделал
        // функцию которая меняет порядок чисел, теперь 1
        // это самая медленная скорость, а 8 - самая быстрая
    }
    
    drawSpeed() {        
        this.speedBlock.innerHTML = this.speedLevel()
        // innerHTML обращается к значению в HTML
        // и меняет на текущую скорость змейки
    }
    
    drawGodMode() {        
        if (this.godMode) {  
        // Если режим бога сейчас true то: 
                
            this.colorLight = '#FA0556'
            this.colorDark = '#A00034'
            // Меняем цвета в переменных на красные.
            // Они также подхватываются змейкой
            
            this.textBlock.innerHTML = 'God Mode: ON'
            // Вместо инструкции пишем о включенном режиме
            
            this.godModeColor.style.backgroundColor = this.colorDark
            // style.backgroundColor получает значение цвета
            // параметра background в css-файле.
            // Тут мы меняем цвет плашки под счетом
            
        } else {
        // Если режим бога сейчас false:
        
            this.colorLight = '#A55E00'
            this.colorDark = '#5E3908'
            // Меняем цвета в переменных на оранжевые
            
            this.textBlock.innerHTML
                 ='Use the Arrows and PageUp/PageDown'
            // Пишем стандартную инструкцию внизу поля
            
            this.godModeColor.style.backgroundColor = this.colorDark
            // Меняем цвет плашки
        }
    }
}

🙁Не смог сделать так, чтоб ягодка меняла цвет вместе со змейкой. Сделал ягодку белой.

Свойства step и maxStep используются в модуле gameLoop.js, внутри функции animate():

animate() {
    requestAnimationFrame(this.animate)
    // Вызывает повторно функцию animate()
    // так образуется непрерывный цикл
        
    if (++this.config.step < this.config.maxStep) {
        return
        // Если ++step меньше maxStep, то ничего не делать.
        // Таким образом, надо 6 раз вызвать функцию,
        // чтоб змейка сделала 1 шаг
    }  
              
    this.config.step = 0
    // После движения змейки, счетчик возвращается на 0
    
    this.update()
    this.draw()
}

++ увеличивает значение на единицу и возвращает значение.

Оператор ++ будет прибавлять 1 к step до тех пор, пока на шестом вызове функции она не пройдет дальше. После функция обнуляет значение step.

score.js

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

Значение score.js используются в game.js

export default class Score {
    constructor(scoreBlock, recordBlock, score = 0) {
        this.scoreBlock = document.querySelector(scoreBlock)
        this.recordBlock = document.querySelector(recordBlock)
        // Ищем значения в HTML коде, по id. Тут мы ищем
        // счетчики очков и рекорда        
        this.score = score
        // Создает свойство со значением очков
        this.draw()
        // Вызывает метод объекта draw() при создании экземпляра
    }
    
    incScore() {
        this.score++
        // Добавляет 1 к счету за съеденную ягодку
        this.draw()
        // Запускает метод draw() который поменяет значение счетчика
    }

    setToZero() {
        this.score = 0
        // Обнуляет счетчик очков. Это нужно в случае сметри
        this.draw()
        // Запускает метод draw()
    }
    
    drawRecord() {
        if (this.score > this.record) {
        // Если значение очков больше чем текущий рекорд, то
            this.record = this.score
            // Меняем значение рекорда на текущее значение очков
            this.recordBlock.innerHTML = this.record
            // Меняем значение рекорда в HTML
        }    
    }
    
    draw() {        
        this.scoreBlock.innerHTML = this.score
        // innerHTML обращается к значению в HTML
        // и меняет значение счета в HTML
    }
}

canvas.js

Модуль отвечает за создание и размеры игрового поля. Я менял только размер игрового поля.

Значение canvas.js используются в game.js

export default class Canvas {
    constructor(container) {
        this.element = document.createElement('canvas')
        // .createElement создает HTML-элемент <canvas> в HTML-файле

        this.context = this.element.getContext('2d')
        // .getContext('2d') указывает JS что мы хотим рисовать в 2д.
        // Нам становится доступен набор свойст и методов
        // таких как beginPath(), которым нарисована ягодка
        
        this.element.width = 688
        this.element.height = 800
        // Это высота и ширина 2д контекста, т.к. одна ячейка
        // у нас 16рх, то значения должны быть кратны 16рх
        
        container.appendChild(this.element)
        // Как я понял, .appendChild создает дочерний элемент.
        // Он помещает наш созданный 2д контекст (игровое поле)
        // в <canvas> внутри HTML-файла
    }
}

berry.js

Модуль отвечает за все что происходит с ягодкой.

Значение berry.js используются в game.js

import Config from './config.js'
import {getRandomInt} from './supportFunction.js'

export default class Berry {
    constructor(canvas) {
        this.x = 0
        this.y = 0
        // Это координаты ягодки        
        this.canvas = canvas
        // в Berry передаются параметры игрового поля,
        // нам нужны оттуда только высота и ширина
        this.config = new Config()
        // Передаем данные с Config, нам оттуда нужны размеры ячейки
        // и размер ягодки
        this.randomPosition()
        // Запускаем функцию получения рандомных кординат для ягодки
    }  
    
    draw(context) {
    // Функция рисования ягодки. Сюда передается наш 2д контекст
    // из класса Canvas
    
        context.beginPath()
        // Создает новый векторый контур. Начинаем рисование
        
        context.fillStyle = '#EBEBEB'
        // Заливка этого контура белым цветом. Если поменять ее
        // на динамичную переменную this.config.colorLight, то
        // цвет ягодки все равно не будет меняться
        // Я не понимаю почему🙁
        
        context.arc(this.x + (this.config.sizeCell / 2),
        // arc() создает векторную дугу. Замкнутая дуга это круг
        // В arc() нужно передать координаты x и y,
        // радиус, начальный угол и конечный угол
                    // Берем рандомную координату x, прибавляем
                    // к ней половину размера ячейки.
                    
                    this.y + (this.config.sizeCell / 2),
                    // Тоже самое для координаты y,
                    // Это дает нам положение центра ячейки
                    // Центр нашей ягодки
                    
                    this.config.sizeBerry, 0, 2 * Math.PI)
                    // Берем размер ягодки из Config, это радиус
                    // 0 - это начальный угол
                    // 2 * Math.PI - это конечный угол, такой
                    // параметр указан в учебнике по JS
                    
        context.fill()
        // Метод fill() создает заливку для нашей ягодки,
    }
    
    randomPosition() {
        this.x = getRandomInt(0, this.canvas.element.width / 
                                 this.config.sizeCell) * 
                                 this.config.sizeCell        
        this.y = getRandomInt(0, this.canvas.element.height / 
                                 this.config.sizeCell) *
                                 this.config.sizeCell
        // Функция получения рандомных координат, два раза
        // вызывает функцию генерации случайных чисел
        // и присваивает их x и y координатам
    }
}

Функция getRandomInt() расписана в модуле supportFunction.js

snake.js

Модуль за все что связано со змейкой. Я добавил функцию сохранение рекорда после смерти змейки, поменял параметры старта и изменил назначение клавиш.

Значение snake.js используются в game.js

import Config from './config.js'

export default class Snake {
    constructor() {
        this.config = new Config()
        // Передаем данные с Config, нам нужен размер ячейки
        this.x = 336
        this.y = 480
        // Начальные координаты змейки,
        // я сделал чтоб она появлялась внизу посередине
        this.dx = 0
        this.dy = -this.config.sizeCell
        // Начальное направление движения змейки,
        // по x - 0, а по y на -16рх, т.е. вверх.
        // Ось кординат начинается сверху слева
        // Ось y идет сверху вниз
        this.tails = []
        // Пустой массив для записи данных о хвосте змейки
        this.maxTails = 1
        // Параметр длины змейки. Я сделал по умолчанию 1,
        // т.е. только голова
        this.control()
        // Запускаем функцию отвечающую за упарвление змейкой        
    }
    
    update(berry, score, canvas) {
    // Функция обновления змейки. Сюда передаются данные ягодки,
    // счета и игрового поля
    
        this.x += this.dx
        this.y += this.dy
        // Прибавляем к координатам змейки размер движения.
        // Змейка перемещается путем прибавления или вычитания
        // размера ячейки от следующих координат положения головы
        
        if (this.x < 0) {
        // Если координата x меньше 0 то
            this.x = canvas.element.width - this.config.sizeCell
            // Присваиваем ей значение ширины игрового поля
            // минус одну ячейку.
            // Т.е. если змейка доходит до края, то
            // она появится с другой стороны
            
        } else if (this.x >= canvas.element.width) {
        // то, при условии, что координата x больше или равна
        // ширине игрового поля
                   this.x = 0
                   // Кордината x = 0, начало поля.
                   // Т.е. если змейка доходит до края, то
                   // она появится с другой стороны
        }

        if (this.y < 0) {
            this.y = canvas.element.height - this.config.sizeCell
        } else if (this.y >= canvas.element.height) {
                   this.y = 0
        // Логика с вертикальной осью такая же, но в расчет берем
        // высоту поля, а не ширину
        }
        
        this.tails.unshift({ x: this.x, y: this.y})
        // Метод .unshift() добавляет элемент в начало массива
        // с хостом. Добавляем туда объект с координатами x и y.
        // Это секция хвоста
        
        if (this.tails.length > this.maxTails) {
        // Если длина массива с хвостом больше чем параметр длинны
        // хвоста, то 
            this.tails.pop()
            // Удаляем последний элемент массива
            // Метод .pop() удаляет элемент в конце массива
        }
        
        this.tails.forEach((el, index) => {
        // Метод .forEach() перебирает все элементы массива,
        // все элементы змейки, и применяет к ним функцию.
        // В функцию передаются все элементы массива и их индексы
        
            if (el.x === berry.x && el.y === berry.y) {
            // Если координаты x и y в какой-то из секций змейки
            // совпадают с координатами ягоды, то
                this.maxTails++
                // Добавляем 1 к параметру длины змейки
                score.incScore()
                // Вызываем метод incScore(). Это метод нашего
                // объекта Score, он прибавляем 1 единичку к счету
                berry.randomPosition()
                // Вызываем метод randomPosition(). Это метод нашего
                // объекта Berry, он переносит ягодку на новые
                // случайные координаты
            }

            for (let i = index + 1; i < this.tails.length; i++) {
            // Цикл for запускает функцию пока условие верно.
            // Переменная i это индекс элементов массива, прибавляем
            // к ней 1, чтоб игнорировать элемент 0, это голова.
            // Цикл будет продолжаться пока i меньше длинны массива
            // Каждый цикл увеличиваем i на 1
            
                if ( el.x == this.tails[i].x &&
                     el.y == this.tails[i].y &&
                     !this.config.godMode) {
                // Если координаты x и y какого элемента равны
                // каким-то другим координатам из массива, кроме
                // головы, и если режим бога НЕ включен, то
                    this.death()
                    // Метод death() возвращает все параметры
                    // на начальные, перезапускает игру
                    score.drawRecord()
                    // Метод объекта Score, записывает наш счет
                    // в рекорд, если текущий рекорд меньше
                    score.setToZero()
                    // Обнуляет счетчик очков
                    berry.randomPosition()
                    // Вызываем метод randomPosition(). Это метод
                    // объекта Berry, он переносим ягодку на новые
                    // случайные координаты
                }            
            }        
        })    
    }
            
    draw(context) {
    // Функция рисования змейки. Сюда передается наш 2д контекст
    // из класса Canvas
    
        this.tails.forEach((el, index) => {
        // Метод .forEach() перебирает все элементы массива
            if (index == 0) {
            // Если индекс элемента массива равен 0,
                context.fillStyle = this.config.colorLight
                // то красим в яркий цвет. Это голова
            } else {
                context.fillStyle = this.config.colorDark
                // Иначе красим в темный цвет, это тело змейки
            }

            context.fillRect( el.x, el.y, this.config.sizeCell,
                                          this.config.sizeCell)
            // Метод fillRect() рисует прямоугольник по двум
            // координатам и двум величинам, это размер ячейки
        }) 
    }
        
    death() {
    // Метод death() возвращает все параметры
    // на начальные, перезапускает игру 
        this.x = 336
        this.y = 480
        // Ставит змейку на нужные координаты        
        this.dx = 0
        this.dy = -this.config.sizeCell
        // Выставляет напрвление движения 
        this.tails = []
        // Обнуляем массив хвостов
        this.maxTails = 1
        // Делает параметр колическва хвостов равным 1
    }
    
    control() {        
        document.addEventListener("keydown", e => {
        // Метод addEventListener() отслеживает события
        // Первый аргумен указывает на тип события - кнопка нажата.
        // Второй агрумент указывает на "слушателя", тот раздражитель
        // который должен это событие вызвать и ту функцию которое
        // это событие произведет. В нашем случае это будут кнопки
        // клавиатуры
        
            if (e.code == 'ArrowUp') {
            // Если код слушателя равен клавише "Стрелка вверх" то
            
                if (this.dx == 0 &&
                    this.dy == this.config.sizeCell) {
                    return
                    // Если сейчас прибавление координат идет по
                    // оси y, то ничего не делаем - return
                    // Эта проверка запрещает змейке начать
                    // двигаться в противоположную от текущей
                } else {
                    this.dx = 0
                    this.dy = -this.config.sizeCell
                    // Иначе начинаем отнимать координаты
                    // от текущего положения головы змейки
                    // по оси y. Это заставит змейку двигаться
                    // вверх от текущих координат y
                }
                
            } else if (e.code == 'ArrowLeft') {
                if (this.dx == this.config.sizeCell &&
                    this.dy == 0) {
                    return
                } else {
                    this.dx = -this.config.sizeCell
                    this.dy = 0
                    // Для движения влево все тоже самое,
                    // но начинаем отнимать размер ячейки от
                    // оси x, не трогая значение y
                }
            
            } else if (e.code == 'ArrowDown') {
                if (this.dx == 0 &&
                    this.dy == -this.config.sizeCell) {
                    return
                 } else {
                    this.dx = 0
                    this.dy = this.config.sizeCell
                }
            
            } else if (e.code == 'ArrowRight') {
                if (this.dx == -this.config.sizeCell &&
                    this.dy == 0) { 
                    return
                } else {
                    this.dx = this.config.sizeCell
                    this.dy = 0
                }
            
            }
            
            if (e.code == 'KeyG') {
            // Если код слушателя равен клавише "G", то
                if (this.config.godMode) {
                // Если параметр godMode равен true (включен)
                    this.config.godMode = false
                    // То выключаем его, делая false
                    this.config.drawGodMode()
                    // Запускаем функцию смены цветов и надписей
                    // Интерфейс и змейка становятся оранжевыми
                    
                } else {
                // Если параметр godMode равен false
                    this.config.godMode = true
                    // Включаем его, делая true
                    this.config.drawGodMode()
                    // Запускаем функцию смены цветов и надписей
                    // Интерфейс и змейка становятся красными
                }
            }        
        })    
    }
}

Занятные детали компьютерной логики:

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

• Догнав ягодку у нас один раз НЕ отваливается хвост, так как к maxTails прибавляет 1.
• Если выставить изначальное значение maxTails = 10, то можно заметить, что змейка НЕ появляется с хвостом длиной в 10 клеток, а просто 10 ходов у нее не укорачивается хвост.

• Скорость змейки определяется количеством пустых вызовов функции animate(), зависящей от параметра maxStep чем больше мы будем вызывать функцию бесполезно, тем медленнее будет бежать змейка

gameLoop.js

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

Значение gameLoop.js используются в game.js

import Config from './config.js'

export default class GameLoop {
    constructor(update, draw) {
    // В конструктор передаются методы из класса Game
        this.update = update
        // update() отвечает за изменения в игре
        this.draw = draw
        // а draw() за отрисовку на экране
        
        this.config = new Config()
        // Передаем данные Config
        
        this.animate = this.animate.bind(this)
        // animate будет содержать метод animate().
        // Чтоб сохранить значение this, используем
        // метод bind()
        
        this.animate()
        // Запускаем метод animate() она отвечает
        // за непрерывное обновление игрового поля
        this.control()
        // Запускаем метод control() он отвечает
        // за нажатие клавиш
    }
    
    animate() {
    // Функция отвечает за непрерывный цикл внесения изменений
    // в игру
    
        requestAnimationFrame(this.animate)
        // Вызывает повторно функцию animate()
        // так образуется непрерывный цикл
        
        if (++this.config.step < this.config.maxStep) {
            return
            // Если ++step меньше maxStep, то ничего не делать
            // таким образом, надо 6 раз вызвать функцию,
            // чтоб змейка сделала 1 шаг
        }  
              
        this.config.step = 0
        // После движения змейки, счетчик возвращается на 0
    
        this.update()
        // Вызывается функция update(), которая обновляет 
        // данные по змейке, ягодке и очкам
        this.draw()
        // Вызывается функция, которая запускает draw() у ягодки
        // и змейки, предварительно отчистив игровое поле
    }
    
    control() {
    // Функция отвечает за изменение скорости змейки.
    // Чем выше значение maxStep, тем медленнее ползает змейка,
    // я выбрал диапазон от 2 до 9
    
        document.addEventListener('keydown', e => {
        // Метод addEventListener() отслеживает события
        // также как в snake.js
        
            if (e.code == 'PageUp') {
                if (this.config.maxStep > 2) {
                // Если maxStep больше 2, то мы можем позволить
                // себе уменьшить его значение
                    this.config.maxStep--
                    // Отнимаем 1 от maxStep
                    this.config.drawSpeed()
                    // Рисуем новое значение скорости
                }
            } else if (e.code == 'PageDown') {
                if (this.config.maxStep < 9) {
                // Если maxStep меньше 9, то мы можем позволить
                // себе увеличить его значение
                    this.config.maxStep++
                    // Прибавляем 1 к maxStep
                    this.config.drawSpeed()
                    // Рисуем новое значение скорости
                }
            }        
        })    
    }    
}

game.js

import Canvas from './canvas.js'
import Snake from './snake.js'
import Berry from './berry.js'
import Score from './score.js'
import GameLoop from './gameLoop.js'

class Game {
    constructor(container) {
        this.canvas = new Canvas(container)
        // Создается объект игрового поля,
        // со значением ссылки на класс в HTML-файле
        
        this.snake = new Snake()
        // Создается объект змейки

        this.berry = new Berry(this.canvas)
        // Объект ягодки
        
        this.score = new Score('#score', '#record', 0)
        new GameLoop(this.update.bind(this), this.draw.bind(this))
        // Создается объект GameLoop в аргументах которого передаютя
        // container.update где container это значение в HTML-файле,
        // а update это метод объекта.
        // .bind(this) это метод, который передает методу update()
        // нужное значение this, опять же значение в HTML-файле
    }
    
    update() {
        this.snake.update(this.berry, this.score, this.canvas)
        // Вызываем медод объекта Snake, передавая в него данные
        // ягодки, счета и игрового поля
    }
    
    draw() {
    // Функция отвечает за отрисовку всего на игровом поле
        this.canvas.context.clearRect(0, 0,
            this.canvas.element.width,
            this.canvas.element.height)
        // Метод .clearRect() очищает прямоугольную область пикселей.
        // аргументы 0, 0, это начальные координаты, а ширина и высота
        // игрового поля размер отчищаемой области
        
        this.snake.draw(this.canvas.context)
        this.berry.draw(this.canvas.context)
        // Вызываем методы draw() у змейки и у ягодки, передавая
        // туда свойства и функции 2D-контекста из Канваса
    }
}

new Game(document.querySelector('.canvas-wrapper'))
// Это старт игры, создается объект Game.
// querySelector ищет значение в HTML.
// У нас это пустой <div> с классом .canvas-wrapper

snake.html

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">
    <title>My Snake</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="apple-touch-icon" sizes="180x180" 
          href="img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" 
          href="img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" 
          href="img/favicon-16x16.png">
</head>
<body>
    <div id="game">    
        <div class="game-header">
            
            <div class="game-score">                
                <span class="score-text">Speed:</span>
                <span class="score-count" id="speed" >0</span>
            </div>
            <div class="game-score">
                <span class="score-text">Score:</span>
                <span class="score-count" id="score" >0</span>
            </div>
            <div class="game-score">
                <span class="score-text">Record:</span>
                <span class="score-count" id="record" >0</span>
            </div>
            <!--
            Блоков game-score стало три, поэтому добавил
            уникальные id, по которым теперь ориенируется
            JavaScript вместо классов
            --->
        </div>        
        <div class="canvas-wrapper"></div>
        
        <div class="game-footer">            
            <div class="keys-conf">                
                <span>Use the WASD keys</span>            
            </div>        
        </div>
        <!--
        Новый блок game-footer отвечает за текст под игровым полем.
        Научил JS его менять в режиме бога
        --->
    </div>
    <script src="js/game.js" type="module"></script>
</body> 
</html>

style.css

body {
    margin: 0px;    
    font-family: sans-serif;
}
#game {
    background: #353336;    
    width: 100vw;    
    height: 100vh;
    display: flex;    
    flex-direction: column;    
    justify-content: center;    
    align-items: center;
}
#game-canvas {
    display: block;    
    border-radius: 5px; 
}
.game-header {    
    margin-bottom: 15px;    
    width: 708px;    
    height: 70px;    
    background: #5E3908;    
    display: flex;    
    align-items: center;    
    justify-content: space-between;    
    border-radius: 10px;
}
.game-score {
    padding: 10px 15px;    
    min-width: 160px;    
    height: 30px;    
    background: #121214;    
    border-radius: 5px;
    display: flex;    
    justify-content: center;    
    align-items: center;
}
.score-text {
    font-size: 2vmin;    
    color: #EBEBEB;
}
.score-count {
    font-size: 3vmin;
    padding-left: 6px;    
    color: #EBEBEB;    
    font-weight: bold;
}
.canvas-wrapper {
    background-color: #161618;    
    border-radius: 5px;    
    border: 10px solid #161618;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.2'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23525053'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.game-footer {
    padding-top: 1vmin;    
    padding-bottom: 1vmin;
    display: flex;    
    justify-content: space-between;
}
.keys-conf {  
    width: 708px;    
    height: 30px;    
    display: flex;    
    justify-content: center;    
    align-items: center;
    font-size: 2vmin;    
    color: #797979;    
    font-weight: regular;
}

Основные изменения коснулись .game-header и .game-score, добавились классы .game-footer и .keys-conf.

Уверен как-то можно заменить уродскую url с svg-картинкой на нарисованную через css, если кто знает, напишите.

Сайт автора курса: stashchuk.com

Самое важно в JavaScript это Выражение, Функции и Объекты

Практически все сущности в JS это объекты или ведут себя как объекты

Объект — это набор свойств "имя: значение" или "ключ: значение"

Выражения всегда возвращают значения

Переменные дают возможность повторного доступа к значениям

PascalCase - для типов и классы.

DB_USER - значения известны до запуска приложения и не меняются. Константы.

camelCase - для всех остальных переменных.

В JavaScript мы можем переопределять тип переменной сколько угодно раз так как JS это динамически типизируемый язык.

const - не позволяет менять значение переменной. Объявление и присваивание обязательно прописывается одной строкой.

let - для всех остальных переменных.

var - устаревший тип и использовать его больше не имеет смысла.

Объект — это набор свойств.

Свойство — это пара имя: значение.

Порядок свойств в объекте не имеет значения

С помощью оператора точка . мы получаем доступ к свойствам объектов.

Метод — это свойство объекта, значение которого - функция

Функция - это блок кода, который можно выполнять многократно

Внутри функции не рекомендуется мутировать внешние объекты.

Функция которая выполняет одну задачу не меняет внешних переменных называется чистой функцией (pure function).

Коллбэк — это функция, которая должна быть выполнена после того, как другая функция завершит работу.

Глобальная область видимости - это наш файл в целом.

Локальная область видимости - это область внутри блока { }, между фигурными скобками.

Ложные значения, это те значения, которые дают false при приведении их к логическому типу boolean.

Оператор — это встроенная в JS функция

После получения ошибки в JavaScript выполнение кода останавливается

В JavaScript существуют:

• Выражения. Они всегда возвращают значения.
• Инструкции. Они выполняют действия (например, объявление переменной).
• Выражения-инструкции. Выражения может быть инструкцией, но инструкция не может быть выражением (инструкций-выражений НЕТ)

Точки с запятой в JavaScript можно опускать

Инструкции нельзя использовать как аргументы в функциях

Массив — это объект с цифровыми именами свойств: 0, 1, 2, 3 и т.п.

Свойства в массиве начинаются с нуля: [0: 'one', 1: 'two', 2: 'three']

Обновлять значения поля length вручную не рекомендуется

Методы push(), pop(), unshift() и shift() мутируют изначальный массив!

Инструкции if и if else выполняются однократно

Конструкция с тернарным оператором является выражением

Циклы — это инструкции, они не возвращают значение, а только совершают действие

Метод forEach вызывается столько раз, сколько элементов в массиве

Цикл while выполняет инструкцию пока условие правдиво (true)

Цикл do while, в отличии от цикла while всегда выполняется хотя бы 1 раз, т.к. инструкция выполняется до просмотра условия

Если условие изначально ложно (false), то условие НЕ выполнится ни разу

Если условие будет бесконечно правдиво (true), то цикл будет выполнятся бесконечно

Блок инструкций for in выполняется для каждого свойства объекта или элемента массива

Для массивов рекомендуется применять метод forEach()

Цикл for in повторяется столько раз, сколько свойств в объекте или элементов в массиве

Для массивов рекомендуется применять метод forEach()

for of для объектов НЕ подходит, т.к. объекты это НЕ итерируемые элементы

Модули должны быть одноцелевыми

Все экспортируемые переменные рекомендуется всегда писать в самом конце файла, а импортируемые в самом начале

При импорте переменной, экспортируемой с помощью export default, можно указать ей любое новое имя

При импорте нескольких переменных с помощью export, нужно указывать те же самые имена переменных, что были при экспорте.

Классы позволяют создавать прототипы для объектов

На основании прототипов создаются экземпляры

Экземпляры наследуют свойства и методы прототипов

Наследование происходит по цепочке:

• Глобальный класс Object содержит методы доступные всем объектам в JavaScript.
• Созданный нами класс Comment содержит созданные нами методы и наследует все методы глобального класса Object.
• Экземпляр класса firstComment наследует все методы обоих родительских классов Comment и Object.

Наследование происходит по цепочке:

myArray => NumbersArray => Array => Object

Промисы позволяют обрабатывать отложенные во времени события

Промис может вернуть ошибку, если результат предоставить невозможно

Промис - это объект, глобальный класс в JS.

jsonplaceholder.typicode.com

ASYNC/AWAIT - Специальный синтаксис для упрощения работы с промисами

Асинхронная функция - это функция которая всегда возвращает промис

// Первая часть
const getData = (url) => 
  new Promise((resolve, reject) => 
    fetch(url)
      .then(response => response.json())
      .then(json => resolve(json))
      .catch(error => reject(error))
  )

// Вторая часть
getData('https://jsonplaceholder.typicode.com/todos')
  .then(data => console.log(data))
  .catch(error => console.log(error.massage))

Если на каком этапе асинхронной функции возникнет ошибка промис будет автоматически отклонен

Ключевое слово await можно использовать в JS только внутри асинхронных функций, но браузеры позволяют обрабатывать такой код в консоли

ASYNC/AWAIT - это синтаксическая надстройка над промисами

await синтаксис возможен только внутри async функций

async функция всегда возвращает Promise

async функция ожидает результата инструкции await и не выполняет последующие инструкции