最近在做一个有关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. java_有返回值线程_提前加载例子

    package com.demo.test3; import java.util.concurrent.Callable; import java.util.concurrent.ExecutionE ...

  2. B - Plane of Tanks: Pro

    Description Vasya has been playing Plane of Tanks with his friends the whole year. Now it is time to ...

  3. Firefox便携版

    安装firefox后默认配置文件在C:\Users\Administrator\AppData\Roaming\Mozilla\Firefox 可以在快捷方式里设置不同的配置文件,但是要注意参数的含义 ...

  4. 如何在Linux上安装Tomcat

    Tomcat需要JDK的支持,所以安装Tomcat前先安装JDK. 一.首先到JDK官网下载与自己机器相应的JDK. 注意机器位数,Linux系统的话可以用uname -a命令查看系统信息,如果是Ub ...

  5. 给jdk写注释系列之jdk1.6容器(10)-Stack&Vector源码解析

    前面我们已经接触过几种数据结构了,有数组.链表.Hash表.红黑树(二叉查询树),今天再来看另外一种数据结构:栈.      什么是栈呢,我就不找它具体的定义了,直接举个例子,栈就相当于一个很窄的木桶 ...

  6. PHPnow开启PHP扩展里openssl支持的方法

    PHPnow 是 Win32 下绿色的 Apache + PHP + MySQL 环境套件包.简易安装.快速搭建支持虚拟主机的 PHP 环境.更多介绍<PHP服务套件 PHPnow1.5.6&g ...

  7. 【推公式】UVa 10995 - Educational Journey

    1A~,但后来看人家的代码好像又写臭了,T^T... Problem A: Educational journey The University of Calgary team qualified f ...

  8. poj 2057 树形dp 贪心

    思路:设sum[i],le[i],back[i],worm[i]分别表示以i为根节点需要的完成步数,叶子节点数,失败回退步数,以及i是否有虫. #include<iostream> #in ...

  9. ubuntu不能正常使用make menuconfig的解决方案

    so easy sudo apt-get install build-essentialsudo apt-get install libncurses5sudo apt-get install lib ...

  10. javascript基础知识--什么是构造函数？什么是实例化对象？

    前言--讲在前面 我想有很多以前很少接触后台编程语言的初学者朋友跟我一样,对javascript里面一系列的“名词”搞的一头雾水.好像大概知道讲的是什么,但其实理解的还是不清楚:我想,学习任何一种知识 ...