H5小游戏分享

项目背景

本文记录自己在公司内部前端组关于h5小游戏的分享。

特点

轻量，简单，基于js+canvas

1.页面适配布局

由于各个小游戏框架库都是基于canvas,当中的元素坐标基于px,所以rem方案不适用，而是按照640的屏幕去写页面，然后再等比缩放，这样其中的元素该位移多少还是位移多少，不同屏幕下，他的位移值是一样的，只不过视觉上经过放大缩小后，就适配了布局。

a.
横屏或竖屏布局后，当监测到用户手机为非期望屏幕方向时，弹层提示。

b.
写2套css,分别为元素横屏和竖屏布局，然后屏幕旋转时，暂停游戏，切换布局，再把当前数据套进去。

2.js游戏引擎

a.
createjs，pixijs，phaser
2D,支持canvas，webGL

createjs，pixijs两个元素结构 stage-container-sprite

b.
egret,LayaAir,cocos2D-js,three.js
2D,3D等中大型游戏

3.工具
制作雪碧图-texturePckageGUI
生成雪碧图+json,json中包含各个图的位置信息

骨骼动画-dragonbonesPro

（完）