戏葡萄原创专稿，未经允许请勿转载

HTML5游戏有哪些做法？在很多人眼里，H5游戏对于他们可能还只是像《围住神经猫》那样简单的样子——产品形态简单、推广方式简单、盈利模式也很简单。

在白鹭时代（Egret）今天主办的HTML5游戏大会上，来自全国各地大大小小的厂商，给出了不同的答案。

关于推广方式（入口），现在有了QQ浏览器、QQ空间、360手机助手、百度贴吧、猎豹浏览器等；关于盈利模式，也有广告变现、游戏内购等；我们会在其他文章中盘点各路观点。

这里先介绍现在HTML5游戏研发上的一些“进化形态”。

消除游戏《开心豆豆》

《开心豆豆》于5月上线，墨麟旗下鱼之乐研发，已在腾讯玩吧平台上面运营了半年。基本上两周一个迭代。

《开心豆豆》针对12-65岁的女性用户，风格是日系Q版，核心玩法有三个：消除、闯关、手势效果，后者是玩法上的一个小小的创新。这个游戏看上去很像传统的三消类游戏，例如《糖果粉碎传奇》、《开心消消乐》，但实际上它是一款连线消除游戏。闯关模式有主线过关、大关套小关、三星完美闯关等设定。手势效果是新版本的设定，在同样的消除不同的连线方式可以产生不同的特效恶搞。此外游戏还设置了一些障碍物，比如巧克力奶油冰块等等。

该游戏在社交环节中也做了一些尝试。首先是好友邀请，好友之间可以互相赠送体力和道具。到5月23日为止有近400万的玩家，其中80%的活跃用户是女性玩家。未来还会加入主角系统，以美食为主题。主角可以在闯关的过程中收集食材，然后在甜品屋里制做甜品，再参加美食竞技。

卡牌对战《口袋江湖》

墨麟鱼之乐今天展示的第二款游戏，之前的形态叫做《Q将水浒》，最早出现在QQ浏览器的游戏平台上。当时这款游戏是一款策略养成类游戏，混杂了社交、建设等元素。现在的《口袋江湖》是在《Q将水浒》基础上，把策划的数值和体系移植过来，把IP从水浒改为武侠题材，再强化了休闲策略的设定而成的。游戏里面是标准的武侠设定，玩家可以建设门派、招募弟子，称霸武林等。

游戏的界面不像传统卡牌，而是有着自己的主城。主城里面所有的建筑都有自己的功能，需要玩家自己去升级。游戏的战斗是回合制的，双方各出5个人，进行复杂的战斗，而不是撞卡式的。所有的英雄有自己的行军速度、攻击范围、攻击招数等。游戏还设定了资源战、擂台赛等体系，玩家之间还可以互相占领主城，而不是像《刀塔传奇》、《我叫MT》等类似于单机的设定。这样就突出了玩家之间互动，仇人和仇人之间有互动，邻居和邻居之间有互动。

冰河工作室《少女战机》

《少女战机》是一款纯HTML5游戏。人设方面，游戏以机娘为中心，将少女的萌和机甲的燃相结合，让众多的宅男得以找到自己喜欢的那一款机娘。战斗模式方面，游戏保留的经典的关卡模式，通过设置出一些无尽关卡，让老玩家们得以延续他们的挑战。游戏也打造了一个斩首模式，在里面，玩家需要通过自己对关卡的了解，运用智慧挑战实力悬殊的BOSS。当玩家获得一定的成长之后，会需要更多的挑战来证明自己的实力，逃生模式就是为此而设计的。在逃生模式中，玩家将要在如潮的弹幕中生存下来。

《萌呆了三国》

指上缤纷研发一款三国题材的卡牌游戏。将策略游戏的玩法规则和Q版画风的幽默诙谐深度融合。

《觉醒》

中娱在线研发，一款横版动作卡牌角色扮演类游戏。“我们精心设计了近百种不同的武器和技能，让玩家在游戏里面能非常自由的收集技能，体验组合搭建技能的乐趣。然后再围绕着这个核心创新点，我们采用情感体验式的设计理念，精心开创了一个相关的成长体系以及相关的一个玩法。然后再配上我们由顶级美术打造的一个一流的远古游戏世界，能让玩家从视角到其他游戏体验都能获得一流的游戏享受。最后我再确定以及肯定的告诉大家，这就是H5游戏。”

