-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgame_for_parkour.html
1 lines (1 loc) · 9.26 KB
/
game_for_parkour.html
1
<!doctype html><html lang="zh-CN" class="night"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,maximum-scale=4,user-scalable=0" name="viewport"><title>Ede's Blog</title><meta name="description" content="Try to be a qualified programmer"><meta property="og:type" content="website"><meta property="og:description" content="Try to be a qualified programmer"><meta property="og:title" content="Ede's Blog"><meta property="og:site_name" content="Ede's Blog"><meta property="og:url" content="https://ede.ink"><meta property="og:image" content="https://edeity.oss-cn-shenzhen.aliyuncs.com/public/edeity_o.png"><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><link rel="mainfest" href="/mainfest.json"><link rel="stylesheet" href="/public/css/common.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_707055_4b9og9sc5lx.css"><script>!function(){var e=-1!==window.location.search.indexOf("theme=night")||"night"===window.localStorage.getItem("edeity-theme_theme"),t=-1!==window.location.search.indexOf("theme=light")||"light"===window.localStorage.getItem("edeity-theme_theme");(new Date).getHours();var n=document.querySelector("html");e?n.classList.add("night"):t?n.classList.remove("night"):n.classList.add("night")}(),document.addEventListener("DOMContentLoaded",function(){null!==document.querySelector("ol.toc")&&(document.querySelector("#nav-bar").style.cssText="display: block")})</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-M3J9QSEE2Z"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-M3J9QSEE2Z")</script><meta name="generator" content="Hexo 5.0.0"></head><body><div class="loading"></div><div id="switch" data-switch="{"toc":true,"use_pwa":false}"></div><header class="fullscreen"><div class="toolbar"><i class="iconfont icon-menu"></i></div><h1><a href="/">Ede's Blog</a></h1><div class="head-link"><a class="btn waves" href="/"><span><i class="iconfont icon-home">Home </i></span></a><a class="btn waves" href="/about/index.html"><span><i class="iconfont icon-me">About </i></span></a><a class="btn waves" target="_blank" rel="noopener" href="https://github.com/edeink"><span><i class="iconfont icon-github">Github</i></span></a></div></header><div class="some-link"><a class="btn" id="light-or-not"><i class="iconfont icon-light"></i> </a><a style="display:none" class="btn" id="up-to-top"><i class="iconfont icon-up"></i></a></div><div id="nav-bar" style="display:none"><div class="toc"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%82%E9%85%8D"><span class="toc-number">1.</span> <span class="toc-text">适配</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webview%E8%B0%83%E8%AF%95"><span class="toc-number">2.</span> <span class="toc-text">webview调试</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B6%E4%BB%96"><span class="toc-number">3.</span> <span class="toc-text">其他</span></a></li></ol></div></div><main id="content-main" class="section"><div class="list-item"><h1 class="post-title"><a id="跑酷小游戏-总结" class="article-link" href="">跑酷小游戏-总结</a></h1><div class="post-meta"><time class="meta published">Jun 14, 2018</time></div><div class="article"><div class="post-excerpt markdown-body"><p>因工作需要，客串H5小游戏制作，非专业人士，在此仅记录游戏中遇到的各种坑。</p><p>作品：</p><img class="gif" width="331" height="585" data-src="https://edeity.oss-cn-shenzhen.aliyuncs.com/2018/parkour.gif"><h3 id="适配"><a href="#适配" class="headerlink" title="适配"></a>适配</h3><p>因历史原因，并没有用到vw、wh，而是采用了rem，配合淘宝的<a target="_blank" rel="noopener" href="https://github.com/amfe/lib-flexible">lib-flexible</a>。在webview中，因系统字体放大或缩小导致<code>rem != root font size</code>，需要获取root font size以及rem真实大小，做字体放大处理，大致代码如下：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 适配webview字体变大或变小的情况</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">adapt</span>(<span class="params">designWidth, rem2px</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> d = <span class="built_in">window</span>.document.createElement(<span class="string">'div'</span>);</span><br><span class="line"> d.style.width = <span class="string">'1rem'</span>;</span><br><span class="line"> d.style.display = <span class="string">"none"</span>;</span><br><span class="line"> <span class="keyword">var</span> head = <span class="built_in">window</span>.document.getElementsByTagName(<span class="string">'head'</span>)[<span class="number">0</span>];</span><br><span class="line"> head.appendChild(d);</span><br><span class="line"> <span class="keyword">var</span> defaultFontSize = <span class="built_in">parseFloat</span>(<span class="built_in">window</span>.getComputedStyle(d, <span class="literal">null</span>).getPropertyValue(<span class="string">'width'</span>));</span><br><span class="line"> <span class="keyword">return</span> defaultFontSize</span><br><span class="line">};</span><br><span class="line"><span class="keyword">var</span> deafultFontSize = adapt(); <span class="comment">// 获取1rem的真实大小</span></span><br><span class="line"><span class="comment">// 获取 root font size</span></span><br><span class="line"><span class="keyword">var</span> currFontSize = <span class="built_in">parseFloat</span>(<span class="built_in">document</span>.documentElement.style.fontSize.replace(<span class="string">'px'</span>, <span class="string">''</span>));</span><br><span class="line"><span class="keyword">var</span> realSize = currFontSize * (currFontSize / deafultFontSize); <span class="comment">// 比例调整root font size</span></span><br><span class="line"><span class="built_in">document</span>.documentElement.style.fontSize = realSize + <span class="string">"px"</span>;</span><br></pre></td></tr></table></figure><h3 id="webview调试"><a href="#webview调试" class="headerlink" title="webview调试"></a>webview调试</h3><p>webview中，因app禁用了<code>localstorage</code>，导致自家DC埋点库无法运行。调试过程涉及真机（webview）调试，参考文章如下：</p><ul><li><a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=zh-cn">谷歌远程调试官方文档</a></li><li><a target="_blank" rel="noopener" href="http://www.saitjr.com/ios/ios-user-safari-debug-webview.html">safari调试</a></li><li><a target="_blank" rel="noopener" href="http://taobaofed.org/blog/2015/11/13/web-debug-in-ios/">ios模拟器调试</a></li><li><a target="_blank" rel="noopener" href="https://medium.com/xcblog/simctl-control-ios-simulators-from-command-line-78b9006a20dc">ios模拟器安装APP</a>；</li></ul><p>Android Chrome的<code>chrome://inspect</code>远程调试需满足以下条件：</p><ul><li>翻墙</li><li>谷歌账号一致</li><li>真机开启Debug模式</li><li>App开启Webview调试</li></ul><p>IOS Webview调试暂未成功，可考虑采用XCode Simulator模拟器，文档如上。</p><h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><ul><li><p><code><audio autoplay loop></code>：autoplay无法在手机自动播放，需要用户行为事件触发。</p></li><li><p>因游戏资源过大，部分资源需要提前加载，对应专门的loading页，图片加载统计可考虑：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> image = <span class="keyword">new</span> Image();</span><br><span class="line">image.onload = <span class="function">() =></span> {};</span><br><span class="line">image.onerror = <span class="function">() =></span> {}; </span><br></pre></td></tr></table></figure></li><li><p>转盘转动效果可直接利用CSS属性：<code>rotate(xdeg)</code>，不考虑算子，可直接用<code>ease-in-out</code>；简单粗暴。</p></li><li><p><a target="_blank" rel="noopener" href="https://developers.facebook.com/tools/debug/">facebook分享调试</a>，因调试环境涉及重定向，导致分享结果不准确，可在此强制刷新。</p></li><li><p>webview无法调用<code>window.reload</code>等过程，页面数据应通过ajax更新。</p></li></ul><div id="comment"></div></div></div></div><div class="more section"><div class="pre"><a class="article-link" href="/learn_workbox.html"><i class="iconfont icon-right"></i> <span>Workbox3初探：让离线缓存变得简单</span></a></div><div class="next"><a class="article-link" href="/code_react_redux.html">react-redux实现原理 <i class="iconfont icon-right"></i></a></div></div></main></body><footer class="section fullscreen"><div class="footer-desc">Edeink © 2015-2022 · Powered by Hexo</div></footer><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="/public/js/init.js"></script></html>