最近在做一个有关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. mysql 5.7 多源复制 原创

    一从两主:多源复制 每台mysql 服务器都需要加my.cnf要加两个参数才可以在GTID多源复制 master-info-repository=TABLE relay-log-info-reposi ...

  2. Jquery 表格固定表头

    网上找了好多现成的.结果没一个能成.只得自己动手. (function($){ $.fn.fixHeader = { init : function(obj){ var p = obj.parent( ...

  3. php与ajax交互中文乱码（字符串转化）

    一.从后台传过来的json不做处理,前端result.name这样调用回乱码.应该使用urldecode将jsonencod转码 注意json只接受utf-8编码的字符,所以json_encode() ...

  4. win7 debian 双系统修改引导项顺序

    转载:http://jingyan.baidu.com/article/72ee561aa1d123e16138df81.html 问题描述: 个人在宿舍使用的比较多的是Window 7,而它的启动项 ...

  5. mysql表名大小写问题

               默认情况下,MySQL 将以小写保存表名.一个避免 MySQL 服务器小写问题方法是以 -O lower_case_table_names=0 启动 mysqld.默认情况下,这 ...

  6. 实现struts2框架

    Struts最早是作为Apache Jakarta项目的组成部分,项目的创立者希望通过对该项目的研究,改进和提高JavaServer Pages .Servlet.标签库以及面向对象的技术水准.最初的 ...

  7. Python 基础【第四篇】参数

    程序运行避免不了需要一些参数来支持 那么如何让程序接收参数呢?这里先简单的用sys模块的参数 sys.argv[]方法来实现参数获取 1.用法: import sys   //导入sys模块后期会详细 ...

  8. CF A and B and Chess

    A and B and Chess time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  9. HDU 1978 How many ways (DP)

    How many ways Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  10. saltstack实战4--综合练习4

    Saltstack配置管理-给minion增加Zabbix-agent zabbix-agent的包 [root@A ~]# rpm -qa |grep zabbix zabbix-2.4.8-1.e ...