小游戏是使用 H5 技术搭建，保留了H5中游戏相关的技术，而在此基础上又追加了小程序部分特性能力。下面小编给大家介绍h5游戏怎么开发，一起来看看吧。
h5游戏开发的方法
小游戏的运行环境其实是微信的原生环境，游戏的 JavaScript 代码并不是通过浏览器来执行的，而是通过图中 JS VM 层独立的 JavaScript 引擎来执行的。 在 Android 平台使用 Google 的 v8 引擎，而在 iOS 上则使用苹果的 JavaScript Core 引擎。
从技术角度来说，微信小游戏是微信小程序的基础上添加了游戏库 API。小游戏只能运行在小程序环境中，所以小游戏既不是原生游戏，也不完全等同于 HTML5 游戏。
但实际上小游戏面向的就是 HTML5 游戏开发者，为了能够让 HTML5 游戏可以尽可能低成本地移植，小游戏尽可能复用了 WebGL、JavaScript 等源自浏览器的 HTML5 技术。
可以说小游戏是使用 HTML5 技术搭建，具有原生体验的微信内游戏产品，它保留了H5中游戏相关的技术，而在此基础上又追加了小程序部分特性能力。
微信中H5浏览器内核容器的方案和 HTML5 标准是两码事，但又有共通之处。
如果你一旦使用了既超出引擎 API、又超出微信游戏容器 API，但是符合 HTML5 标准的代码，比如来个 CSS，来个 DOM，那么就无法运行在小游戏里面。
可以理解为定制修改过的浏览器，把延伸功能、渲染、存储用JS脚本绑定上来，所以说小游戏实际运行在Runtime环境中，而开发中的调试环境主要是网页浏览器，它们的内存和性能限制不一样，所以要尽早跑在手机上，尽量暴露潜在问题。
H5游戏开发的流程
H5小游戏主要由HTML5、css3 和 JavaScript这些代码类型组成。总的来说开发一款小游戏分为两种情况。
第一种是不引用游戏渲染引擎，游戏联网引擎，使用常规的开发方法，自己实现场景渲染和网络对战开发。
第二种是使用游戏渲染引擎和游戏联网引擎。
完全自主研发
第一步：拟定游戏开发方案，设计游戏UI图片。游戏开发方案就是确定要开发什么样的游戏，达到什么样的效果。设计游戏UI图片可以使用相关软件如PS/CAD等。
第二步：搭建游戏前端框架游戏场景画面渲染架构设计。使用HTML5和CSS3设计游戏场景的架构，封装好UI层处理的接口，待游戏逻辑开发时，需要要调用接口即可操作UI显示效果。
第三步：游戏逻辑处理架构设计和实现。常用的软件设计模式都是MVC模式，就是UI、业务逻辑和数据控制都是分开来的，使用JavaScript实现游的逻辑控制和游戏数据存储。设计一套框架，同样以接口的形式调用，在设计一套把UI和游戏逻辑联系在一起的程序。
第四步：游戏网络对战服务器搭建和服务器程序架构设计与实现。上一步把基本游戏逻辑都实现了，但是毕竟是互动游戏，要实现网络通信那还得设计一套服务器通信程序，用于游戏实现网络对战功能。服务器程序开发有多重选择，这里就根据开发者自己决定。
第五步：游戏客户端与服务端联调。开发好服务模块，要确保游戏运行的稳定性和逻辑的正确性，需要花一定的时间进行联调工作。
使用引擎工具
第一步：拟定游戏开发方案，设计游戏UI图片，这里和前面的一样。
第二步：使用游戏渲染引擎开发工具开发游戏逻辑。不需要开发者关心游戏的界面是如何渲染的，开发者只要关心游戏实现的逻辑，对应游戏画面渲染可直接调用引擎接口来实现画面效果。
第三步：游戏联网联调。
H5游戏开发的注意事项
1、引擎的选择。目前市面上比较流的H5引擎就是egret和layabox了，传说中layabox的性能要优于egret，由于egret的工具更加完善一点，所以当初选择了egret。
但是发现开发过程中，为了方便项目的使用。序列帧动画生成工具，地图编辑器等工具都是自己开发的。所以说虽然egret工具很多，但是发现对于自己来说使用价值不大，建议大家以引擎稳定性和性能为主要考虑条件。
最简单的性能评估，就是使用两个引擎跑同样的demo看各个数据。这个demo主要要用于评估引擎的渲染性能和执行性能，比如drawcall极限测试，cacheAsBitmap极限测试，资源加载效率测试等。毕竟引擎帮我们做的最多的其实就是渲染和资源加载这一块。
2、内存的评估。其实内存的评估主要用于评估项目美术资源的使用程度，相比代码和配置占用的内存量，美术资源才是大头。这一步对于我们程序来说非常重要，因为策划不懂，美术为了效果不会去考虑美术量是否过大。
但是在我们没有经历过完整项目之前，怎么知道要做一个怎样的限制呢?很简单，需要要去看看市面上当红H5产品，F12看看他的美术资源，地图有多少格，每张多大，人物动画，技能特效等等资源有多大。基本上就可以换算出大概的内存占用量，然后再用较为低端的手机跑一跑，看看是否有浏览器崩溃的情况。
3、drawcall的评估。这一指标影响了渲染性能，直接影响你的游戏卡不卡，当然前提是你的代码逻辑没什么坑自己的地方。
简单的评估同样可以参考市面上的当红产品，看看他们最多同屏多少个角色，多少个特效，UI面板的多少。
虽然cacheAsBitmap可以减少drawcall，但是那也是用内存来换的性能，意味着如果使用不合理又会对内存带来压力，所以游戏中同屏对象的数量限制，也需要实践来进行评测。
