最近在做一个有关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. C 高级编程 2 内存管理

    理解malloc的工作原理: malloc使用一个数据结构(链表)来维护分配的空间.链表的构成: 分配的空间.上一个空间的地址.下一个空间的地址.以及本空间的信息等. 对malloc分配的空间不要越界 ...

  2. mysql router 自动failover测试

    mysql router 启动服务文件内容: [root@monitor mysqlrouter]# cat /etc/init.d/mysqlrouter#! /bin/bash## mysqlro ...

  3. SQL Server中内连接和外连接的区别

    SQL Server中内连接和外连接的区别 假设一个数据库中有两张表,一张是学生表StudentInfo,一张是班级表ClassInfo,两张表之间用ClassId字段进行关联. 如果用内连接,正常的 ...

  4. XML 格式转JSON 格式

    #import <Foundation/Foundation.h> #pragma GCC diagnostic push #pragma GCC diagnostic ignored & ...

  5. git 在windows上 生成ssh公钥

    今天上传代码到服务器时,报如下错误:   上网搜了一下,应该是ssh过期了.我们就来生成新的ssh公钥吧.   1. 打开git bash   2. 输入命令:  ssh-keygen -t rsa ...

  6. android Animation笔记

    日历   公告   关于动画的实现,Android提供了Animation,在Android SDK介绍了2种Animation模式: 1. Tween Animation:通过对场景里的对象不断做图 ...

  7. 转：java服务器安全指南

    转: http://drops.wooyun.org/web/16609 JAVA安全之JAVA服务器安全漫谈 z_zz_zzz · 2016/06/08 10:50 0x00 前言 本文主要针对JA ...

  8. chrome浏览器取消置顶的方法

    这两天在使用google chrome浏览器的时候,发现chrome被默认置顶,取消chrome默认的方法为在浏览器上按 “ALT + Space + C”,然后再重开chorme就可以了.

  9. HTTP相关知识 --转载

    转载之,言简意赅

  10. 转：SqlServer2008误操作数据(delete或者update)后恢复数据

    Sqlserver2008误操作数据(delete或者update)后恢复数据(转) 实际工作中,有时会直接在数据库中操作数据,比如对数据进行delete或者update操作,当进行这些操作的时候,如 ...