Алексей Бунин

Прогресс обучения_Февраль 2023

2023-02-10T14:33:11.236Z

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

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

Курс Three.js Journey

Это курс по созданию 3д в браузерах. За время своего отсутствия я успел пройти где-то треть курса. Курс этот очень объемный, около 70 часов видеолекций, так что треть это довольно дофига.

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

А пока, вот например работа с текстурами. Текстуры в Three.js такие же как и везде. Поддерживаются и карты нормалей и прозрачность и отражения и тени. Все что нужно.

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

Но для создания такого сайта у меня тогда не хватало навыков. Как минимум логотип проще вставить 3д моделью, а не пытаться писать его 3д-текстом.

Тут мы создавали целую сцену с анимацией движения света (типа призраки). Никаких 3д моделей не подгружали, все сделано силами JavaScript.

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

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

А вот это уже импортированная 3д модель с полным набором текстур, динамическим освещением, HDRI-картой и рендер движком.

Курсы по Blender

После урока со шлемом, я углубился в изучение 3д. Я начал, один за другим, проходить курсы по 3д от школы Кайно. На данный момент я прохожу уже 3й курс, и каждый следующий сложнее предыдущего.

Первым я прошел бесплатный курс с каретой, его легко можно найти на Ютубе. Если оборачиваться назад, то курс довольно простой и поверхностный, но на тот момент я ничего не знал про работу в Блендере и курс оказался кстати!

Я доделал его 10 января,а потом практически полностью пересобрал 27-го, чтоб добавить деталей и оптимизировать модель для выгрузки в веб

Затем реклама мне предложила пройти марафон и я согласился. После кареты, это уже было лишнее, марафон совсем для новичков.

Тем не менее я его прошел, а чтобы было интереснее, я делал полностью свою 3д модель, оставив только основную идею - домик в лесу.

Я доделал его 15 января

Следующим был курс с названием "2.0", прошел его залпом за 2.5 дня. На нем делается высокополигональная модель самолета и есть простая работа с текстурами.

Прошел его просто потому, что в более старшем курсе есть отсылки на этот курс. Авторы рассчитывают что ты будешь проходить их один за другим. В противном случае я бы его пропустил. Толку в нем не много.

Я доделал его 20 января

Сейчас прохожу курс "Геймдев", большой и комплексный курс. Сначала создается низкополигональная модель (лоуполи), потом высокополигональная модель (хайполи), потом запекание, текстуры и тп.

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

Сейчас у меня уже полностью готова 3д-модель и я на этапе изучения программы Substance Painter, в которой будет проходить текстурирование робота и запекание текстур.

Лоуполи модель я доделал 30 января, а хайполи 2 февряля

Дальше

После завершения курса с роботом я вернусь к изучению курса Three.js Journey, и буду параллельно делать сайт, в центре которого будет карета из первого курса.

Я уже доработал 3д модель этой кареты для импорта в веб, даже выложил "набросок" будущего сайта в сеть, но мне не хватает знаний о текстурировании и запекании текстур.

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

В целом, это все, вроде получилась интересная история, с картинками. Возможно, буду продолжать подбивать итоги недели/месяца в подобные статьи.

А короткие посты я делаю в группе ВК или Телеграме.

#threejs

#blender

#kaino

#substance

#курс

#обучение

Игры на JavaScript

2022-12-03T05:59:55.444Z

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

Это не обязательно должны быть игры на JS, просто не сильно нагруженные механиками игры, которые вполне возможно повторить.

Keep Out!

Начну с игры, на которую я наткнулся первой. Я тогда только начинал знакомится с программированием и библиотекой three.js, и игрушка произвела на меня сильное впечатление.

Если разобраться, сама по себе она довольно простая, ходишь по небольшому лабиринту и бьешь разных мобов. Но сделана самобытно и в нее интересно поиграть. Проблема тут только в управлении - мне было сложно привыкнуть к резким поворотам на 90°😁

Играть

Gorescript

Шутер от первого лица для любителей Doom или Duke Nukem 3D, я больше люблю Дюка.

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

Я поиграл только в первую версию игры. которая называется Gorescript Classic, но есть еще новая версия, которая продается в Steam за недорого.

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

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

Heraclos

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

Игра представляет собой небольшое одноразовое приключение. Кое-где сделана с огрехами, но сыграть все равно интересно и сделана она с юмором.

Играть

InterLand

Игрушка от гугла. Тут 4 разных аркады которые рассказывают о том как пользоваться интернетом и сервисами гугла, конечно.

Играть в нее не интересно, но сделана хорошо и есть чему поучиться. За это она и попала в эту подборку.

Играть

Screeps

Очень неоднозначное творение. Представляет из себя стратегию где все управление осуществляется написанием кода. Чтоб хоть что-то в ней сделать нужно хоть немного знать JavaScript.

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

Поиграть в тренировочный демо-режим можно бесплатно на сайте.

Сайт игры

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

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

Epic SkidMarks

Кольцевые гоночки. Навевают воспоминаниями о близардских Rock & Roll Racing, которые я очень любил. Тут нет оружия, но зато можно легко подключиться с друзьями к любому серверу и погонять немножко.

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

Играть

HexGL

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

Управление простое и понятное, но не врезаться все равно сложно. При всем моем опыте игры в Need For Speed, не взорваться я не смог😂

Играть

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

Diablo

Я прошел всю третью часть Дьябло и очень люблю эту игру, поэтому не прошел мимо этого маленького недоделанного клона первой дьяблы😅

Тут есть только одна комната и несколько мобов, которых можно зарубить, но если есть желание, можешь продолжить разработку, быть может у тебя получится достойный убийца Дьябло!

Играть

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

DuckHunt

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

Ружья на приставках тех времен были далеки от совершенства и подстрелить утку было ой как не просто.. а бесячая собака еще и смеялась над тобой постоянно😁

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

Играть

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

Circus

Еще одна приставочная игра из детства. Основная задача - прыгать через кольца и препятствия, и при этом не поджарить льва. Это намного сложнее чем кажется и мелким я ее не сильно любил. Вообще не любил😀

Я вставил игры с приставки в подборку потому, что они лучше большинства игр которые сейчас есть в сервисах типа Google.Play и Яндекс.Игры. И если сделать клон какой-то из игр, но со своим "сюжетом" и графикой, уже будет классно!

Играть

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

