Matter.js是一個用JavaScript編寫的2D剛體物理引擎。此庫可以幫助您輕鬆地在瀏覽器中模擬2D物理。它提供了許多功能，例如創(chuàng)建剛體並為其分配質(zhì)量、面積或密度等物理屬性的能力。您還可以模擬不同類型的碰撞和力，例如重力摩擦力。

Matter.js支持所有主流瀏覽器。此外，它也適用於移動設(shè)備，因為它可以檢測觸摸並具有響應(yīng)能力。所有這些功能都使其值得您投入時間學(xué)習(xí)如何使用該引擎，因為這樣您就可以輕鬆創(chuàng)建基於物理的2D遊戲或模擬。在本教程中，我將介紹此庫的基礎(chǔ)知識，包括其安裝和用法，並提供一個可運行的示例。

安裝

您可以使用NPM之類的包管理器通過以下命令安裝Matter.js：

npm install matter-js

您還可以從CDN獲取庫的鏈接，並像這樣直接將其包含在您的項目中：

<!-- CDN鏈接 -->

Matter.js經(jīng)常發(fā)布更新，這可能需要您對代碼進行一些小的修改才能使其正常工作。本教程中的示例基於0.18.0版本。

一個基本示例

學(xué)習(xí)Matter.js的最佳方法是查看一些實際代碼並了解其工作原理。在本節(jié)中，我們將創(chuàng)建一些物體，並逐行介紹所需的代碼。

const Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

const iEngine = Engine.create();
const iRunner = Runner.create();

const iRender = Render.create({
  element: document.body,
  engine: iEngine,
  options: {
    width: 800,
    height: 400,
    wireframes: false,
    background: "white"
  }
});

const boxA = Bodies.rectangle(400, 200, 80, 80);
const ballA = Bodies.circle(380, 100, 40, 10);
const ballB = Bodies.circle(460, 10, 40, 10);
const ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

Composite.add(iEngine.world, [boxA, ballA, ballB, ground]);

Render.run(iRender);

Runner.run(iRunner, iEngine);

我們首先為項目中可能需要的全部Matter.js模塊創(chuàng)建別名。

Matter.Runner模塊使您可以訪問遊戲循環(huán)，以便連續(xù)更新引擎和您的世界。

Matter.Composite模塊允許您創(chuàng)建物體的集合、約束或其他復(fù)合對象。一個複合體可以包含單個物體或整個模擬。

下一行使用Matter.Engine模塊的create([settings])方法創(chuàng)建一個新的引擎。類似地，我們還創(chuàng)建了一個新的運行器和一個新的渲染器。上面方法中的settings參數(shù)實際上是一個鍵值對對象，用於覆蓋與引擎相關(guān)的某些屬性的默認值。對於我們的示例，我們已將所有內(nèi)容保留為默認值。

例如，您可以控制世界中所有物體的全局時間縮放因子。設(shè)置小於1的值將導(dǎo)致世界以慢動作交互。類似地，大於1的值將使世界快節(jié)奏。您將在本系列的下一個教程中了解有關(guān)Matter.Engine模塊的更多信息。

之後，我們使用Matter.Render模塊的create([settings])方法創(chuàng)建一個新的渲染器。與Engine模塊一樣，上面方法中的settings參數(shù)是一個用於指定參數(shù)的不同選項的對象。您可以使用element鍵指定庫應(yīng)插入畫布的元素。類似地，您還可以使用canvas鍵指定應(yīng)渲染Matter.js世界的畫布元素。

有一個engine鍵，您可以使用它來指定應(yīng)用於渲染世界的引擎。還有一個options鍵，它實際上接受一個對像作為其值。您可以使用此鍵為不同的參數(shù)設(shè)置值，例如畫布的width或height。您還可以通過將wireframe鍵的值分別設(shè)置為true或false來打開或關(guān)閉線框。我們還通過將背景的值設(shè)置為白色，使我們世界中的畫布顏色為白色。

