В JavaScript мы можем создавать фигуры, заставляя их перемещаться по холсту, перетаскивать их, заставлять их падать, качаться, отскакивать друг от друга и многое другое. Это можно использовать для демонстрации или игры. Одной из распространенных и полезных библиотек для этого в JavaScript является Matter js, который представляет собой 2D-физический движок, и ниже я объясню некоторые из того, как это работает, и как начать использовать эту библиотеку в проекте.

Выше приведен пример квадратов и кругов, созданных с использованием библиотеки Matter js, на изображении выше также есть стены, пол и потолок, потому что в противном случае фигуры упали бы (из-за физики и гравитации).

Создавая это в файле JavaScript, нам нужно добавить в приложение библиотеку Matter js. Затем, используя эту библиотеку, нам нужно создать движок, которым движок управляет и обновляет симуляцию. Это можно сделать, позвонив:

Matter.Engine.create()

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

Matter.Render.create({
  element: document.body,
  engine: engine, //Our created engine
  options: {
    width: //width you need,
    height: //height you need

Затем нам нужно запустить созданный выше рендер, используя:

Matter.Render.run(render) //render is the above created Render

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

Matter.Runner.run(Matter.Runner.create(), engine);

Это базовая настройка для создания холста в нашем приложении, где мы можем продолжать добавлять функции, добавлять формы или объекты. Одна из функций, которую вы можете добавить, - это возможность взаимодействовать с холстом и объектами на нем с помощью мыши. Это можно сделать с помощью Mouse, а MouseConstraint ниже - это код для добавления его в созданный мир.

Matter.World.add(world, Matter.MouseConstraint.create(engine, {
  mouse: Matter.Mouse.create(render.canvas)
}));

Затем, наконец, чтобы добавить формы или тела в наш мир, мы можем использовать Bodies, а затем указать фигуре, которая принимает аргументы для размещения на осях x и y холста и размера. Затем мы добавляем его на наш холст с помощью функции World.add. Итак, чтобы создать круг и добавить его на наш холст, это будет:

Matter.World.add(world, Matter.Bodies.circle(x-axis, y-axis, radius))
//world is our created world

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

Курс современного Javascript Bootcamp (2021) объясняет и дает пошаговые инструкции по работе с Canvas API.