Edeity's Blog

跑酷小游戏-总结

因工作需要,客串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)调试,参考文章如下:

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更新。