最近在做一个有关Slot  Machine小游戏的开发，其中遇到了不少的坑，现将个人遇到的问题总结如下，希望今后对大家开发的过程中有所的帮助。

这个项目是部署到微信朋友圈广告的，两天时间，PV就有14W之多，感觉这个项目还是挺成功的哦！！！

咱们闲话少说，直接上最终上线的项目效果图。

【意料之外的事情】这个项目竟然获奖了

这个项目的难点主要在于这个Slot Machine，我在开始开发的时候，也想过直接从github上直接找一个插件来实现，但是后来经过的的尝试，我失败了。在PC端类似的Slot Machine这种插件是非常多的，但是要是直接拿到移动端来用，是有好多的潜在问题的。我们都知道PC端目前对于性能来说，普遍是要比移动端好很多的，但是PC端的插件要是直接拿到移动端来使用的话，就会出现很多的性能问题，尤其是在安卓手机上，会卡的十分严重。那么，我们作为开发人员，只能硬着头皮去解决这些棘手的问题。下面是写的一个Demo。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

         <title>slot machine</title>

         <style>

             * {

                 padding: 0;

                 margin: 0;

             }

             html, body {

                 width: 100%;

                 height: 100%;

                 overflow: hidden;

             }

             .slot_machine {

                 display: inline-block;

                 position: absolute;

                 top: 8%;

                 left: 22%;

                 overflow: hidden;

             }

             .slot_machine img {

                 display: block;

             }

             #img_0 {

                 position: absolute;

                 top: -300%;

             }

             #img_1 {

             }

             #img_2 {

                 position: absolute;

                 top: -100%;

             }

             #img_3 {

                 position: absolute;

                 top: -200%;

             }

             #result_1 {

                 position: absolute;

                 top: -400%;

             }

             .move {

                 transform: translateY(100%);

             }

             .move_begin {

                 -webkit-animation: move_begin 1s ease-in;

             }

             @-webkit-keyframes move_begin {

                 from {-webkit-transform: translateY(0%);}

                 100%  {-webkit-transform: translateY(200%);}

             }

             .move_stable {

                 -webkit-animation: move_stable .5s linear infinite;

             }

             @-webkit-keyframes move_stable {

                 from {-webkit-transform: translateY(0%);}

                 100%  {-webkit-transform: translateY(300%);}

             }

             .move_end_1 {

                 -webkit-animation: move_end_1 1s ease-out;

             }

             @-webkit-keyframes move_end_1 {

                 100%  {-webkit-transform: translateY(300%);}

             }

             .move_end_2 {

                 -webkit-animation: move_end_2 1s ease-out;

             }

             @-webkit-keyframes move_end_2 {

                 100%  {-webkit-transform: translateY(100%);}

             }

             .move_end_3 {

                 -webkit-animation: move_end_3 1s ease-out;

             }

             @-webkit-keyframes move_end_3 {

                 100%  {-webkit-transform: translateY(200%);}

             }

         </style>

     </head>

     <body>

         <div class="slot_machine">

             <img id="img_0" src="./t1.png" alt="" />

             <img id="img_1" src="./t1.png" alt="" />

             <img id="img_2" src="./t2.png" alt="" />

             <img id="img_3" src="./t3.png" alt="" />

         </div>

         <script src="./jquery-3.0.0.min.js" charset="utf-8"></script>

      <script>

          var begin = false;

          var status = 0;  // 0 stop 1 begin 2 loop 3 end

          $('html').on('click touchstart', function(event) {

              event.preventDefault();

              console.log(status);

              if (status == 0) {   // stop to begin

                  $('.slot_machine img').addClass('move_begin');

                  status = 1;

                  $('.slot_machine img').one("webkitAnimationEnd", move_begin_complete);

              } else if(status == 2) {  // loop to end

                  $('.slot_machine img').one('animationiteration webkitAnimationIteration', function() {

                      console.log('move_stable_animationiteration');

                      $('.slot_machine img').unbind("animationiteration webkitAnimationIteration");

                      $('.slot_machine img').removeClass('move_stable').addClass('move_end_1');

                      $('.slot_machine img').one("webkitAnimationEnd", move_end_complete);

                      status == 3;

                  });

              }

          });

          function move_begin_complete(){

              console.log('move_begin_complete');

              $('.slot_machine img').unbind("webkitAnimationEnd");

              $('.slot_machine img').removeClass('move_begin').addClass('move_stable');

              status = 2;

          }

          function move_end_complete(){

              console.log('move_end_complete');

              $('.slot_machine img').unbind("webkitAnimationEnd");

              $('.slot_machine img').removeClass('move_end_1');

              status = 0;

          }

      </script>

     </body>

 </html>