《刀塔战神》

未来人科技研发，横版回合制战斗，九宫格策略布阵的游戏。“其实玩法上说白了没有什么太大的创新，但是我们在美术风格上确实做了很用心的一些设定。”“我们的核心的玩法，简单来说就是让玩家去积累一定的游戏内资源，然后去获取，去购买更多的武将，然后更高星别的武将。核心玩法的策略性上主要体现在九宫格布阵。”“训练场稍微给玩家开放了一点点类似于挂机类的玩法。你可以不用在线，你把它挂在上面，它就会慢慢的升级。然后这是每天会开的一个Boss战。”

《狂挂传奇》

梦启科技的一款放置类RPG游戏，也就是挂机游戏。核心玩法上，游戏有仇杀这种创新，也引进来类似传奇的红名机制，用这种新的交互方式来增加活跃。在挂机的过程中，玩家还可以通过PK来爆掉其他玩家的装备，游戏也会在之后增加爆装的机会和条件。爆掉别人的装备之后也会产生红名，上恶人排行榜，吸引别人PK。第二个系统是美人。不同的美人有不同的属性，有的美人适合打装备，有的美人适合PK，有的美人适合大BOSS。多个美人可以组成美人阵法，对玩家属性是一个很大的提升。最后一个核心是跨服。现有的挂机类游戏可以看到，出现了页游之前的快速开服、快速洗服的现象。这样会造成当服的用户活跃度不高，跨服就用来缓解这种问题。

《海国战纪》

山水地科技的一款重度策略类游戏，采用F2P加道具收费的模式。开发周期前后陆续加起来将近一年。这款游戏13年初已经初见成品，但当时的硬件无法支撑，因此项目停滞了一段时间。到了今年年中，游戏重新进行了一些开发，并且已经在手Q空间上线。

游戏的核心玩法与其他策略游戏类似，但也有航海题材的一些特色，包括航海、冒险、贸易、国战、占领城市等等。首先，游戏拥有一张非常巨大的地图，玩家可以在拥有180座城市的世界地图里航行，在航行的过程中还会遇到风暴等各种随机探险事件。游戏界面左下角的舵用来控制航行方向，玩家靠扔骰子的结果确定在海上航行的天数。

其次，游戏针对不同的地区设计了不同的建筑风格，如果玩家在加勒比诞生，那么建筑风格就为海盗风，此外还有英格兰、奥斯曼、华夏等风格。并且这些建筑风格还会发生变化，玩家的游戏行为会影响城市的发展度，发达的地区建筑风格也会相应的更加华丽。

再次，航海题材离不开航海贸易，每个城市都拥有自己的特色商品，这与另外两个系统相配合。第一，每个城市的商品除了可以低买高卖用来盈利以外，这些商品本身可以作为材料制造装备和恢复体力的食物。而这个制造系统又与游戏中重要的国战系统相联系，游戏中一共有四个国家，四个国家之间会因为争夺资源而产生冲突，如果城市被敌对国占领，玩家就无法购买这座城市的特色材料。

游戏的PVE基础系统为探险模式，呈现为第一人称视角的推图模式。探险过程中玩家会遇到包括战斗、好友互动、获得宝箱物品等多种事件。玩家可以在每个城市中参与到主线任务、日常任务和不同的随机委托等多种形式的任务。

PVP方面游戏提供多种战斗模式：海上劫掠遭遇战、城市切磋战、城市占领、竞技场天梯战与阵型战斗策越。

游戏中最重要的就是异步实时多人国战，每个国家的玩家不管等级高低可以随时航行到正在发生国战的城市进行战斗，每个人都可以做出自己的贡献。国战又与游戏中的选举与官职系统相结合，尤其是当玩家被选举为国王时，他会产生强烈的社交付费需求。

游戏中还包括卡牌抽取，并且进行了一定的创新。卡牌抽取分为很多类，通过人民币、红水晶、黄水晶等不同材料抽取，获得的英雄具有不同的功能，红水晶抽取的英雄善于PVE，黄水晶抽取的英雄善于贸易，每一种水晶都与玩家的游戏行为相结合，战斗时获得黄水晶，贸易获得红水晶等等。此外，每张卡牌都有自己的技能系统，并且可以互相继承，解决了传统卡牌游戏的缺陷。

