HTML5游戏前端开发秘籍

我不是女神ヾ 2022-08-27 13:43 242阅读 0赞

<table style="word-wrap:break-word; margin:0px; padding:0px; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:880px; height:300px; vertical-align:top; min-height:100px; font-size:14px; line-height:1.8; color:rgb(0,0,0)"> 
 <tbody style="word-wrap:break-word"> 
  <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
   <td style="word-wrap:break-word; margin:0px; padding:0px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; vertical-align:top"> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075515e87vrd1rnpfmezo0.jpg" width="630" alt="20140416174649897-630x360.jpg" title="20140416174649897-630x360.jpg" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏，虽然还有很多不足，但其中使用的一些技术与技巧还是很有必要为大家分享出来，方便大家用秘籍打通各种关卡创造出更多更好的HTML5游戏。(本秘籍主要讲述使用HTML + CSS技术方面)</p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075516uexeqjffbbrwwbt1.png" width="590" alt="20140421171135767.png" title="20140421171135767.png" style="word-wrap:break-word; max-width:880px"> 
    </div> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <br style="word-wrap:break-word"> 
    </div> <br style="word-wrap:break-word"> <span style="word-wrap:break-word; margin:0px; padding:0px"><span style="font-size:18px; word-wrap:break-word"><span style="color:#4169e1; word-wrap:break-word">一、自适应</span></span></span> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> Android手机的屏幕碎片化非常严重，各种各样的分辨率非常之多，那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小，但要么<span style="word-wrap:break-word; margin:0px; padding:0px">在某些机型中获取失败</span>，要么用<span style="word-wrap:break-word; margin:0px; padding:0px">赋值缩放相关元素时造成游戏崩溃</span>……</p> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 反反复复折腾良久之后，终于在克强同志宣布沪港通A股H股大升的日子里想到了用&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">absolute</span>&nbsp;来解决：</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 关键代码：</p> 
    <div style="word-wrap:break-word; margin:10px 0px; padding:5px 10px; overflow:hidden; color:rgb(102,102,102); background:rgb(247,247,247)"> 
     <div style="word-wrap:break-word; margin:0px; padding:0px"> 
      <ol style="word-wrap:break-word; margin:1em 2em; padding:0px; font-size:14px; list-style:none"> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">.game { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; position: absolute;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; top: 0;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; bottom: 0;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; left: 0;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; right: 0;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; overflow: hidden;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; }</li> 
      </ol> 
     </div> 
     <span style="word-wrap:break-word; font-size:14px">复制代码</span> 
    </div> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <br style="word-wrap:break-word"> 
    </div> 以上代码使游戏容器绝对定位之后，<span style="word-wrap:break-word; margin:0px; padding:0px">上下左右四边都与手机屏幕贴紧</span>，从而做到了适配各种屏幕。<br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 然后使用&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">background-size:cover;</span>&nbsp;让背景覆盖全屏，此代码可以使背景&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">自动缩放</span>&nbsp;至&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">覆盖</span>&nbsp;容器大小。</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> </p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 然后内部的元素<span style="word-wrap:break-word; margin:0px; padding:0px">根据其所接近的边来做动态布局</span>，下面是一个例子：</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 关键代码：</p> 
    <div style="word-wrap:break-word; margin:10px 0px; padding:5px 10px; overflow:hidden; color:rgb(102,102,102); background:rgb(247,247,247)"> 
     <div style="word-wrap:break-word; margin:0px; padding:0px"> 
      <ol style="word-wrap:break-word; margin:1em 2em; padding:0px; font-size:14px; list-style:none"> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">.runbox { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; position: absolute;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; bottom: 110px;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; left: 0;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; width: 100%;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; overflow: hidden;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; padding-bottom: 10px;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; }</li> 
      </ol> 
     </div> 
     <span style="word-wrap:break-word; font-size:14px">复制代码</span> 
    </div> 以上代码是牛跑动的跑道容器，使用&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">bottom</span>&nbsp;基于底边来定位（绳子是自下而上套出去，方便写套牛逻辑），并且100%宽，保证牛从屏幕边缘出现。<br style="word-wrap:break-word"> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 以下是一个动态居中的例子：</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 关键代码：</p> 
    <div style="word-wrap:break-word; margin:10px 0px; padding:5px 10px; overflow:hidden; color:rgb(102,102,102); background:rgb(247,247,247)"> 
     <div style="word-wrap:break-word; margin:0px; padding:0px"> 
      <ol style="word-wrap:break-word; margin:1em 2em; padding:0px; font-size:14px; list-style:none"> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">.welcome { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; position: absolute;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; top: 50%;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; left: 50%;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; margin: -100px 0 0 -111px;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; background-image: url("img/wel.png");<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; width: 222px;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; height: 200px;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; }</li> 
      </ol> 
     </div> 
     <span style="word-wrap:break-word; font-size:14px">复制代码</span> 
    </div> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <br style="word-wrap:break-word"> 
    </div> 以上代码使元素用绝对定位后，用&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">top:50%; left:50%;</span>&nbsp;使元素的左上角位于屏幕最中间，然后用&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">margin-left:-111px; margin-top:-100px;</span>&nbsp;使元素偏移自身宽高值的一半，从而达到元素居中的效果。<br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 通过这两个例子，大家即可灵活使用来实现自适应的动态布局。</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 最终效果如下，无论屏幕怎么变化，都可以非常恰当的显示：<br style="word-wrap:break-word"> </p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075516deewvpa0auv9bnta.png" width="590" alt="20140428133628239.png" title="20140428133628239.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> <span style="word-wrap:break-word; margin:0px; padding:0px"><br style="word-wrap:break-word"> <span style="font-size:18px; word-wrap:break-word"><span style="color:#4169e1; word-wrap:break-word">二、帧动画</span></span></span> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 好的游戏一定有好的动画，感谢设计师为游戏带来优美的视觉享受，如果在实现时有所折扣那是对设计师工作的不尊重，所以在实现动画这里，我们要谨慎小心。</p> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 一般来说游戏动画可以大约分解成两种，一种是元素自身动作动画，比如<span style="word-wrap:break-word; margin:0px; padding:0px">像一张GIF一样不断的循环播放的动画（以下称为帧动画），另一种是这个’GIF’移动时的运行动画。通过合理的使用两种动画即可实现想要的效果</span>。</p> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 帧动画的实现，以牛向前跑去为例，分解为 牛的跑动 和 牛的移动 两种。牛的跑动 这里我们根据之前在做PC与手机联动的小游戏，如：<a href="http://qzs.qq.com/qzone/app/utility/mobileGame/index.html" style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,85,170); text-decoration:none" rel="nofollow">障碍越野赛</a>、<a href="http://qzs.qq.com/qzone/app/utility/mobileGame/flowerGame/flower.html" style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,85,170); text-decoration:none" rel="nofollow">爬花藤</a>、<a href="http://qzs.qq.com/qzone/app/utility/mobileGame/midAutumn/midAutumn.html" style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,85,170); text-decoration:none" rel="nofollow">中秋小游戏</a>中积累的经验，再结合手机浏览器主要是webkit内核，这里选用 animation-timing-function:steps(4, start); 做帧动画即可。他的原理还是在不断的移动背景图片，但每种背景会保留一段时间，通过他我们可以方便的制作帧动画，并且还有 animation 的大量控制属性可以用，<span style="word-wrap:break-word; margin:0px; padding:0px">深入的话可以控制帧动画的细节如速度、方向、时间等</span>，这里就不一一展开了。</p> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 牛的跑动 图片要切成这样（要保证每种状态的图片大小一致，并且合并到一张图片上）：<br style="word-wrap:break-word"> </p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075516wjhrj2mwmsswsppm.png" width="590" alt="20140416163445947.png" title="20140416163445947.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 具体代码：</p> 
    <div style="word-wrap:break-word; margin:10px 0px; padding:5px 10px; overflow:hidden; color:rgb(102,102,102); background:rgb(247,247,247)"> 
     <div style="word-wrap:break-word; margin:0px; padding:0px"> 
      <ol style="word-wrap:break-word; margin:1em 2em; padding:0px; font-size:14px; list-style:none"> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">.ox2 { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; background-image: url("img/ox2.png");<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; -webkit-background-size: auto 73px;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; background-size: auto 73px;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; width: 97px;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; height: 73px;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; -webkit-animation: ox2 1s steps(4, start) 0ms infinite normal backwards;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; animation: ox2 1s steps(4, start) 0ms infinite normal backwards;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; }<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">@-webkit-keyframes ox2 { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; 0% { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background-position: 0 0<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; 100% { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background-position: -388px 0<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; }<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px"><br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">@keyframes ox2 { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; 0% { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background-position: 0 0<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; 100% { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background-position: -388px 0<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; }</li> 
      </ol> 
     </div> 
     <span style="word-wrap:break-word; font-size:14px">复制代码</span> 
    </div> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"></div> </td> 
  </tr> 
 </tbody> 
</table>

<table style="word-wrap:break-word; margin:0px; padding:0px; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:880px; height:300px; vertical-align:top; min-height:100px; font-size:14px; line-height:1.8; color:rgb(0,0,0)"> 
 <tbody style="word-wrap:break-word"> 
  <tr style="word-wrap:break-word; margin:0px; padding:0px"> 
   <td style="word-wrap:break-word; margin:0px; padding:0px; font-family:verdana,'Microsoft YaHei',Tahoma,sans-serif; vertical-align:top"> 以上代码主要有几个要点：<br style="word-wrap:break-word"> 
    <ul style="word-wrap:break-word; margin:1em 2em; padding:0px; font-size:14px; list-style:none"> 
     <li style="word-wrap:break-word; margin:0px; padding:0px; list-style:disc">元素的容器宽高就是这个元素的大小&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">width: 97px; height: 73px;</span></li> 
     <li style="word-wrap:break-word; margin:0px; padding:0px; list-style:disc">为了适配Retina所以图片是按2x大小做的，然后又通过&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">background-size: auto 73px;</span>&nbsp;将图片缩小到1/2大小</li> 
     <li style="word-wrap:break-word; margin:0px; padding:0px; list-style:disc">因为有4个状态，所以animation-timing-function 设置为：&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">steps(4, start)</span></li> 
     <li style="word-wrap:break-word; margin:0px; padding:0px; list-style:disc">keyframes用background-positon来移动背景图，这里因为我们为了适配Retina将图片缩小了一半，所以移动位置也要缩放一半<span style="word-wrap:break-word; margin:0px; padding:0px">background-position: -388px 0</span><br style="word-wrap:break-word"> </li> 
    </ul> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 这里的难点在于图片的处理，以下是一些实例，供大家参考：<br style="word-wrap:break-word"> </p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075516tsa4z70a7aook0sr.png" width="590" alt="20140416163448873.png" title="20140416163448873.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075517rc8k9nhqc2o77828.png" width="590" alt="20140416163449456.png" title="20140416163449456.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075517c0skqqsq0mfqmsnv.png" width="240" alt="20140416163449978.png" title="20140416163449978.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 另外要注意绳子这里其实是有<span style="word-wrap:break-word; margin:0px; padding:0px">三个状态，要分成三个CLASS来写，方便开发时切换不同的状态</span>，</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 状态一：绳子没套之前的旋转，这个动画要循环播放<br style="word-wrap:break-word"> </p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075517ifasvaf2peaffvf5.png" width="590" alt="20140416163450577.png" title="20140416163450577.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 状态二：绳子套出的动画，这个动画之播放一次<br style="word-wrap:break-word"> </p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075517s3ept4p3le3hpeta.png" width="520" alt="20140416163451149.png" title="20140416163451149.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 状态三：套中牛后牛的挣扎，这里主要是牛的动画，但要有一个绳子来表现牛被绳子套着<br style="word-wrap:break-word"> </p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075516tsa4z70a7aook0sr.png" width="590" alt="20140416163448873.png" title="20140416163448873.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075517y3bm3mts5nvbvfrf.png" width="18" alt="20140416163451639.png" title="20140416163451639.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px; text-align:center"> 《==== 这就是套着牛的那个绳，是没有动画的。</p> <span style="word-wrap:break-word; margin:0px; padding:0px"></span> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <span style="word-wrap:break-word; margin:0px; padding:0px"><br style="word-wrap:break-word"> </span> 
    </div> <br style="word-wrap:break-word"> <span style="font-size:18px; word-wrap:break-word"><span style="color:#4169e1; word-wrap:break-word">三、CSS transform性能</span></span> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 牛除了帧动画，还有运行动画，这个相对简单，或许你认为动态改top, left值就可以了，但这里之前在ISUX文章《<a href="http://isux.tencent.com/emancipate-gpu.html" style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,85,170); text-decoration:none" rel="nofollow">被解放的GPU</a>》和《<a href="http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/" style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,85,170); text-decoration:none" rel="nofollow">High Performance Animations</a>》中都有过实验和验证：<span style="word-wrap:break-word; margin:0px; padding:0px">充分的发挥GPU是性能提升的快捷途径</span>！</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> </p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 所以我们在<span style="word-wrap:break-word; margin:0px; padding:0px">让素材移动时时减少使用 top left 等属性来移动，而要使用 transform 来触发手机的GUP来提升性能</span>。</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> </p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 所以牛的移动等元素移动动画都是使用 transfrom 来实现。<br style="word-wrap:break-word"> </p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075517cjx1zgejt4m8344g.png" width="590" alt="20140428133628933.png" title="20140428133628933.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075517oumeuirlx4a5crkm.png" width="590" alt="20140416163438769.png" title="20140416163438769.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> <span style="word-wrap:break-word; margin:0px; padding:0px"><br style="word-wrap:break-word"> <span style="font-size:18px; word-wrap:break-word"><span style="color:#4169e1; word-wrap:break-word">四、描边字</span></span></span><br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075517m9pm6d6p65rvdqwi.png" width="590" alt="20140421171130830.png" title="20140421171130830.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> 除了以上比较重要的点，还有一些细节，比如设计稿中有很多描边字，如果都切成图片将造成大量的图片素材，<span style="word-wrap:break-word; margin:0px; padding:0px">工作量大，加载速度慢，难维护</span>。<br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 这里反复实验，发现使用&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">text-shadow</span>&nbsp;的多重属性即可实现，多重属性主要用&nbsp;<span style="word-wrap:break-word; margin:0px; padding:0px">,（逗号）</span>&nbsp;来分隔，给元素可以设置多个不同参数的属性。</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 关键代码：</p> 
    <div style="word-wrap:break-word; margin:10px 0px; padding:5px 10px; overflow:hidden; color:rgb(102,102,102); background:rgb(247,247,247)"> 
     <div style="word-wrap:break-word; margin:0px; padding:0px"> 
      <ol style="word-wrap:break-word; margin:1em 2em; padding:0px; font-size:14px; list-style:none"> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">.text-shadow { <br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; color: #FFE339;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; text-shadow: 1px 0 0 #622E00, -1px 0 0 #622E00, 0 1px 0 #622E00, 0 -1px 0 #622E00;<br style="word-wrap:break-word"> </li> 
       <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; }</li> 
      </ol> 
     </div> 
     <span style="word-wrap:break-word; font-size:14px">复制代码</span> 
    </div> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <br style="word-wrap:break-word"> 
    </div> 以上代码主要设置4个多重属性，然后分别让他们位于元素的上下左右，从而实现描边的效果。<br style="word-wrap:break-word"> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 注意：<span style="word-wrap:break-word; margin:0px; padding:0px">text-shadow的最后一个 ;(分号) 一定不能省略，<a href="http://www.99css.com/archives/542" style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,85,170); text-decoration:none" rel="nofollow">CssGaga</a>压缩时会删除最后一个属性的分号，导致页面出错，所以text-shadow不能放在最后！</span></p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <br style="word-wrap:break-word"> 
    </div> <br style="word-wrap:break-word"> <span style="word-wrap:break-word; margin:0px; padding:0px"><span style="font-size:18px; word-wrap:break-word"><span style="color:#4169e1; word-wrap:break-word">五、扁平化</span></span></span> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 技术的问题说的差不多了，这里还要说下设计这里还有一个可优化的空间，这就是<span style="word-wrap:break-word; margin:0px; padding:0px">扁平化</span>，从技术角度来看扁平化有三大优点：</p> <br style="word-wrap:break-word"> 
    <ul style="word-wrap:break-word; margin:1em 2em; padding:0px; font-size:14px; list-style:none"> 
     <li style="word-wrap:break-word; margin:0px; padding:0px; list-style:disc"><span style="word-wrap:break-word; margin:0px; padding:0px">图片素材好制作</span></li> 
     <li style="word-wrap:break-word; margin:0px; padding:0px; list-style:disc"><span style="word-wrap:break-word; margin:0px; padding:0px">游戏打开速度快</span></li> 
     <li style="word-wrap:break-word; margin:0px; padding:0px; list-style:disc"><span style="word-wrap:break-word; margin:0px; padding:0px">运行速度快</span><br style="word-wrap:break-word"> </li> 
    </ul> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 前两点比较好理解，第三点的原因是因为图片比较小，所以占用的内存也小，运行速度当然会快一些，甚至于省电 :D</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 以下在几个很好的扁平化游戏</p> <br style="word-wrap:break-word"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <a href="http://qzs.qq.com/qzone/app/utility/mobileGame/midAutumn/midAutumn.html" style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,85,170); text-decoration:none" rel="nofollow">中秋小游戏</a>：<br style="word-wrap:break-word"> </p> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075518hbohp5zba21xaea0.png" width="590" alt="20140416163440635.png" title="20140416163440635.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> <br style="word-wrap:break-word"> <a href="http://qzs.qq.com/qzone/app/utility/mobileGame/index.html" style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,85,170); text-decoration:none" rel="nofollow">障碍越野赛</a>：<br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word; margin:0px; padding:0px"> 
     <img src="http://www.w3cfuns.com/data/attachment/forum/201405/06/075518klem3zg1wngpppqe.png" width="590" alt="20140416163441295.png" title="20140416163441295.png" style="word-wrap:break-word; max-width:880px"> 
    </div> <br style="word-wrap:break-word"> 非常期待设计师们在扁平化游戏上的尝试。<br style="word-wrap:break-word"> <span style="word-wrap:break-word; margin:0px; padding:0px"><br style="word-wrap:break-word"> <br style="word-wrap:break-word"> <span style="font-size:18px; word-wrap:break-word"><span style="color:#4169e1; word-wrap:break-word">六、2x图</span></span></span> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> 最后这里说一个CssGaga的一个BUG，在制作兼容Retina的2x图时，如果2x图的长宽不是偶数，那么最后生成的1x雪碧图会有错位。</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 所以，<span style="word-wrap:break-word; margin:0px; padding:0px">2x图长宽一定得是偶数大小</span>。</p> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; font-size:14px; text-indent:2em; line-height:26px"> <br style="word-wrap:break-word"> 什么，你还不知道<a href="http://www.99css.com/archives/542" style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,85,170); text-decoration:none" rel="nofollow">CssGaga</a>是什么，这是做页面的大神器啊，可以自动合并CSS、生成雪碧图、生成兼容Retina的代码、同步资源、生成提单列表等，快来使用吧！</p> </td> 
  </tr> 
 </tbody> 
</table>