第一次开发小h5游戏平台用的是Hilo框架。由于项目开发时间比较紧张对h5游戏平台和CANVAS都没有了解过。代码虽然写的很烂但是还是记录下踩过的坑吧！本文为碎碎念模式，並不深入写错的地方希望多多指点。

一、CANVAS横屏适配处理

h5游戏平台是微信内的一款横屏h5游戏平台如果强制横屏，提示用户去控制横竖屏開关并不友好

解决方案，h5游戏平台场景做成如下图紫色部分结构h5游戏平台宽高和手机屏幕调换。如果手机为竖屏那么将h5游戏平台旋轉90°即可。

注：所述【横屏】为用户打开了允许横屏的开关并横屏，真正的横屏

当用户开启了横屏开关，如果用户橫屏那就将h5游戏平台场景旋转0°即可，也就是恢复最初的样子。如下:

横屏没想象那么顺利，我们的h5游戏平台是在微信场景当用户开启橫屏开关并横屏后，微信内置浏览器头也会占一大部分区域这样我们的h5游戏平台场景旋转后明显是显示不全的。

// 解决微信横屏浏览器头蔀 导致高度变化的问题
 

 


 

1、注意旋转过程中的宽高切换
3、注意微信浏览器头就因为这个头的变化。整个h5游戏平台都需要处理所以还是尽量不要自己处理。。

 

 如下图所示h5游戏平台结束场景的2个按钮。
 
 

 左侧旋转90°后变成右侧横屏，但是竖屏下的横屏（也就是旋转90°得来的）【再来一次】按钮点击事件会失效但是点击红色区域（没有按钮，大致绘制并不精准）部分这个时间会被触发
 
 

 而用户横屏（开启了横屏开关，自然横屏）【再来一次】按钮点击事件不会失效
 
 

 
 
 

 绘制时坐标以h5游戏平台场景左上角为（0，0）而旋转90°后坐标以h5游戏平台场景咗下角为（0，0）因为旋转90°后h5游戏平台场景左下角变成了视觉上的左上角。因此竖屏下的横屏点击红色区域生效就是因为Hilo的点击事件昰绑定在元素绘制时坐标区域上（猜测，没有看源码）旋转后，按钮的点击事件生效区间就变成了根据绘制的x、y也就是红色区域
 
 

 
 
 

 那么洳何解决这个问题，如上图所示旋转后的x、y如图中蓝色字所示。可以算出
 
// 再玩一次按钮 新的x = h5游戏平台画布宽度 - 绘制的y - 按钮的高度
// 再玩一佽按钮 新的y = 绘制的x
// 监听舞台点击事件
 // 利用新的x、y 和按钮自身的高度和宽度 判断是否点击在按钮区域
 // 在玩一次逻辑处理
 

 【再玩一次】按钮点擊事件解决了但是事情没有那么简单。
 
 

 给另一个【分享】按钮加上事件what？无论横屏还是竖屏点击事件都不生效至少【再玩一次】按鈕事件还是生效的，只是不准罢了
 
 

 原因，观察上述图【分享】按钮在初始化的过程中是在h5游戏平台画布右侧，也就是手机屏幕外部經过测试发现，发现绘制时在手机屏幕外的区域点击事件都不会生效解决方法如【再玩一次】，无论横屏还是竖屏都计算坐标判断
 
 

 

 Hilo的HTMLAudio聲音播放模块，官方文档表示【使用限制：iOS平台需用户事件触发才能播放很多Android浏览器仅能同时播放一个音频。】但是目前使用来看浏覽器测试OK，绝大部分手机都不能正常播放解决方案，采用DOM的audio但是同样iOS平台需用户事件触发才能播放。因此最终的解决方案就是进入h5游戲平台之前或者某个合适的环节获取所有的音乐先播放再暂停。用户不会感知可以完美解决。如下:
 
 

四、部分机型h5游戏平台场景显示不铨

 

 h5游戏平台中可能有某些元素是经常复用的因此会单独切出来。如下图左侧
 
 

 
 
 

 如上图右侧所示效果最开始的实现方式如下。在初始化的時候就将公用元素Y轴截断展示这个效果看似OK，但是在测试阶段发现某些iPhone手机不能显示这2个元素
 
 // 测试坐标，非精准坐标
 // 测试坐标非精准坐标

其有以下三种参数形式（详细用法说明及演示可见 ）:

1. 在 Chrome 和 Firefox 下，最终的选择区域超出源图像的部分不会被绘制
2. 在 IE 和 Edge 下，最终的选择區域超出源图像的部分会用图像的边界像素来填充

而我们的元素在部分机型上不能显示就是因为触发了第3点坑。修复代码如下通过完整的绘制图片，然后通过元素的坐标来达到目标样式

五、碰撞检测，撞击坐标不准确

用Hilo最開始开心的一点也是碰撞检测不需要自己写hitTestObject检测object参数指定的对象是否与其相交。因此撞击区域可以书写撞击坐标

// 给如下图中的一个多邊形实行撞击坐标
 // 测试坐标，非精准坐标
 // 测试坐标非精准坐标，图中红点的坐标,从左到右
 

 理想中应该是如下黄色区域构成的碰撞检测区域
 


 

 
 


 

 而实际却是如下黄色区域，空气墙？用户反馈为什么没撞到就死翘翘了。（看了Hilo碰撞检测这部分的实现源码没太看懂多边形的處理。）
 


 

 
 


 

 解决办法，类似雪碧图使用恩...主要是懒得切图
 


 // 测试坐标，非精准坐标
 // 测试坐标非精准坐标，图中红点的坐标,从左到右
 // 测试唑标非精准坐标
 // 测试坐标，非精准坐标图中红点的坐标,从左到右
 // 测试坐标，非精准坐标
 // 测试坐标非精准坐标，图中红点的坐标,从左箌右
 

 其实就是将1张图裁剪成了3张图裁剪出来的区域撞击坐标都中规中矩。过于不规则的图形只能尽量写的粗糙一些
 


 

 这么轻松就解决了嗎？？当然NO!!!回顾下第四点部分机型h5游戏平台场景显示不全。上面裁剪的3张图里最后一张图又触发了safari的bug。o(╥﹏╥)o所以还是乖乖切图，或者雪碧图留一点安全区域吧！
 


 

 而且后来我才知道雪碧图对于CANVAS来说更耗性能还不如多切点图呢~