《小鸟情人》

山水地科技一款休闲社交游戏，包含宠物养成、牧场捕捉、战斗策略、配对交互四大系统，女性用户占60%以上。

游戏有以下核心玩法：一、配对，玩家可以为自己的小鸟向朋友的小鸟提亲、接受提亲、共同孵化新的小鸟。二、训练，玩家可以对小鸟进行训练和留学。三、入侵，玩家可以入侵猎场或帮助好友反抗。

游戏拥有很强的社交性，具有公会和结婚的功能，有利于增加收入和提高用户留存率。

游戏的盈利模式为通过群体PVP副本、群体PVE副本以及个人天梯赛等模式刺激玩家不断提升小鸟的战斗力。

《全民挂机》

有爱互动的一款放置类RPG网游，是由文字MUD游戏演化而成，具有实时RPG离线系统与离线挂机训练系统。游戏玩法包括竞技PVP、商城道具、装备强化、多人团战以及工会等，游戏中打怪、经验升级、获得金币、掉落装备都是自动的，游戏行为会在玩家离线后继续进行。

如今大部分人游戏的主要工具已经移动为主，可以预见的是这样的趋势在往后还会加剧。在现代人的生活中很大一部分碎片化的时间都是可以利用手机来进行游戏娱乐。然而游戏虽然多，但远远不够。85%的玩家对于游戏的选择就是三天前疯狂玩游戏。三天后又开始一个个卸载。玩到最后都会发现，多数游戏走到最后，都是有着同样的命运：少用——雪藏——卸载。玩家需要新鲜感，但新鲜感可以维系的时间，少之又少。

在这样的情况下，掌锋科技创始人开始思考，什么样的产品可以在游戏有趣的基础上又给玩家带来源源不断的新鲜感同时让玩家不用反复安装呢?基于这些思考，掌锋科技瞄准了Html5游戏。

Html5游戏在国内萌芽之初掌锋科技就已经涉猎该领域，随着移动端Html5技术的越发成熟 ,“5玩对战”作为全球首创手游竞技场的形式出现并首度在移动端为玩家带来了竞技游戏。“5玩对战”承载海量优质Html5游戏，基于Html5游戏无端化的特点，点开即玩，无需搜索为所有热爱手游的玩家带来了极大的便利。可是如何让Html5游戏不单单只是通过浏览器让玩家短暂接触，而是让所有人都可以参与游戏产生互动呢。我们来看看5玩对战是怎么做的。

5玩对战在游戏平台引入PK的概念。正是这个概念，让整个Html5游戏 “活”了起来。5玩对战利用玩家求胜心理设置奖励挑战模式。玩家就自己喜欢或擅长的游戏向朋友或陌生人发起PK，并设置一定的PK悬赏币吸引对方接受PK，挑战成功，刷新游戏排名，获得奖励，成为炫耀资本。5玩对战对用户的心理需求把握得当。譬如“5玩对战”引入的公聊社交系统，玩家在公聊里炫耀比分，讨论战术，邀请好友加入游戏，有效地让玩家一直处于游戏心理的循环状态，游戏乐趣从游戏本身转移到与人竞技的挑战欲上。同时，由于玩家的日益新增，游戏分数与排名的时时刷新。大大的延长了游戏的生命周期。有句老话讲“人与人斗其乐无穷，玩家相互竞争心态也是玩家选择5玩对战最大的原因之一。 5玩对战的神奇就在于它为所有的单机游戏架构了一个网游的端口，把单人游戏变成多人游戏，把单一形式变成多样形式，满足玩家的双重需要，便捷的传播拉低获客成本，放大传播效应。

5玩对战将众多具备相同爱好的人迅速聚集在一起，也给了陌生社交一个冠冕堂皇的理由。正如大家因为“约炮”选择了陌陌，因为“圈子”选择了微信，而“5玩对战”要做的就是让玩家因为“游戏PK”选择“5玩”。

