В 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.