跑酷小游戏-总结

因工作需要，客串H5小游戏制作，非专业人士，在此仅记录游戏中遇到的各种坑。

作品：

适配

因历史原因，并没有用到vw、wh，而是采用了rem，配合淘宝的lib-flexible。在webview中，因系统字体放大或缩小导致rem != root font size，需要获取root font size以及rem真实大小，做字体放大处理，大致代码如下：

// 适配webview字体变大或变小的情况
function adapt(designWidth, rem2px){
    var d = window.document.createElement('div');
    d.style.width = '1rem';
    d.style.display = "none";
    var head = window.document.getElementsByTagName('head')[0];
    head.appendChild(d);
    var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
    return defaultFontSize
};
var deafultFontSize = adapt(); // 获取1rem的真实大小
// 获取 root font size
var currFontSize = parseFloat(document.documentElement.style.fontSize.replace('px', ''));
var realSize = currFontSize * (currFontSize / deafultFontSize); // 比例调整root font size
document.documentElement.style.fontSize = realSize + "px";

webview调试

webview中，因app禁用了localstorage，导致自家DC埋点库无法运行。调试过程涉及真机（webview）调试，参考文章如下：

• 谷歌远程调试官方文档
• safari调试
• ios模拟器调试
• ios模拟器安装APP；

Android Chrome的chrome://inspect远程调试需满足以下条件：

• 翻墙
• 谷歌账号一致
• 真机开启Debug模式
• App开启Webview调试

IOS Webview调试暂未成功，可考虑采用XCode Simulator模拟器，文档如上。

其他

• <audio autoplay loop>：autoplay无法在手机自动播放，需要用户行为事件触发。

• 因游戏资源过大，部分资源需要提前加载，对应专门的loading页，图片加载统计可考虑：

  var image = new Image();
  image.onload = () => {};
  image.onerror = () => {}; 

• 转盘转动效果可直接利用CSS属性：rotate(xdeg)，不考虑算子，可直接用ease-in-out；简单粗暴。

• facebook分享调试，因调试环境涉及重定向，导致分享结果不准确，可在此强制刷新。

• webview无法调用window.reload等过程，页面数据应通过ajax更新。