html5行业虽然门槛较低，但如果没有创新意识，将注定成功不了。5玩对战之所以能被市场认同，在于给了大家一个全新的选择，也很有诚意地为用户创建了一个获得快乐、结交好友的平台。目前5玩对站致力于吸收更多精致的中重度手游，壮大html5游戏社区。 5玩对站作为html5逐渐成熟的一个标志性产物，它的未来绝对值得期待。

荐：使用NSDT 编辑器助你快速搭建3D应用场景

事实是，自从引入JavaScript WebGL API以来，现代浏览器具有直观的功能，使它们能够渲染更复杂和复杂的2D和3D图形，而无需依赖第三方插件。

你可以用纯粹的JavaScript开始你的网页游戏开发之旅，如果你是初学者，这可能是最好的学习方式。但是，当有这么多被广泛采用的游戏引擎可供选择时，为什么要重新发明轮子呢？

本指南将探索排名前六位的 JS/HTML5 游戏引擎，按 GitHub 星级的数量排名，并引导您了解如何使用它们。

我们将介绍：

• Three.js
• Pixi.js
• Phaser
• Babylon.js
• Matter.js
• PlayCanvas

1. Three.js

Three.js 是最受欢迎的 JavaScript 库之一，用于使用 WebGL 在 Web 浏览器中创建和动画 3D 计算机图形。它也是为网络浏览器创建 3D 游戏的绝佳工具。

由于 Three.js 基于 JavaScript，因此在 3D 对象和用户界面（如键盘和鼠标）之间添加任何交互性相对容易。这使得该库非常适合在网络上制作 3D 游戏。

优点

• 易于学习：Three.js最重要的优点——除了它能够很好地执行复杂的渲染——是它很容易上手。
• 大量示例：由于其受欢迎程度，有无数示例可以帮助您入门。以下是一些示例项目，展示了 Three.js 的可能性：

• 大型社区：Three.js在GitHub上有87.1k星和33.4k分叉。它拥有大量用户和庞大的开发人员社区，他们使用并为库创建各种第三方工具和扩展
• 良好的文档：强大的文档通常是强大库的重要指标，而 Three.js 拥有出色的文档
• 出色的性能：Three.js 比我使用过的其他库具有性能优势
• PBR渲染：Three.js内置了基于物理的渲染（PBR），使渲染图形更准确

缺点

• 没有渲染管线：这使得许多现代渲染技术无法/不可能用 Three 实现.js
• 不是游戏引擎：尽管 Three.js 拥有创建游戏的基本功能，但它不是像 PlayCanvas 和 Unity 那样提供交互性和渲染之外功能的游戏引擎。但是，可以构建 Three.js' API 来创建游戏引擎;这方面的一个例子是流氓引擎
• 面向新手：由于API迎合新手，因此隐藏了许多高级功能
• 缺乏支持：没有对空间索引、精确光线投射或视锥剔除的内置支持，并且在复杂场景中碰撞检测效率低下

三.js在行动

如果您想深入研究在网络上创建简单或复杂的 3D 对象，Three.js 是首选库。它的主要优势包括庞大的人才用户社区以及丰富的示例和资源。

Three.js是我合作的第一个3D动画库，我会推荐给任何刚开始游戏开发的人。

让我们创建一个简单的旋转几何体来演示 Three.js 可以做什么：

import * as THREE from 'js/three.module.js';

var camera, scene, renderer;
var geometry, material, mesh;

animate();

创建一个函数来设置使用 Three 运行演示动画所需的一切.js：init

function init() {
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}

接下来，创建一个函数，以使用所需的运动类型对对象进行动画处理：animate

function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera );}

最终结果应如下所示：

2.Pixi.js

如果您正在寻找一个JS库来创建支持跨平台应用程序的丰富交互式2D图形，那么Pixi.js就是您的最佳选择。这个HTML5创建引擎使你能够在没有WebGL API知识的情况下开发动画和游戏。

优点

• 快速性能：就像三.js，小精灵.js非常快
• 大型社区：Pixi.js 在 GitHub 上拥有 38.2k 颗星和 4.7k 个分支，拥有庞大的用户/开发人员社区
• 多平台支持：也像Three.js，Pixi.js支持多个平台，如Web和本机系统，如Android，iOS，Windows和mac
• 简单的API：API对于初学者来说很容易理解
• 支持 WebGL 和 Canvas 回退：Pixi.js 使用 WebGL 渲染器，但也支持 Canvas 回退

