8个最佳免费和开源JavaScript游戏引擎和库

在过去的二十年里，Web 浏览器已经取得了长足的进步。不断改进的 Web 标准的引入以及在各种浏览器中实现它们的开发人员现在允许我们直接在浏览器中执行以前不可能或很难实现的事情。

当结合现代智能手机和计算机的所有功能和处理能力时，我们现在可以创建可以直接在用户浏览器中运行的游戏。虽然基于浏览器的游戏仍然无法与本地开发的游戏正面竞争，但我们可以在浏览器中运行中等复杂的游戏，而无需任何安装。

开发游戏是一项艰巨的任务，但幸运的是，周围有很多基于 javascript 的游戏引擎和库可以帮助您覆盖基础知识，而无需自己实现碰撞检测等常见功能。在本教程中，我们将向您介绍一些最好的免费和开源 JavaScript 游戏引擎和库，您可以在自己的项目中使用它们。

PixiJS

PixiJS是最流行的库之一，您可以使用它为您的游戏创建令人惊叹的图形。该库使用 WebGL 进行渲染并自动回退到旧平台上的画布，因此您不必担心任何事情。库中有足够多的功能可以提出令人信服的论点，您应该至少尝试一次。

以下Omar Shehata的 CodePen 演示展示了如何使用 PixiJS 创建这种烟熏效果。

使用 PixiJS，您可以支持具有修剪和旋转包装等功能的精灵表。还有一个资产加载器可帮助您加载和管理图形、字体和动画数据等内容。多点触控输入和跟踪允许您实现用户交互，例如平移和缩放。

该库还提供各种 WebGL 过滤器、着色和混合模式，以及高级文本渲染，以帮助您提供高质量的视觉体验。

了解有关该库的更多信息并了解它所提供的内容的最简单方法之一是浏览一长串展示其功能的示例。

Phaser

Phaser是另一个库，您可以使用它为手机和桌面浏览器快速创建基于html5的游戏。在提供的功能方面有很多相似之处和一些差异。例如，Phaser 还允许您使用 WebGL 和画布渲染图形。

以下Aaron Buchanan的 CodePen 演示展示了如何在 Phaser 中实现流行的 Fruit Ninja 游戏的核心功能。

该库的核心框架可免费用于商业用途，但您可以使用付费插件获得额外的特性和功能。您可以使用 javaScript 或 typescript 开发自己的游戏。

Phaser 有很多有趣的功能，例如先进的多相机支持。这基本上允许您创建可以放置在屏幕上任何位置的额外摄像机。这些相机是可滚动的，并带有抖动、闪光和淡入淡出等效果。

图像、声音、精灵表和其他资产可以加载到游戏中，并借助库中的内置预加载器轻松管理。

您会喜欢 Phaser 的一件事是它在创建时考虑到了移动性。这基本上意味着开发人员要格外注意他们添加到核心库的任何功能在移动设备上都能正常运行。

Stage.js

Stage.js库非常适合想要开发不需要复杂功能的简单 2D 游戏的人。游戏使用canvashtml5 中的元素呈现。

这是creotip使用 stage.js实现的简单井字游戏。您可以在网站的主页上找到一些更高级的示例。

虽然 HTML5canvas元素可用于创建图形和动画，但它有一些限制，使游戏开发更加困难。Stage.js 库通过为您在画布上绘制的元素实现其自己的类似dom的结构来解决此限制。它还为您处理和正确传播不同对象的不同鼠标和触摸事件。

该库带有内置的游戏循环以及快速创建基本 2D 游戏所需的其他功能。这包括操纵不同元素的大小、位置和透明度，以及监听和处理不同的鼠标和触摸事件。

MelonJS

MelonJS是一个免费的基于 JavaScript 的游戏引擎，它易于学习且功能强大，足以创建简单的平台游戏。它是一个轻量级且无依赖的游戏库，因此无需加载任何其他内容即可使其工作。您所需要的只是一个功能强大的 HTML5 浏览器。

MelonJS 使用带有画布后备的 WebGL 渲染器，就像我们的前两个库一样。它带有自己的轻量级物理实现，以确保低 CPU 要求。它还提供对精灵表和纹理以及动画管理的支持。

您可以访问鼠标和触摸事件以及系统和位图字体。还支持检测设备运动、方向和加速度计。

开发游戏后，您可以使用cordova将其变成混合移动应用程序。游戏引擎还为许多其他第三方插件提供原生集成。

Babylon.js

到目前为止，我们讨论的库和引擎都是用于创建 2D 游戏的。如果您正在寻找可以帮助您创建 3D 游戏的渲染引擎怎么办？在这种情况下， Babylon.js将是一个很大的帮助。

这是一个使用Pavel Starý的 Babylon.js 库创建的简单森林。您可以通过按箭头键在其中移动。

渲染引擎中有很多功能值得一试。有很多编辑器可以帮助您节省时间并创建基本效果。这包括一个用于快速创建和配置粒子系统的粒子编辑器，以及一个节点材质编辑器。

该库提供了许多特殊效果，例如雾、景深、镜头光晕和锐化。还有很多优化涉及硬件加速实例以及屏幕外画布等。

Three.js

每当我们在浏览器中讨论与 3D 图形或可视化相关的任何内容时，都会出现流行的Three.js库的名称。它是一个非常通用的 3D 渲染库，可以用于很多事情。这意味着它也可以用于为您的 3D 游戏渲染图形。

这是Lisa Kobrazova的 CodePen 演示，它使用 Three.js 创建了一个类似土星的行星，以展示您可以使用该库做什么。

该库提供对场景、动画、相机和对象的支持。您还可以将灯光添加到场景中，同时使其看起来像环境光、定向光或来自某个点。同样，您可以创建各种几何形状，例如立方体、球体、圆环和 3D 文本。

Three.js 库有一个庞大的活跃社区，可以在您的学习过程中一路帮助您。详细的文档和此示例页面可以帮助您了解和探索您可以使用该库做什么。

Matter.js

现在我们已经讨论了成熟的 2D 游戏库和 3D 渲染引擎，是时候在讨论中包含一些物理引擎了。

Matter.js是一个功能丰富的 2D 刚体物理引擎，您可以将其合并到您的游戏中。您可以使用它来超越您开发的任何 2D 游戏中的基本碰撞检测。它允许您为不同对象的质量和密度等物理属性指定值。

这是我创建的一个示例，向您展示如何使用 Matter.js 对任何刚体施加力。

您可以使用该库模拟很多东西，例如重力、摩擦以及弹性或非弹性碰撞。我还为此主题编写了一系列教程来帮助您开始使用 Matter.js。

Cannon.js

Cannon.js库是用于 Web 的轻量级 3D 物理引擎。该物理引擎具有多种功能，例如碰撞检测、支持不同体型和摩擦，以及铰链等约束。

物理引擎的这些功能可以与诸如 Three.js 之类的 3D 渲染库相结合，以创建一些 3D 游戏，例如由Hunor Marton Borbely创建的下面 CodePen 中显示的流行堆栈游戏。

您还可以使用其他一些替代 3D 物理引擎，例如Oimo.js，具体取决于您希望如何在游戏中开发不同的功能。Oimo.js 库在某些方面感觉与 Matter.js 相似，因此如果您已经有一些使用 Matter.js 的经验，学习它可能会更容易一些。与 Cannon.js 相比，它也相对较新。

最后的想法

令人高兴的是，我们在 Web 开发方面已经取得了这么大的进步，可以在浏览器中创建和运行游戏。但是，您应该记住，游戏开发是一项非常艰巨的任务，即使有所有这些进步和库可以帮助您。对于 3D 游戏尤其如此。