这个Demo主要用到了CSS3动画，CSS3动画在移动端的性能还是比较好的，至少在安卓机上不会出现一卡一卡的现象。

测试效果图:

玩转Slot Machine的更多相关文章

  1. 游戏引擎架构 (Jason Gregory 著)

    第一部分 基础 第1章 导论 (已看) 第2章 专业工具 (已看) 第3章 游戏软件工程基础 (已看) 第4章 游戏所需的三维数学 (已看) 第二部分 低阶引擎系统 第5章 游戏支持系统 (已看) 第 ...

  2. 【转载】Bandits for Recommendation Systems (Part I)

    [原文链接:http://engineering.richrelevance.com/bandits-recommendation-systems/.] [本文链接:http://www.cnblog ...

  3. Unity3D 集合插件目录

    http://unity3d.9ria.com/?p=2171 这个基本上很全 下面自己觉的还不错的,当然那些大众的就不列出来了 一.KGFMapSystem Quick Start : http:/ ...

  4. Tabs - 选项卡插件

        接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping C ...

  5. Best jQuery Plugins of the Month – May 2014

    1. jQuery referenceSection jQuery referenceSection by Scott Mascio ensures to help users in adding a ...

  6. Vue.js 系列教程 ②

    这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件,Props 以及 Slots.这不是一个完整的指南,而是基础知识的概述,所以你可以了解Vue.js ...

  7. 从java1到java9每个版本都有什么新特性？

    每次出新版本,大家大概都会这么问,"Java X会有什么特性呢?" .在下面的内容里,我总结了至今为止的Java主要发行版中各自引入的新特性,这样做的目的是为了突出各个新特性是在哪 ...

  8. W3CSchool实战闯关笔记（JavaScript）

    //handsome /** *ugly **/ 第一关注释 // 举例 var myName; // Define myName below this line 第二关声明变量 // Setup v ...

  9. XVIII Open Cup named after E.V. Pankratiev. Ukrainian Grand Prix

    A. Accommodation Plan 对于已知的$K$个点,离它们距离都不超过$L$的点在树上是一个连通块,考虑在每种方案对应的离$1$最近的点统计. 即对于每个点$x$,统计离它距离不超过$L ...

随机推荐

  1. 【张泽华】android视频教程下载地址及上课源代码

    http://note.youdao.com/share/?id=f39bf918842c7b0673a033d35d734073&type=notebook#/1AC357745ED74BC ...

  2. 实验-hadoop新增节点

    关于hadoop新增节点网上的说法都有些差别,自己来实践一把 1.建立一个namenode一个datanode的集群 master:192.168.126.130 slave1:192.168.126 ...

  3. Java（Android）编程思想笔记01：多态性的理解

    1. 多态的定义: 指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采用多种不同的行为方式. (发送消息就是函数调用)   2. 多态的理解    多态是面向对象的重要特性,简 ...

  4. Linux 通过 load average 判断服务器负载情况

    Linux中load average判断服务器负载情况 转载文章 http://www.111cn.net/sys/linux/56003.htm 写的比较详细,推荐看看.

  5. CentOS(九)--与Linux文件和目录管理相关的一些重要命令①

       接上一篇文章,实际生产过程中的目录管理一定要注意用户是root 还是其他用户. 一.目录与路径 1.相对路径与绝对路径 因为我们在Linux系统中,常常要涉及到目录的切换,所以我们必须要了解 & ...

  6. ruby 疑难点之—— yield 和 yield self

    yield 所有的"方法(methods)"隐式跟上一个"块(block)"参数. 块参数也可以明确给定,形式就是在参数前面加一个"&&quo ...

  7. [改善Java代码]asList方法产生的List对象不可更改

    上一个建议之处了asList方法在转换基本类型数组时候存在的问题,在看下asList方法返回的列表有何特殊的地方.看代码: import java.util.Arrays; import java.u ...

  8. 【约瑟夫环变形】UVa 1394 - And Then There Was One

    首先看到这题脑子里立刻跳出链表..后来继续看如家的分析说,链表法时间复杂度为O(n*k),肯定会TLE,自己才意识到果然自个儿又头脑简单了 T^T. 看如家的分析没怎么看懂,后来发现这篇自己理解起来更 ...

  9. hdu1565 网络流或状态压缩DP

    对于网络流有一个定理: 最小点权覆盖集=最大网络流: 最大点权独立集=总权值-最小点权覆盖集: 网络流解法代码如下: #include<cstdio> #include<iostre ...

  10. 【转】六年软件测试感悟-从博彦到VMware

    不知不觉已经从事软件测试六年了,2006毕业到进入外包公司外包给微软做软件测试, 到现在加入著名的外企.六年的时间过得真快. 长期的测试工作也让我对软件测试有了比较深入的认识.但是我至今还是一个底层的 ...