缺点

• 过于复杂：根据我的经验，Three.js比Pixi更容易上手.js
• 不是一个完整的解决方案：Pixi.js自豪地只支持渲染器

Pixi.js在行动

在大多数情况下，Pixi 是一个不错的选择，尤其是在创建面向性能的 3D 交互式图形并考虑设备兼容性时。Pixi在WebGL失败的情况下对Canvas回退的支持是一个特别诱人的功能。

让我们构建一个简单的演示来了解 Pixi.js 的实际应用。使用以下命令或 CDN 将 Pixi.js 添加到项目中：

npm install pixi.js

或 CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js" ></script>

创建脚本文件并添加以下代码：

import * as PIXI from 'pixi.js';

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader.add('jumper', 'jumper.png').load((loader, resources) => {
const bunny = new PIXI.Sprite(resources.bunny.texture);
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

bunny.anchor.x = .5;
bunny.anchor.y = .5;

app.stage.addChild(bunny);

app.ticker.add(() => {
    bunny.rotation += .01;
});

});

结果应如下所示：

3. Phaser

Phaser 是一个跨平台的游戏引擎，使您能够创建基于 JavaScript 和 HTML5 的游戏，并为许多平台进行编译。例如，您可能决定使用第三方工具将游戏编译为 iOS、Android 和其他本机应用程序。

优点

• 结构合理：众所周知，移相器具有精心设计的结构
• TypeScript 支持：该库支持使用 TypeScript 进行游戏开发
• 专注于游戏开发：Phaser主要是一个游戏开发引擎——而且是一个很好的引擎。
• 大型社区：虽然没有前两个库那么大，但 Phaser 在 GitHub 上拥有 33.2k 星和 6.9k 分叉的庞大社区
• 插件很多：Phaser支持大量的插件。这包括相位器-物质-碰撞、导航网格、移相器输入和光滑的 ui 插件，仅举几例
• WebGL和Canvas支持：Phaser支持WebGL，并启用了Canvas作为后备

缺点

• 构建大小：桌面版 Phaser 的构建大小非常庞大
• 对移动开发的支持不佳：创建本机移动应用程序需要使用Cordova或其他第三方框架
• 状态管理：开始使用 Phaser 的状态管理器可能有些困难

移相器在行动

Phaser 非常适合开发跨平台游戏应用程序。它支持广泛的插件，并且使用Phaser构建游戏的大型开发人员社区使开始使用该框架变得容易。

让我们使用 Phaser 构建一个基本应用程序。首先，将 Phaser 安装为 Node 模块或通过 CDN：

npm install phaser

或：

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>

接下来，将一些默认配置传递给您的 Phaser 引擎：

const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: "arcade",
arcade: {
gravity: { y: 200 },
},
},
scene: {
preload: preload,
create: create,
},
};

const game = new Phaser.Game(config);

创建一个预加载函数以加载默认静态文件：

function preload() {
this.load.setBaseURL("https://labs.phaser.io");
this.load.image("sky", "assets/skies/space3.png");
this.load.image("plane", "assets/sprites/ww2plane.png");
this.load.image("green", "assets/particles/green.png");
this.load.image("astroid", "assets/games/asteroids/asteroid1.png");
this.load.image("astroid2", "assets/games/asteroids/asteroid1.png");
this.load.image("astroid3", "assets/games/asteroids/asteroid1.png");
}

最后，定义一个函数来显示新创建的游戏：create

function create() {
this.add.image(400, 300, "sky");
this.add.image(700, 300, "astroid");
this.add.image(100, 200, "astroid2");
this.add.image(400, 40, "astroid3");

const particles = this.add.particles("green");

const emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: "ADD",
});

const plane = this.physics.add.image(400, 100, "plane");
plane.setVelocity(100, 200);
plane.setBounce(1, 1);
plane.setCollideWorldBounds(true);
emitter.startFollow(plane);
}

4.Babylon.js

Babylon.js是一个强大，简单，开放的游戏和渲染引擎，打包在一个友好的JavaScript框架中。