Спасибо, если дочитали ( ´･･)ﾉ(._.`)

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

Или может ты помнишь какую-то игру из детства, которую можно воссоздать?

Игра Понг на JavaScript

2022-11-14T02:16:04.339Z

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

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

Повторил

К повторению Понга я приступил сразу же и это не заняло много времени. Но на этапе анализа стало ясно, что код очень сложный для понимания, все слишком переплетено и запутано. Еще недавно я бы подумал, что это я не все понимаю, но сейчас я уже видел как это можно сделать лучше.

Переосмыслил

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

Учитывая мой совсем маленький опыт программирования, чуть меньше 2 месяцев, я очень горжусь проделанной работой.

Расписал

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

Буду рад, если подскажите как можно улучшить код или найдете и укажите на ошибки в комментариях, даже орфографические🙂

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

А вот видео-гайд изначального пинг-понга от автора, и его код на гитхабе

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

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

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

Начало

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

setting.js
canvas.js
printer.js
game.js
ball.js
player.js
index.html
style.css

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 везде где это необходимо, но так мне мой код нравится больше.

  // Функция обнуляет положение игрока,
  // так как 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;
}

Лигатуры для программистов

2022-09-30T09:14:12.554Z

Лигатурой можно назвать любой знак образованный путём соединения двух и более графем, например, вот:

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

Причем тут программисты?

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

Например, знак "меньше или равно" <= выглядит совсем не так, как мы писали его в школе, а знак "не равно" !==, вообще не понятен обывателю. Но использование лигатур способно это исправить.

Fira Code - это бесплатный шрифт, созданный специально для написания кода. Он содержит целую кучу разных лигатур и, вышеупомянутый, знак "меньше или равно" выглядит в нем так <=, а вот !=="не равно", круто?🙂

На картинке ниже можно посмотреть некоторые примеры лигатур и то, как они преображают код. Также, тут можно заметить, что длина строк никак не меняется, знаки занимают ровно такое же количество символов, как и раньше:

К сожалению, большинство даже не знает о существовании таких лигатур. Я и сам узнал о них только потому, что Teletype принудительно использует Fira Code во всех вставках блоков кода. Чтобы в редакторе и в моих конспектах все было одинаково, я нашел способ установить сей шрифт в Visual Studio Code.

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

Как установить?

Сам шрифт можно свободно скачать на Google Fonts.

Зачем, в настройках Visual Studio Code выбираем:

File >==> Preferences >==> Settings >==> Text Editor >==> Font

В правой колонке, в графе "Font Family" пишем Fira Code, но проще всего сразу жмякнуть чуть ниже "Edit in setting.json" => откроется небольшой файл с кодом, где нужно привести следующие строки к такому виду:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,

Готово!

Игра Змейка на JavaScript

2022-09-06T06:22:35.578Z

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

У автора этой змейки есть две версии: в первом видео он делает змейку одним JS файлом, а во-втором видео уже на модулях с ООП (Объектно ориентированное программирование). Я сделал оба варианта, но именно второй мне захотелось разобрать по частям, чтоб лучше понять что к чему, т.к. он был намного менее понятен чем первый, там много классов и сложная модульная структура.

Гитхаб автора со змейкой: https://github.com/EpicLegend/snake2d-opp

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

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

Буду рад на указание ошибок, даже орфографических🙂

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

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

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

Начало

Набросал схему устройства приложения, чтоб было понятнее что куда идет в плане импорта объектов. По такому порядку и пойдем:

supportFunction.js
config.js
score.js
canvas.js
berry.js
snake.js
gameLoop.js
game.js
snake.html
style.css

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, если кто знает, напишите.

Курс по JavaScript

2022-09-02T15:13:01.443Z

Все, что вы тут найдете, это ничто иное как один большой конспект курса по JavaScript от Стащук Богдана.

Когда начинал проходить курс, хотел каждую тему делать отдельной статьей, но потом понял, что это сильно затрудняет навигацию и поиск, поэтому сделал все в одной статье. Букв, конечно, пришлось написать изрядное количество🙄

Возможно кому-то конспект пригодится😊 Если найдете ошибки, а в нем они есть, я уверен, то пишите в комментариях - исправлю.

Курс есть в свободном доступе на ютубе.

1. Отзыв о курсе

Я только начинаю изучение JS и курс Богдана показался мне самым понятным из тех что я нашел. Подкупили простые слайды и приятный голос, - поэтому я начал именно с его курса. И не ошибся.

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

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

Не понятно

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

Задания

На момент написания отзыва я прошел только 14 заданий из 80, но все задания проходил используя только информацию с курса, не гугля. Это сложно и иногда, чтоб найти тему задания приходилось проматывать много видео и искать где же Богдан это объяснял. Думаю стоило добавить в заданиях ссылки на разделы курса, в которых тема задания раскрывается.

Курс рекомендую👍

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

2. Введение

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

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

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

Разбор выражения console.log, который выводит в консоль Hello World:

console.log('Hello World')

console       // Это объект у которого есть свойства (имя: значение)
.             // Это точечная запись. Оператор
log()         // Это метод (функция) одного из свойств объекта consol
()            // Это оператор вызова функции
'Hello World' // это значение типа String (Строка). 
              // Может быть как в двойных кавычках, так и в одинарных

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

Примеры выражений:

'abc'                 // Вернет значение 'abc'
10                    // Вернет 10
5 + 2                 // Вернет результат 7. Тут есть оператор +
с = 10                // = это оператор присвоения. Результатом будет 10
'Good ' + 'Morning'   // Вернет 'Good Morning'
a <= b || c !== d     // Вернет true или false. Логические операторы
                      // меньше или равно,

Выражение с побочными действиями (SideEffects):

a = 15  // Это выражение присваивания, где переменной a присваивается
        // значение 10, также это выражение возвращает значение 15
a++     // увеличивает значение переменной на единицу и вернет значение
myFunction(c, d)  // внутри функции проиходят какие-то действия

3. Переменные

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

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

3.1. Имена переменных

Не стоит называть переменные a b c и не стоит сокращать названия. Названия переменных должны быть понятны не только вам, но и другим разработчикам. Должны отражать суть и назначение переменных.

Есть 3 типа имен для переменных:

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

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

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

3.2. Типы значений

Тип переменной определяется типом значения, которое ей присвоено.

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

Существуют примитивные типы значений, это те значения которые хранятся непосредственно в переменных. К примитивным относятся:

number (число) — это любое числовое значение, в том числе и дробные (1, -2, 3, 5.6, 1.15).
string (строка) — это любой текст. Можно использовать как двойные, так и одинарные кавычки.
boolean (логический) — всего 2 значения true и false.
undefined (неопределенный) — только значение undefined. Значение не определено.
null (нулевой) — только значение null. Для указания отсутствия значения у переменной.
symbol (символ) — используется для создания уникальных значений (В этом курсе про этот тип переменных информации нет).

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

object (объект) — это ссылочный тип.

Так как переменная типа объект хранит только ссылку на объект, то изменение этого объекта коснутся всех переменных имеющих туже ссылку:

const objectA = {
  name: 'Alex',
  age: 40
}
const objectB = objectA
// Создаем еще один объект копирующий первый
objectB.name = 'Victor'
// Меняем значение свойства name в ObjectB
console.log(objectA.name)
// Получаем значение Victor, первый объект также изменился

3.3. Объявления переменных

Чтобы создать переменную и присвоить ей значение, можно использовать ключевые слова const, let или var:

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

const myAge = 40
// объявили переменную myAge и сразу присвоили ей значение 40
myAge = 50
// попытались присвоить переменной myAge новое значение 50
// и получили ошибку!)

Стоит использовать const максимально, где это возможно. Т.к. он решает некоторые проблемы связанные с динамической типизацией языка JS.

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

let myAge
// объявили переменную myAge
myAge = 50
// присвоили переменной myAge значение 50
let youHere = true
//объявили переменную youHere и сразу присвоили ей значение true
youHere = false
//присвоили переменной youHere новое значение false

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

4. Объекты

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

Практически все сущности в JS это объекты или ведут себя как объекты. Например, массив и функция - это объекты, а число и строка ведут себя как объекты, хотя являются примитивными значениями.

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

Значением также может быть другой объект (вложенный объект):

const objectA = {
height: 550,
weight: 440,
xyz: {
  x: -1,
  y: 2,
  z: 3.5
  },
title: 'cube'

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

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

4.1. Действия со свойствами объекта

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

По аналогии с вызовом метода log объекта console используем точку после названия объекта для получения значения свойств объекта aboutMe:

const aboutMe = {
  city: 'Moscow',
  designer: true,
  country: 'Russia'
}
console.log(aboutMe.city)
// Получим 'Moscow'
console.log(aboutMe.designer)
// Получим true

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

const aboutMe = {
  city: 'Moscow',
  designer: true,
  country: 'Russia'
}
aboutMe.city = 'Perm'
// Переопределим значение свойства city
aboutMe.time = 3
// Добавим новое свойство time со значением 3 в объект
delete aboutMe.designer
// Удалим свойство designer из объекта
console.log(aboutMe)
// Получим объект {city: 'Perm', country: 'Russia', time: 3}

Кроме точки, доступ к свойствам объекта можно получить с помощью [ ] (bracket notation).

const myCity = {
  city: 'Kiev'
}
myCity['year'] = 2022
console.log(myCity.year)
// Получим 2022, мы добавили новое свойство year со значением 2022

Синтаксис с [ ] используется когда название свойства является значением той или иной переменной, например:

const myCity = {
  city: 'Kiev',
  year: 2022
}
const countryPropertyName = 'country'
// Создадим новую переменную со значение country
myCity[countryPropertyName] = 'Ukraine'
// Добавили свойство с именем взятым из значения переменной
// countryPropertyName, т.е. country
console.log(myCity)
// Получим объект {city: 'Kiev', year: 2022, country: 'Ukraine'}

В [ ] мы можем указать любое выражение, и результат этого выражения, станет названием свойства.

4.2. Вложенные свойства объектов

Оператор точка также позволяет получить доступ к вложенным объектам. Можно комбинировать с bracket notation:

const myCity = {
  city: 'Kiev',
  date: {
    month: 4,
    day: 22
  }
}
console.log(myCity.date.day)
// Получим 22
console.log(myCity.date['day'])
// Получим также 22

4.3. Использование переменных как значения свойств

Мы можем использовать имена переменных в качестве значений свойств. При создании объекта в него будут скопированы значения этих переменных:

const name = 'Alex'
const age = 40

const userProfile = {
  userName: name,
  userAge: age,
  userCity: 'Pskov'
}
console.log(userProfile)
// Получим объект {userName: 'Alex', userAge: 40, userCity: 'Pskov'}

Для удобства, можно сокращать написание свойства до названия переменной. Но тогда имя свойства будет такое же, как имя переменной:

const name = 'Alex'
const age = 40

const userProfile = {
  name,
  age,
  userCity: 'Pskov'
}
console.log(userProfile)
// Получим объект {name: 'Alex', age: 40, userCity: 'Pskov'}

4.4. Глобальные объекты

Глобальный объект - это встроенный объект с огромным количеством свойств и методов. Для браузеров это window или globalThis, для node.js это global или globalThis.

Мы можем использовать методы глобального объекта. Метод log() один из таких методов:

window.console.log('Hello World!')
// Объект console является одним из свойств глобального объекта window

4.5. Методы объекта

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

Мы можем вызвать метод объекта использую точечную запись . (оператор точка) и () круглые скобки:

myCity.city // Получаем доступ к значению свойства
myCity.helloMyCity() // Вызываем метод объекта

В объекте myCity city является обычным свойством, а helloMyCity() методом:

const myCity = {
  city: 'Pskov',
  helloMyCity: function () {
    console.log('Hello my City')
  }
}
myCity.helloMyCity()

Для удобства, можно опускать ключевое слово function и ставить круглые скобки сразу после названия свойства:

const myCity = {
  city: 'Pskov',
  helloMyCity() { // Сократили слово function
    console.log('Hello my City')
  }
}
myCity.helloMyCity()

5. JavaScript Object Notation (JSON)

Формат обмена данными с серверами. Если добавить переносы, то формат записи JSON похож на формат записи JS:

{
  "id": 10,
  "title": "user",
  "status": false
}

Но передается JSON в виде строки (string):

'{"id":10,"title":"user","status":false}'

Чтобы конвертировать данные JSON в объект JS, существует метод parse() объекта JSON, а для конвертации из JS в JSON, есть метод stringify()

JSON.parse() // конвертирует строку JSON в JS
JSON.stringify() // конвертирует объект JS в JSON

После выполнения метода JSON.parse(), мы получим привычный JS набор свойств:

{
  id: 10,
  title: 'user',
  status: false
}

Пробуем конвертировать объект в JSON и обратно:

const normalJavaScriptObject = {
  id: 10,
  title: 'user',
  status: false
}
const jsonString = JSON.stringify(normalJavaScriptObject)
// Создаем новую переменную и присваиваем ей значение JSON
console.log(jsonString)
// Получим строку '{"id":10,"title":"user","status":false}'
const jsonParse = JSON.parse(jsonString)
// Создаем новую переменную и конвертируем строку JSON в объект
console.log(jsonParse)
// Получим объект {id: 10, title: 'user', status: false}

6. Мутации

Значения переменных примитивного типа хранятся в самих переменных, поэтому при присвоении одной переменной значения другой переменной происходит копирование этого значения (copy by value):

const a = 10
let b = a
// Создаем переменную b и копируем в нее значение переменной a, равное 10
b = 30
// Меняем значение переменной b на 30
console.log(a)
// Видим что значение переменной a по прежнему 10
console.log(b)
// А значение переменной b теперь 30

Переменные ссылочного типа, содержат ссылку на объект, поэтому при присвоении одной переменной этой ссылки из другой переменной, переменные будут иметь одну и туже ссылку на один и тот же объект в памяти (copy by reference):

const user = {
  name: 'Sofia',
  age: 50
}
user.age = 22
// Присвоим значение 22 свойству age 
user.isAdult = true
// Создадим новое свойство isAdult со значением true
console.log(user.age)
console.log(user.isAdult)
// Убедимся, что значения age и isAdult переменной user равны 22 и true

const userCopy
// Создадим новую переменную и присвоим ей значение переменной user
userCopy.age = 44
userCopy.isAdult = false
// Изменим значения свойств для новой переменной userCopy

console.log(user.age)
console.log(user.isAdult)
// Значения свойств age и isAdult первой переменной user теперь
// равны 44 и false, т.к. мы изменили объект по ссылке
// через переменную userCopy

Мы изменили объект через копию переменной имеющую такую же ссылку на объект. Такое поведение называется мутированием.

6.1. Способы избежать мутаций

Метод Object.assign(). Чтобы избежать мутаций можно использовать метод assign() объекта Object. При создании копии объекта, этот метод скопирует все свойства первого объекта и создаст новый объект:

const user = {
  name: 'Sofia',
  age: 50
}
const userCopy = Object.assign({}, user)

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

const user = {
  name: 'Sofia',
  age: 50
}
const userCopy = {...user}

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

Методы JSON.parse() и JSON.stringify(). Чтобы избежать мутаций полностью, даже имея вложенные объекты, можно воспользоваться конвертацией объекта в JSON и обратно:

const user = {
  name: 'Sofia',
  age: 50
}
const userCopy = JSON.parse(JSON.stringify(user))
// Конвертируем объект user в JSON, а потом создаем новую переменную
// userCopy и присваеваем ей полученное значение JSON
// конвертируя его обратно в JS

7. Функции

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

Функция - это объект, и как любой объект она имеет свойства. Это можно увидеть применив метод метод console.dir() на функции:

function myFn() {
  console.log('Hello')
}
console.dir(myFn)
// Метод dir() покажет свойства функции как объекта

Функция может быть:

Именованной (Объявленная функция). Объявляем функцию сразу указывая ее будущее имя. Будет аналогична анонимной функции присвоенной переменной через ключевое слово let;
Анонимной. Анонимными являются функциональные выражения и стрелочные функции;
Присвоенная переменной. Если функциональное выражение и стрелочную функцию присвоить переменной, то будет функция присвоенная переменной;
Аргументом. Например, при вызове другой функции (callback function);
Методом, т.е. значением свойства в объекте.

function myFn() {
  console.log('Hello')
}
// Именованая функция

function () {
  console.log('Hello')
}
// Функциональное выражение (анонимная функция)

const myFn = function () {
  console.log('Hello')
}
// Функциональное выражение присвоеное переменной

const myFn = () => {
  console.log('Hello')
}
// Стрелочная функция присвоеная переменной

const myFn = () => console.log('Hello')
// Если у стрелочной функции всего одно выражение, то {} можно опустить
// Функция будет неявно возвращать значение этого выражения

setTimeout(myFn, 5000)
// Функция как аргумент другой функции

const myObject = {
  name = 'Alex'
  print: function
// Функция как значение одного из свойств объекта (метод)

7.1. Неявный возврат значения

Функция, как и любое выражение всегда возвращает значение. Если в функции явно (командой return) не указать какое именно значение она должна вернуть, то она всегда неявно (без команды return) возвращает undefined:

const myFn = () => {
  5 + 5
}
// Такая функция вернет undefined, т.к. мы не указали что ей возвращать

const myFn = () => {
  return 5 + 5
}
// Такая функция вернет сумму 10, т.к. мы ЯВНО указали
// командой ruturn, что ей нужно вернуть 

const myFn = () => return 5 + 5
// Такая функция также вернет сумму 10, но уже НЕЯВНО, без команды ruturn

7.2. Параметры функции

При объявлении функции опционально можно указать параметры, с которыми функция будет работать внутри себя:

function mySum(a, b) {
// Указываем параметры a и b, это переменные которые действуют 
// только внутри функции в момент вызова функции
  let sum
  // Объявляем переменную sum, которая будет  
  sum = a + b
  return sum
  // Ключевое слово return указывает то, что должна вернуть функция.
}

В момент вызова этой функции в круглых скобках указываются значения параметром функции - аргументы:

function mySum(a, b) {
  let sum
  sum = a + b
  return sum
}
myFn(10, 3)
// Аргументы присваиваются параметрам по порядку
// Число 10 будет присвоено параметру a, а число 3 - параметру b

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

function multByFactor(value, multiplier = 1) {
  return value * multiplier
}
// Аргумент multiplier будет равен 1 если не передано другое значение

multByFactor(10, 2)
// Вернет результат 20
multByFactor(5)
// Вернет результат 5, т.к. второй агрумент будет взят по умолчанию, это 1

В примере функция создает объект, добавляет к нему все свойства из объекта post с помощью оператора ... и добавляет новое свойство со значением текущей даты с помощью метода Date():

const newPost = (post, addedAt = Date()) => ({
  ...post,
  addedAt,
})
// Тело функции ({}) дополнительно обернуто круглыми скобками,
// это позволяет неявно вернуть объект, как результат функции

const firstPost = {
  id: 1,
  author: 'Pavel'
}
newPost(firstPost)
// Функция вернет новый объект с тремя свойствами

7.3. Мутации объектов через функции

Аргументом в вызове функции может быть объект и в этом случае параметру функции будет передана ссылка на этот объект и все дальнейшие действия с этим параметром, будут вызывать мутации внешнего объекта по ссылке:

const personOne = {
  name: 'Lara',
  age: 22
}

function increasePersonAge(person) {
  person.age += 1
  return person
}

increasePersonAge(personOne)
// Вызываем функцию с аргументом переменной personOne
console.log(personOne.age)
// Получим 23, т.к. внешний объект мутировал через изменение person

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

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

Чтобы избежать мутаций в функции можно использовать метод assign(), три точки или JSON, также как мы использовали их раннее:

const personOne = {
  name: 'Lara',
  age: 22
}

function increasePersonAge(person) {
  const updatedPerson = Object.assign({}, person)
  // Создаем новый объект прямо внутри функции и начинаем работать с ним
  updatedPerson.age += 1
  return updatedPerson
}
const updatedPersonOne = increasePersonAge(personOne)
// Создаем новую переменную, вызываем функцию и
// присваиваем результат функции этой новой переменной

7.4. Коллбэк функция (callback function)

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

function printFinish() {
  console.log('Finish')
}
console.log('Start')
// Печатаем в консоль Start
setTimeout(printFinish, 5000)
// Выполняем функцию printFinish после выполнения функции setTimeout
// setTimeout это встроенная функция, устанавливает таймер выполнения

7.5. JSDOC-комментарии

Такие комментарии позволяют указать какие типы переменных должны использоваться внутри функции:

/**
*
* @param {number} a
* @param {number} b
* @returns {number} Разница чисел
*/
function myFn(a, b) {
  let c = a - b
  return c
}

8. Области видимости

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

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

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

При этом мы можем обратиться из локальной области видимости к переменной из глобальной области видимости, если в локальной области видимости не создана переменная с таким же именем:

let a = 'New York'
let b = 'New York'
// Объявим две переменные и присвоим им значения New York

function myFn() {
  let b
  // Объявим переменную b внутри функции
  a = 'Las Vegas'
  b = 'Las Vegas'
  // Поменяем значения обеих переменных на Las Vegas
}

myFn()

console.log(a) // Получим 'Las Vegas'
console.log(b) // Получим 'New York'

9. Ложные значение

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

К таким значениям относятся:

false     // Ложь
0         // Ноль
''        // Пустая строка
undefined // Значение неопределено
null      // Значения нет

Привести значение к типу boolean можно с помощью функции Boolean():

const a = 'Alex'
const b = ''

console.log(Boolean(a)) // true
console.log(Boolean(b)) // false

10. Операторы

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

=   // Оператор присваивания
,   // Позволяет объявить несколько переменных в одной строке
.   // Позволяет обращаться к свойствам объектов
()  // Оператор вызова функции
... // Оператор разделения объекта на свойства. Префиксный

Арифметические операторы

+  // Плюс. Используется для сложения. Конвертации строк в числа
-  // Минус
*  // Умножить
/  // Разделить
++ // Увеличивает значение переменной на 1
+= // Увеличение значения
-= // Уменьшение значения

Операторы сравнения

=== // Равно, оператор сравнения. Сравнивает как тип, так и значение
!== // Не равно
<=  // Меньше
>=  // Больше

Логические операторы

! // Не. Префиксный оператор. Возвращает тип boolean (true или false)
&& // И. Бинарный оператор. Возвращает значение одного из операндов
|| // Или. Бинарный оператор. Возвращает значение одного из операндов

Текстовые операторы

typeof // Проверяет тип значения. Префиксный
instanceof // Проверяет принадлежность объекта к классу. Бинарный
new // Создает новый экземпляр объекта. Префиксный
delete // С помощью него можно удалить свойство в объекте. Префиксный

Унарные и бинарные операторы

У унарных операторов всегда один операнд (аргумент). Они могут быть префиксные, когда оператор стоит перед оператором, и постфиксные, когда оператор идет после операнда.

+myName         // + перед операндом
delete myName.a // delete перед операндом
myName++        // ++ после операнда
myName()        // () после операнда

У бинарных операторов всегда два операнда, они имеют инфиксный формат, когда оператор находится между операндами.

a = 5
a + b
a += 5
a === b
a && b

Существует тернарный оператор у которого 3 операнда, подробнее о нем тут.

Оператор typyof

typeof 10 // 'number'
typeof 10 === 'number' // true
typeof 'Alex' // 'string'

let a
typeof a === 'undefined' // true

Оператор !

Такой оператор чаще всего используется в условных инструкциях.

!10  // false
!0   // true
!!10 // true
!!0  // false

Оператор && и ||

Операторы && и || (и и или) являются операторами короткого замыкания.

/*Выражение 1*/ && /*Выражение 2*/

Если выражение 1 ложно, то выражение 2 игнорируется и возвращается результат выражения 1
Если выражение 1 истина, то смотрим на выражение 2 и т.д.

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

/*Выражение 1*/ || /*Выражение 2*/

Если выражение 1 истина, то выражение 2 игнорируется и возвращается результат выражения 1
Если выражение 1 ложно, то смотрим на выражение 2 и т.д.

Оператор || (или) работает противоположно оператору && (и), ищет первое истинное значение и выдает его результат.

const a = 10
a && console.log('Hello')
// т.к. значение 10 истина, то мы получим Hello в консоли,
// это результат второго выражения
let b
b && console.log('Hello')
// второе выражение не будет выполнено, т.к. значение переменной b ложно

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

Оператор ...

!!!

const button = {
  width: 200,
  text: 'Buy'
}
// Создадим объект с двумя свойствами

const redButton = {
// Создадим еще один объект
  ...button,
  // Добавим в него свойства из объекта button
  color: 'Red'
  // Добавим третье свойство color
}
console.table(redButton)
// Метод table() выведет объект в консоль в виде таблицы

11. Конкатенация (соединение) строк

Для соединения строк можно использовать оператор + , но нужно следить за наличием пробелов между строк и расставлять их при необходимости. Также с оператором + можно использовать но только строки, но и переменные:

console.log('Hello, ' + 'world')
// Получим Hello, world

const hello = 'Hello'
const world = 'world'
console.log(hello + ', ' + world')
// Также получим Hello, world

Обратные кавычки `` также позволяют внутри себя использовать любые выражения с помочью ${ } , это называется шаблонная строка (template string literals).

const name = 'Denis'
const city = 'Perm'
console.log(`My name is ${name} and I live in ${city}`)

При конкатенации строки с числом, JS превратит число в строку:

const string = 'Numder'
const number = 22
console.log(string + ' ' + number)
// Получим строку 'Number 22'

12. Обработка ошибок

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

С помощью инструкции throw new Error() можно искусственно создать ошибку

const fnWithError = () => {
  throw new Error('Some error')
}
// Создаем функцию которая выдаст ошибку Some error

fnWithError()
// Вызываем функцию вызывающую ошибку и получаем непойманную ошибку

console.log('Continue...')
// Эта функция выполнена не будет

Непойманная ошибка (Uncaught Error) это та ошибка, которая остановит выполнение кода JS.

Решение try/catch. В блоке кода try мы указываем код, в котором может возникнуть ошибка, а в блоге catch с параметром (error), тот код, который будет выполнен в случае появления ошибки в блоке try:

const fnWithError = () => {
  throw new Error('Some error')
}
// Создаем функцию которая выдаст ошибку Some error
try {
  fnWithError()
} catch (error) {
    console.error(error)
    // Метод выведет всю информацию об ошибке
    console.log(error.message)
    // Выведет сообщение зашитое в ошибку, some error
}
console.log('Continue...')
// На этот раз выполнение кода продолжится и мы получим Continue...

13. Инструкции

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

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

Инструкции следует завершать ; (точкой с запятой), а также каждую инструкцию писать на отдельной строке кода.

После { } блока кода инструкций точка с запятой не требуется.

const a = 5;
// в конце инструкции стоит ;

if (a > b) {
  console.log('Hello');
}
// Блоки кода {} условных инструкций не требуют ;

for (let i = 0; i++; i <5) {
  console.log(i);
}
// Блоки кода {} циклов тоже не требуют ;

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

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

Если в конце выражения поставить точку с запятой, то мы явно укажем, что это инструкция и JS перестанет считать его выражением, даже если это выражение-инструкция

function myFn(a) {
  console.log(a);
}
let c = 10
//
myFn(c = c + 1)
// Функция выдаст результат выражения, это 11
myFn(c = c + 1;)
// Поставив точку с запятой, мы указали что это инструкция,
// поэтому функция выполнена не будет

14. Массивы

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

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

const myNumbers = ['one', 'two', 'three']
console.log(myNumbers)
// Получим массив ['one', 'two', 'three']

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

const myNumbers = new Array ('one', 'two', 'three')
console.log(myNumbers)
// Получим массив ['one', 'two', 'three']

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

14.1. Чтение значений массива

Вместо точечной записи, для обращения к цифровым свойствам массива используют [] квадратные скобки:

const myArray = [1, true, 'Petr']
console.log(myArray)
// Получим [1, true, 'Petr']
console.log(myArray[0])
// Получим 1
console.log(myArray[1])
// Получим true
console.log(myArray.length)
// Получим 3, это кол-во значений в массиве. Свойство length имеет
// любой массив по умолчанию и обновляется оно автоматически

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

const myNumbers = new Array (1, 2, 3, 4)
// Создадим массив с 4-я значениями
myNumbers[1] = 'new'
console.log(myNumbers)
// Получим [1, 'new', 2, 3, 4] т.к мы присвоили свойству 1 значение 'new'
myNumbers[4] = 'four'
// Добавили новое значение в массив, т.к. свойства 4 не было

14.2. Методы массивов

Метод push() добавляет аргумент как элемент в конец массива:

const myNumbers = ['one', 'two', 'three']
// Создадим массив [0: 'one', 1: 'two', 2: 'three']
myNumbers.push('PUSH')
// Получим массив [0: 'one', 1: 'two', 2: 'three', 3: 'PUSH', ]

Метод pop() удаляет последний элемент массива и возвращает его значение:

const myNumbers = ['one', 'two', 'three']
// Создадим массив [0: 'one', 1: 'two', 2: 'three']
const myPop = myNumbers.pop()
// Получим массив [0: 'one', 1: 'two'] и переменную myPop
// со значением 'three', т.к. метод pop возвращает значение

Метод unshift() добавляет аргумент как элемент в начало массива. Все названия элементов сдвинуться на 1 вперед:

const myNumbers = ['one', 'two', 'three']
// Создадим массив [0: 'one', 1: 'two', 2: 'three']
myNumbers.unshift('UNSHIFT')
// Получим массив [0: 'UNSHIFT', 1: 'one', 2: 'two', 3: 'three']

Метод shift() удаляет первый элемент массива и возвращает его значение:

const myNumbers = ['one', 'two', 'three']
// Создадим массив [0: 'one', 1: 'two', 2: 'three']
const myShift = myNumbers.shift()
// Получим массив [0: 'two', 1: 'three'] и переменную myShift
// со значением 'one', т.к. метод shift возвращает значение

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

Метод forEach() перебирает все элементы массива и применяет к ним функцию, которую мы прописываем как аргумент метода. Возвращает значение undefined.

const myNumber = [1, 2, 3, 4]
myNumber.forEach(element => console.log(element * 2))
// Метод forEach() переберет все элементы масива, умножит их на 2
// и выведет их в консоль

Метод map() перебирает все элементы массива и применяет к ним функцию также как forEach, но возвращает новый массив.

const myNumber = [1, 2, 3, 4]
const newMyNumber = myNumber.map(element => element * 2)
// Получим новый массив со значениями [2, 4, 6, 8]

15. Деструктуризация

Позволяет, используя {} фигурные скобки, создавать переменные на остнове свойств объектов:

const myName = {
  name: 'James',
  surname: 'Crock',
  age: 35,
}

const {name, surname} = myName
// Будет создана переменная name со значением 'James'
// и переменная surname со значением 'Crock'

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

const fruits = ['apple', 'banana']
const [fruitOne, fruitTwo] = fruits
// Получим переменную fruitOne = 'apple' и fruitTwo = 'banana'

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

const userProfile = {
  name: 'Pavel',
  commentsQty: 23,
  hasSignedAgreement: false
}
const userInfo = ({name, commentsQty}) => {
// В переданом объекте ищем свойства name и commentsQty
  if (!commentsQty) {
  // Если в объекте нет свойства commentsQty, то мы возвращаем:
    return `User ${name} has no comments`
  }
  return `User ${name} has ${commentsQty} comments`
}
userInfo(userProfile)
// Получим 'User Pavel has 23 comments'

16. Условные инструкции

Инструкция if. Блок кода в {} выполняется однократно если условие правдиво, если ложно - игнорируется:

let val = 10

if (val > 5) {
// Если val больше 5, то мы выполняем блок кода в {}
  val += 20
}

console.log(val)
// Получим 30

const person = {
  age: 20
}

if (!person.name) {
// Если у объекта НЕТ свойства name, то мы выполняем блок кода в {}
  console.log('Имя не указано')
}

Инструкция if else. В этой инструкции можно использовать 2 блока кода. Первый блок кода { } выполняется если условие правдиво, а второй { } - если ложно:

const person = {
  age: 20,
  name:'Diana'
}

if (person.name) {
// Если у объекта ЕСТЬ свойство name, то мы выполняем блок кода в {}
  console.log(`Имя: ${person.name}`)
} else {
  // Если свойства name НЕТ, то выполняем блок кода else {}
  console.log('Имя не указано')
}

Можно комбинировать инструкции if else:

if (/*Условие1*/) {
 // Блок кода, выполняемый однократно, если Условие1 правдиво
} else if (/*Условие2*/) {
 // Блок кода, выполняемый однократно, если Условие2 правдиво
} else {
 // Блок кода, выполняемый однократно, если предыдущие условия ложны
}

Применение инструкции if в функциях:

const sumPositiveNumbers = (a, b) => {
  if (typeof a !== 'number' || typeof b !== 'number') {
  // Если a или b не являются числами, то возвращаем
    return 'One of the arguments is not a number'
  }
  if (a <= 0 || b <= 0) {
  // Если a или b меньше или равны нулю, то возвращаем
    return 'Numbers are not positive'
  }
  return a + b
  // Если передыдущие условия ложны, то выполняется сложение
}

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

Инструкция switch. Действие выполняется если выражение в условии равно case (кейс/случай). Если выражение равно нескольким кейсам, то выполнятся оба кейса.

Если в кейсе стоит ключевое слово brake, то после удачного выполнения этого кейса выполнение инструкции switch прекратиться, даже если какие-то кейсы еще подходят под условия:

switch (Выражение) {
  case A:
    // Действие, если Выражение === A
    break
    // brake это инструкция для прикращения инструкции после 
    // удачного выполнения действия в кейсе
  case B:
    // Действие, если Выражение === B
    break
  default:
    // Действие по умолчанию
}

const winterMonth = 2

switch (winterMonth) {
  case 12:
    console.log('December')
    break
  case 1:
    console.log('January')
    break
  case 2:
    console.log('February')
    break
  default:
    console.log('Its not a winter month')
}

17. Тернарный оператор

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

У тернарного оператора 3 операнда, его операнды пишутся между ? и : Конструкция с тернарным оператором является выражением и возвращает результат одного и операндов:

Условие (Условие) // Условием может быть любое выражение, в том числе
                      // и с другими операторами
  ? Операнд Один      // Выражение, выполняется если условие ПРАВДИВО
  : Операнд Два      // Выражение, выполняется если условие ЛОЖНО

const value1 = 11
const value2 = 25
value1 && value2
  ? myFunction(value1, value2)
  // Если value1 и value2 правдивы, то вызываем функцию используя их
  // как аргументы
  : myFunction()
  // Если значения ложны, то вызываем функцию без аргументов

let value = 11
console.log(value >= 0 ? value : -value)
// Если value больше или равно нулю, то возвращаем результат value
// Получим 11

value = -5
const result = value >= 0 ? value : -value
// Присваиваем переменной результат работы тернарного оператора,
// это возможно т.к. это выражение
console.log(result)
// значение result будет -value, а --5 это 5

18. Циклы

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

18.1. Цикл for

for (Начальная инструкция; Условие; Итерационное действие) {
  // Блок кода, выполняемый на КАЖДОЙ итерации
}

Итерационное действие повторяет выполняется до тех пор, пока условие верно.

for (let i = 0; i < 5; i++) {
  console.log(i)
}

Циклы можно использовать для массивов, хотя это не рекомендуется. Для массивов есть методы forEach, map, reduce

const myNumbers = ['one', 'two', 'three']

for (let i = 0; i < myNumbers.length; i++) {
  console.log(myNumbers[i])
}
// Получим в консоли:
// one
// two
// three

18.2. Метод массивов forEach

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

const myNumbers = ['one', 'two', 'three']

myNumbers.forEach((element, index) => {
  console.log(element, index)
})
// Получим в консоли:
// one 0
// two 1
// three 2

18.3. Циклы while и do while

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

while (Условие) {
  // Блок кода, выполняемый при каждой итерации
}

Мы должны сами контролировать изменение изначального условия внутри инструкции:

let myNumber = 0

while (myNumber < 5) {
  console.log(myNumber)
  myNumber++
  // Меняем переменную, которое влияет на условие
  // позволяя выйти из цикла
}

// Получим в консоли:
//   0
//   1
//   2
//   3
//   4
// Когда myNumber станет равна 5 цикл закончится

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

do {
  // Блок кода, выполняемый при каждой итерации
} while (Условие)

Мы также должны сами контролировать изменение изначального условия внутри инструкции:

let myNumber = 0

do {
console.log(myNumber)
myNumber++
} while (myNumber < 5)

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

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

18.4. Цикл for in для объектов

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

for (key in Object) {
  // Действия с каждым свойством объекта
  // Значение свойства - Object[key]
}

Key будет представлять название свойства в объекте, а Object это переменная указывающая на объект. Используя такой цикл можно перебрать все свойства объекта:

const myObject = {
  x: 20,
  y: true,
  z: 'text'
}

for (const key in myObject) {
  console.log(key, myObject[key])
  // key указывает на название свойства
  // myObject[key] указывает на значение свойств
}

// Получим в консоли:
//   x 20
//   y true
//   z text

Точно также цикл for in применяется к массивам:

const myArray = [true, 20, 'text', null]

for (const key in myArray) {
  console.log(key, myArray[key])
}

// Получим в консоли:
//   true
//   20
//   text
//   null

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

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

18.5. Метод forEach() для объектов

Можно применить метод массивов forEach() для объектов, предварительно получив все имена свойств (ключи) этого объекта в вид массива с помощью метода keys() глобального объекта Object:

const myObject = {
  x: 20,
  y: true,
  z: 'text'
}

Object.keys(myObject).forEach(key => {
  console.log(key, myObject[key])
})

// Получим в консоли:
//   x 20
//   y true
//   z text

Аналогично, но используя метод values() можно перебирать значения свойств:

const myObject = {
  x: 20,
  y: true,
  z: 'text'
}

Object.values(myObject).forEach(value => {
  console.log(value)
})

// Получим в консоли:
//   20
//   true
//   text

18.6. Цикл for of

for (Element of Iterable) {
  // Действие с определенным элементом
}

Iterable это любое значение по которому можно итерироваться (элементы которого можно перебирать):

const myString = 'Hello'

for (const letter of myString) {
  console.log(letter)
}
// Получим в консоли:
//   H
//   e
//   l
//   l
//   o

Цикл for of также подходит для массивов:

const myArray = [true, 20, 'text', null]

for (const element of myArray) {
  console.log(element)
}
// Получим в консоли:
//   true
//   20
//   text
//   null

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

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

19. Модули

Чтобы код был более читаемым используют модули. Один модуль это отдельный файл JS с частью кода и решающий какую-то одну задачу.

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

В JS есть возможность экспорта и импорта переменных из модуля в модуль, для этого используется ключевые слова export default, export и import

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

Export default

Если нужно экспортировать из файла file1.js только одну переменную, лучше использовать export default:

// file1.js

const myName = () => {
  console.log('Bob')
}
  
export default myName

В файле file2.js делаем импорт. Для этого используем ключевое слово import и указываем путь к файлу file1.js с помощью from:

// file2.js

import printMyName from './file1.js'
// Укажем переменной новое имя printMyName

printMyName()
// Получим 'Bob'

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

Export

При экспорте нескольких переменных из файла file1.js используем ключевое слово export:

const sum = (a, b) => a + b
const mult = (a, b) => a * b

export {sum, mult}

В файле file2.js делаем импорт. Для этого используем ключевое слово import и {} фигурные скобки, в которых перечисляем имена импортируемых переменных:

import {sum, mult} from './file1.js'

console.log(sum(10, 2))
console.log(mult(10, 2))

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

Но есть возможность переименовать переменную после экспорта:

import {sum as sumRenamed, mult} from './file1.mjs'
// Указываем переменной sum новое имя sumRenamed

20. Классы и прототипы

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

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

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

Для создания класса используется ключевое слово class. Название нового класса пишется с использованием CamalCase нотации (с большой буквы)

class Comment {
// Пишем Comment с большой буквы т.к. это название класса
  constructor(a) {
  // Метод constructor вызывается только когда создается новый экземпляр
  // Его параметры, это аргументы заданые при создании экземпляра
    this.text = a
    this.votesQty = 0
    // Слово this указывает на будущий экземпляр класса.
    // То есть оно как бы замениться именем экземпляра,
    // который мы будем создавать 
  }
  upvote() {
  // Метод upvote будет доступен всем экземплярам нового класса Comment
  // Это называется наследованием
    this.votesQty += 1
  }
}
const firstComment = new Comment('First Comment')
// Оператор new вызывает функцию constructor с аргументом 'First Comment'
console.log(firstComment)
// Получим объект firstComment {text: 'First Comment', votesQty: 0}
// Ему также доступны наследованные методы constructor и upvote

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

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

Чтобы проверить принадлежность объекта к тому или иному классу можно использовать оператор instanceof:

firstComment instanceof Comment
// Получим true т.к. firstComment экземпляр класса Comment
firstComment instanceof Object
// Получим true т.к. firstComment также является экземпляром
// глобального класса Object

Чтобы проверить принадлежность свойства к тому или иному объекту можно использовать метод hasOwnProperty():

const firstComment = new Comment('First Comment')

firstComment.hasOwnProperty('text')
// Проверяем есть ли у объекта firstComment собственное свойство text
// Получаем true, такое свойство есть
firstComment.hasOwnProperty('votesQty')
// Получаем true, такое свойство тоже есть
firstComment.hasOwnProperty('upvote')
// Получаем false, такого свойства нет, это свойство родительского
// класса Comment
firstComment.hasOwnProperty('hasOwnProperty')
// Получаем false, такого свойства тоже нет, это свойство родительского
// глабального класса Object

20.1 Статический метод

С помощью ключевого слова static можно создавать методы, которые НЕ будут наследоваться экземплярами классов:

class Comment {
  constructor(text) {
    this.text = text
    this.votesQty = 0
  }
  upvote() {
    this.votesQty += 1
  }
  static mergeComments(first, second) {
    return `${second} ${second}`
}

Comment.mergeComments('First Comment', 'Second Comment')
// Метод будет доступен как свойство объекта Comment

20.2 Расширение других классов

С помощью ключевого слова extends можно расширить существующий класс. Создастся новый класс с использованием конструктора из расширяемого класса, в данном случае класса массивов Array:

class NumbersArray extends Array {
  sum() {
    return this.reduce((el, acc) => acc += el, 0)
  }
}

const myArray = new NumbersArray(2, 5, 7)
//
console.log(myArray)
myArray.sum()

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

myArray => NumbersArray => Array => Object

20.3 Примитивные значения

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

const myName = 'Vladimir'
// Создадим переменную примитивного типа String
console.log(myName)
// Получим 'Vladimir'
console.log(myName.toUpperCase())
// Получим 'VLADIMIR'. Мы использовали метод класса String
const mySecondName = new String('Putin')
// Создадим новый экземпляр класса String
mySecondName
// Получим объект, экземпляр класса String:
// String {'Putin'}
//   0: "P"
//   1: "u"
//   2: "t"
//   3: "i"
//   4: "n"
//   length: 5

21. Промисы

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

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

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

У промиса может быть 3 состояния:

Ожидание (pending), когда промис создан;
Исполнен (resolve), когда вернул результат;
Отклонен (reject), когда вернул ошибку.

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

Создаются промисы путем создания экземпляра класса Promise:

const myPromise = new Promise((resolve, reject) => {
  // Выполнение асинхронных действий
  //
  // Внутри этой функции нужно в результате вызывать одну из функций
  // resolve или reject
})

Получение результата промиса

myPromise
  .then(value => {
    // Действия в случае успешного исполнения Промиса
    // Значение value - это значение, переданное в вызове функции
    // resove внутри промиса
  })
  .catch(error => {
    // Действия в случае отклонения Промиса
    // Значение error - это значение, переданное в вызове функции
    // reject внутри промиса
  })

Для тестирования отправки и получения запросов можно использовать сервис

jsonplaceholder.typicode.com

Когда мы отправляем fetch-запрос, он отправляет назад промис.

fetch('https://jsonplaceholder.typicode.com/todos')
//
  .then(response => response.json())
  // Получаем данные при исполнении промиса функцией fetch,
  // но т.к. там нет объектов и масивов JS мы присваиваем эти
  // данные переменной response и применяем к ней метод json()
  // Метод json() также возвращает промис
  .then(json => console.log(json))
  // При возвращении промиса от метода json(), нужен еще один метод
  // then, который выводит его в консоль
  .catch(error => console.error(error))
  // Если один из промисов отклонен, выводим ошибку в консоль

fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => {
    console.log(response)
    return response.json()
  }) 
// Такая функция позволит нам увидеть ответ от сервера в его исходном виде
  .then(json => console.log(json))
  .catch(error => console.error(error))

Чтобы избежать двойного использования .then мы можем создать собственный промис, который будет получать данные, обрабатывать через JSON и вызвращать результат в виде переменной getData. Такой вариант кода можно поместить в модуль и обращаться к нему по мере необходимости:

// Файл module1.js
const getData = (url) => 
  new Promise((resolve, reject) => 
    fetch(url)
      .then(response => response.json())
      .then(json => resolve(json))
      .catch(error => reject(error))
  )

// Файл module2.js
getData('https://jsonplaceholder.typicode.com/todos')
  .then(data => console.log(data))
  .catch(error => console.log(error.massage))

22. Асинхронные функции

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

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

Для создания асинхронной функции используется слово async:

async function asyncFn() {
  // Стандартный синтаксис функции
}
const asyncFn = async () => {
  // Стрелочная функция
}

!!!

const asyncFn = async () => {
  throw new Error('There was an error!')
}

asyncFn()
  .then(value => console.log(value))
  .catch(error => console.log(error.massage))

С помощью ключевого слова await можно внутри асинхронной функции ожидать результата другого промиса:

const timerPromise = () =>
  new Promise( (resolve, reject) => setTimeout(() => resolve(), 5000) )
  
const asyncFn = async () => {
  console.log('Start')
  const start = performance.now()
  await timerPromise()
  const end = performance.now()
  console.log('Finish', end - start)
}

asyncFn()

22.1. Переход с промисов на 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))

Заменим первую часть:

const getData = async (url) => {
  const res = await fetch(url)
  const json = await res.json()
  return json
}

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

Заменим вторую часть:

const url = 'https://jsonplaceholder.typicode.com/todos')
const data = await getData(url)

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

Добавим во вторую часть обработчик ошибок с помощью try/catch блоков:

const url = 'https://jsonplaceholder.typicode.com/todos')

try {
  const data = await getData(url)
  console.log(data)
} catch (error) {
  console.log(error.message)
}

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

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

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

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

Решил я, значит, стать программистом

2022-08-20T07:35:17.535Z

11 лет проработал дизайнером и вот так вот раз, и захотелось чего-то другого. Чего-то более математичного🙂

Итак,

Меня зовут Алексей и сейчас я занят изучением программирования на JavaScript. Выбор был сделан в пользу этого языка программирования просто потому, что я начал делать свой собственный сайт-портфолио по дизайну, частично используя чужой код. И чтоб разобраться в этом коде, мне нужно было знать HTML/CSS и JavaScript.

В процессе я заметил, что делать сайт мне намного интереснее, чем заниматься его наполнением и оформлять дизайн-проекты. В голову сразу залезли новые, но вполне достижимые цели. Например, у меня есть идея для приложения по учету финансов, а также есть желание повторить сайт-игру с машинкой от Бруно Саймона. Все это позволяет сделать JavaScript.

Если честно, я понятия не имею какую сферу программирования и какой язык стоит выбрать, чтоб быть программистом. Я просто захотел попробовать себя в какой-то новой сфере. Наверное, начался кризис среднего возраста😐 или что-то вроде того.

Не уверен, что этот выбор правильный и даже не уверен, что меня на долго хватит, но пока все идет ништяк. Я уже немного подтянул знания HTML/CSS и начал проходить курс по JavaScript, который на удивление дается мне легко. Даже появилось какое-то неловкое чувство🤷‍♂️ будто изучаешь какую-то никому ненужную фигню.

Если все получится, то буду пробовать устраиваться джуном и начинать карьеру программиста.

Зачем мне блог?

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

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

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

Что дальше?

На сегодняшний день, план изучения новых тем у меня такой:

HTML/CSS - без них никуда;
JavaScript - основа моего план;
Vue или React - чтоб попробовать создать работающее приложение;
Blender - потому что хочу делать иллюстрации и модели для сайтов и приложений;
Three.js - чтоб сделать сайт как у Бруно Саймона;
SQL - эта штука тоже много где всплывает, надо знать.

Этот план будет корректироваться по мере необходимости или по наличию интересного курса. Так, например, у меня уже есть курс по React, ждущий своей очереди.

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

А вот сайт Бруно Саймана, о котором я говорил выше.

Алексей Бунин

Прогресс обучения_Февраль 2023

Курс Three.js Journey

Курсы по Blender

Дальше

Игры на JavaScript

Keep Out!

Gorescript

Heraclos

InterLand

Screeps

Epic SkidMarks

HexGL

Diablo

DuckHunt

Circus

Спасибо, если дочитали ( ´･･)ﾉ(._.`)

Игра Понг на JavaScript

Повторил

Переосмыслил

Расписал

Начало

setting.js

canvas.js

printer.js

game.js

ball.js

player.js

index.html

style.css

Лигатуры для программистов

Причем тут программисты?

Как установить?

Готово!

Игра Змейка на JavaScript

Начало

supportFunction.js

config.js

score.js

canvas.js

berry.js

snake.js

gameLoop.js

game.js

snake.html

style.css

Курс по JavaScript

Оглавление

1. Отзыв о курсе

2. Введение

3. Переменные

4. Объекты

5. JSON

6. Мутации

7. Функции

8. Области видимости

9. Ложные значение

10. Операторы

11. Конкатенация строк

12. Обработка ошибок

13. Инструкции

14. Массивы

15. Деструктуризация

16. Условные инструкции

17. Тернарный оператор

18. Циклы

19. Модули

20. Классы и прототипы

21. Промисы

22. Асинхронные функции

1. Отзыв о курсе

Не понятно

Задания

Курс рекомендую👍

2. Введение

3. Переменные

3.1. Имена переменных

3.2. Типы значений

3.3. Объявления переменных

4. Объекты