接下來的幾行創(chuàng)建將在我們的世界中交互的不同物體。這些物體是在Matter.js中使用Matter.Bodies模塊創(chuàng)建的。在這個例子中，我們只使用circle()和rectangle()方法創(chuàng)建了兩個圓和一個矩形。其他方法也可以用來創(chuàng)建不同的多邊形。

創(chuàng)建物體後，我們需要使用Matter.Composite模塊中的add()方法將它們添加到我們選擇的世界上。將必要的物體添加到我們的世界後，我們只需要使用各自模塊中的run()方法運行運行器和渲染器。這基本上是您需要創(chuàng)建和渲染Matter.js世界中的所有代碼。

本節(jié)開頭處的代碼創(chuàng)建了以下結(jié)果。

常見的Matter.js模塊

Matter.js中有超過20個不同的模塊。所有這些模塊都提供不同的方法和屬性，這些方法和屬性對於創(chuàng)建不同類型的模擬非常有用，並允許您與它們交互。其中一些模塊處理碰撞，而另一些模塊處理渲染和模擬。

上一節(jié)中的示例使用了四個不同的模塊來處理渲染、模擬和物體的創(chuàng)建。在本節(jié)中，您將了解Matter.js中一些常用模塊的作用。

• Engine: 您需要引擎來更新Matter.js世界的模擬。 Engine模塊提供不同的方法和屬性，允許您控制不同引擎的行為。
• Render: 需要渲染器才能在模擬中創(chuàng)建用戶可以看到的實際物體。您可以使用它來開發(fā)支持精靈等的基本遊戲。
• Runner: 您模擬的任何世界中的物體都將不斷地相互作用。 runner模塊處理引擎和世界的這些連續(xù)更新。
• Bodies: Bodies模塊包含不同的方法，可以幫助您創(chuàng)建具有常見形狀（如圓形、矩形或梯形）的剛體。
• Body: 此模塊為您提供不同的方法和屬性，用於創(chuàng)建和操作您使用Bodies模塊中的函數(shù)創(chuàng)建的剛體。此模塊允許您縮放、旋轉(zhuǎn)或平移單個物體。它還具有允許您指定不同物體的速度、密度或慣性的函數(shù)。由於有很多函數(shù)，本系列的第三個教程只討論Body模塊中可用的方法和屬性。
• Composites: 與Bodies模塊類似，此模塊包含不同的方法，您可以使用這些方法創(chuàng)建具有常見配置的複合物體。例如，您可以使用Composites模塊中的單個方法創(chuàng)建矩形盒子的堆?；蚪鹱炙?。
• Composite: Composite模塊具有允許您創(chuàng)建和操作複合物體的各種方法和屬性。您可以在本系列的第四個教程中閱讀有關(guān)Composite和Composites模塊的更多信息。
• Constraint: 此模塊允許您創(chuàng)建和操作約束。您可以使用約束來確保兩個物體或一個固定的世界空間點和一個物體保持固定的距離。這類似於通過鋼筋連接兩個物體。您可以修改這些約束的剛度，以便桿開始更像彈簧。 Matter.js在創(chuàng)建牛頓擺或鍊式複合體時使用約束。
• MouseConstraint: 此模塊為您提供不同的方法和屬性，使您可以創(chuàng)建和操作鼠標約束。當您希望世界中的不同物體與用戶交互時，這很有用。

最後的想法

本教程旨在向您介紹Matter.js庫?？紤]到這一點，我已經(jīng)提供了庫的功能和安裝的快速概述。涉及兩個圓和一個方塊的基本示例顯示了使用該庫創(chuàng)建簡單模擬是多麼容易。

由於Matter.js有很多模塊，每個模塊都向引擎添加其自身獨特的方法，因此我已經(jīng)對一些常用模塊進行了簡短的總結(jié)。本系列的其餘部分將重點介紹更詳細地講解這些常用模塊。

這篇文章已更新，其中包含來自Monty Shokeen的貢獻。 Monty是一位全棧開發(fā)人員，他還喜歡編寫教程和學(xué)習(xí)新的JavaScript庫。

以上是Matter.js入門：簡介的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！