优点

• Playground：Babylon提供了一个Playground工具，用于在进入全面开发之前进行测试 - 并且它有很好的文档可以启动。
• 强大的社区支持：Babylon有一个论坛，里面有一个活跃的开发人员和用户的大型社区，他们非常有帮助。该框架在GitHub上有18.9k星和3k分叉
• 最新的代码库：该框架享有经常更新的代码库和活跃的第三方工具开发。官方回购文件最近于11/26/22更新
• PBR 渲染：对 PBR 渲染支持非常出色
• 信任投票：Babylon被Adobe，Microsoft等大品牌使用和支持
• 维护：错误通常会很快得到解决

缺点

• 缺乏成熟度：巴比伦于2013年首次发布，与许多竞争对手相比，它相当年轻
• 文档：引擎缺少 API 文档
• 不适合小型项目

Babylon.js在行动

许多大品牌都信任巴比伦.js作为他们选择的游戏开发引擎。Babylon Playground 是一个蓬勃发展的代码示例中心，是帮助您开始使用框架的绝佳工具。

巴比伦及其模块发布在npm上。若要安装它，请在命令行工具中运行以下命令：

npm install babylonjs --save

或者，您可以通过 CDN 将库集成到项目中。为此，请创建一个文件并添加以下代码：index.html

<canvas id="renderCanvas"></canvas>

<script src="https://cdn.babylonjs.com/babylon.js"></script>

<script src="script.js"></script>

安装后，您可以通过导入全局对象或解构场景和引擎方法来开始使用库，如下所示：

import * as BABYLON from 'babylonjs'

// OR

import { Scene, Engine } from 'babylonjs'

接下来，创建一个文件并包含以下代码：script.js

const { createScene } = require('scene.js')

window.addEventListener('DOMContentLoaded', function(){
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
window.addEventListener('resize', function(){
engine.resize();
});
});

创建一个文件并添加以下代码：scene.js

export function(){
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5,-10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0,1,0), scene);
const sphere = BABYLON.Mesh.CreateSphere('sphere', 16, 2, scene);
sphere.position.y = 1;
const ground = BABYLON.Mesh.CreateGround('ground', 6, 6, 2, scene);
return scene;
}

以下是动画外观的预览：

5.Matter.js

Matter.js是一个用于Web的JavaScript 2D刚体物理引擎。即使它是一个JavaScript物理引擎，你也可以将它与各种包和插件结合起来，创建有趣的网页游戏。

优点

• 令人兴奋的功能：Matter.js提供了许多功能，例如刚性、复合体和复合材料体、稳定的堆叠和静止、运动守恒等等

缺点

• 无CCD：Matter.js缺乏连续碰撞检测（CCD）会导致快速移动的物体穿过其他物体的问题

物质.js在行动

Matter.js 本质上是创建简单、移动的动画对象的最佳库。Matter.js是一个物理库，更关注2D对象。但是，您可以将其与第三方解决方案结合使用以创建动态游戏。

要开始使用 Matter.js在原版项目中，请下载 or matter。最小值.js从官方 GitHub 存储库打包文件，并使用以下代码将其添加到 HTML 文件中：matter.js

<script src="matter.js"></script>

但是，如果您使用的是捆绑器，例如 Parcel，则可以通过以下命令将软件包安装为 Node 模块：npmyarn

npm install matter-js
//OR
yarn add matter-js

以下是使用内置渲染器和运行器入门的最小示例：

// module aliases
const Engine = Matter.Engine;
const Render = Matter.Render;
const World = Matter.World;
const Bodies = Matter.Bodies;

// create an engine
const engine = Engine.create();

// instantiating the renderer
const render = Render.create({
element: document.body,
engine: engine,
options: {
wireframes: false,
showAngleIndicator: false,
background: "white",
},
});

// create two boxes and a ground
const boxA = Bodies.rectangle(300, 300, 70, 70);
const boxB = Bodies.rectangle(400, 10, 60, 60);
const ground = Bodies.rectangle(300, 510, 910, 10, { isStatic: true });

// add all bodies to the world
World.add(engine.world, [boxA, boxB, ground]);

// run the engine
Matter.Runner.run(engine);

