最近在做一个有关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. Linux 引导过程内幕

    转载:http://www.ibm.com/developerworks/cn/linux/l-linuxboot/index.html   从主引导记录到第一个用户空间应用程序的指导 引导 Linu ...

  2. Tomcat配置随笔

    启动内存参数的配置 tomcat/bin/catalina.bat 如果是linux 就是 catalina.sh 在rem 的后面增加如下参数 set JAVA_OPTS= -Xms256m -Xm ...

  3. Android（java）学习笔记93：Android布局详解之一：FrameLayout

    FrameLayout是最简单的布局了.所有放在布局里的控件,都按照层次堆叠在屏幕的左上角.后加进来的控件覆盖前面的控件. 在FrameLayout布局里,定义任何空间的位置相关的属性都毫无意义.控件 ...

  4. oracle--varchar2

    1. varchar2列最多占用4000字节,但是能容纳多少字符就不一定了 使用sql查看字符集: select userenv('language') from dual;--select * fr ...

  5. LeetCode 203

    Remove Linked List Elements Remove all elements from a linked list of integers that have value val. ...

  6. 关于VI&VIM的基本使用方法

    本文转载:http://www.cnblogs.com/itech/archive/2009/04/17/1438439.html vi/vim 基本使用方法本文介绍了vi (vim)的基本使用方法, ...

  7. Android中定义接口的方法

    1.接口方法用于回调(这里定义接口是为了使用其接口方法): public interface ICallback { public void func(); } public class Caller ...

  8. asp.net post方法;对象转json

    [System.Web.Services.WebMethod()]     public static string GetPoints(string userId)     {         st ...

  9. iOS 之美：iOS Delegate 使用五步曲

    在iOS 开发中, 搞清楚Delegate 是需要花些时间的. Delegate 本来是软件架构设计的一种理念.对于像手机这样一个有限的设备,我们需要充分考虑到:内存要尽量省着用: 视图之间的关系要清 ...

  10. redis学习-day1

    1.nosql数据库的一种. 2.Redis 是一种开源的,先进的key-value存储.它通常被称为数据结构服务器.因为键可以包含字符串.哈希.链表.集合和有序集合. 特点: 3.为了保证效率,数据 ...