// run the renderer
Render.run(render);

你应该看到两个矩形物体掉落，然后在它们落在地面上时相互撞击。如果没有，请检查浏览器控制台以查看是否有任何错误：

6.PlayCanvas

PlayCanvas使用HTML5和WebGL在任何移动或桌面浏览器中运行游戏和其他交互式3D内容。虽然它是免费和开源的，但PlayCanvas更关注游戏引擎而不是渲染引擎。因此，它更适合创建
使用WebGL和HTML3 Canvas的5D游戏。

优点

• 游戏引擎：与其他引擎不同，PlayCanvas 是一个游戏引擎，具有您在库或框架中找不到的功能
• 开源：PlayCanvas是一个开源工具，用于强大的游戏开发
• 移动优化：游戏开发平台移动优先
• 零编译时间：引擎的零编译时间自然使过程更快
• 资产管道：PlayCanvas 使用最佳做法来决定内容的交付方式和形式
• 集成物理引擎：您可以使用强大的子弹物理引擎弹药轻松地将物理集成到游戏中.js
• 热重载：您不必每次进行更改时都重新加载浏览器
• 仅在浏览器上运行的渲染引擎：PlayCanvas具有仅在浏览器上运行的高级WebGL功能

缺点

• 付费专用项目：免费层不支持私有项目，因此所有代码和资源都公开托管
• 碰撞偏移：没有碰撞偏移
• 缺乏示例：PlayCanvas 的教程很少而且相距甚远

PlayCanvas 在行动

PlayCanvas非常适合创建小型公共项目或学校项目 - 至少，这是我使用它的目的。如果您需要更多功能和对游戏开发的更多控制，您可能需要考虑订阅高级功能。

现在，让我们使用引擎进行一些基本的渲染。第一步，从 GitHub 存储库下载包文件，并使用以下代码将其添加到项目中：

<script src='https://code.playcanvas.com/playcanvas-stable.min.js'>

接下来，使用以下代码创建一个文件并将其链接到 HTML 文件：script.js

<canvas id='canvas'></canvas> <script src='/script.js'>

现在，打开该文件并添加以下代码以实例化新的 PlayCanvas 应用程序：script.js

const canvas = document.getElementById('canvas');
const app = new pc.Application(canvas);

window.addEventListener('resize', () => app.resizeCanvas());

const box = new pc.Entity('cube');
box.addComponent('model', {
type: 'box'
});
app.root.addChild(box);

要为对象创建相机和光源，请添加以下代码：

const camera = new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(.1, .1, .1)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3);

const light = new pc.Entity('light');
light.addComponent('light');
app.root.addChild(light);
light.setEulerAngles(46, 0, 0);

app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

app.start();

上面的代码应产生以下结果：

结语

通过分解与上面列出的每个 JS/HTML5 游戏引擎相关的优缺点和用例，我希望您能深入了解哪一个最适合您想要创建的游戏或动画类型。

在大多数情况下，我建议使用 Three.js，特别是如果您正在寻找更多的渲染引擎而不是游戏引擎。由于它在开发人员生态系统中的受欢迎程度，很容易找到充足的资源来帮助您启动和运行。

如果你更关注游戏开发，我会推荐巴比伦.js因为它很简单。Babylon还具有更新的代码库和活跃的第三方开发，游乐场功能是一个很好的测试工具。PlayCanvas是一个可靠的备份选项 - 它主要是一个游戏引擎，您可以使用它来构建复杂的3D游戏。

您在游戏开发项目中使用什么游戏引擎？请在评论中告诉我们！

LogRocket：通过理解上下文更轻松地调试JavaScript错误

调试代码始终是一项繁琐的任务。但是，您越了解错误，就越容易修复它们。

LogRocket 允许您以新颖独特的方式理解这些错误。我们的前端监控解决方案跟踪用户与 JavaScript 前端的互动情况，使您能够准确了解用户导致错误的行为。

LogRocket 记录控制台日志、页面加载时间、堆栈跟踪、带有标头 + 正文的慢速网络请求/响应、浏览器元数据和自定义日志。了解 JavaScript 代码的影响从未如此简单！

原文链接：推荐前 6 名 JavaScript 和 HTML5 游戏引擎