玩转Slot Machine

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

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

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

                                 

                       

                                               

                                                  

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

                    

 

 

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

       

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  6         <title>slot machine</title>
  7         <style>
  8             * {
  9                 padding: 0;
 10                 margin: 0;
 11             }
 12 
 13             html, body {
 14                 width: 100%;
 15                 height: 100%;
 16                 overflow: hidden;
 17             }
 18 
 19             .slot_machine {
 20                 display: inline-block;
 21                 position: absolute;
 22                 top: 8%;
 23                 left: 22%;
 24                 overflow: hidden;
 25             }
 26 
 27             .slot_machine img {
 28                 display: block;
 29             }
 30 
 31             #img_0 {
 32                 position: absolute;
 33                 top: -300%;
 34             }
 35 
 36             #img_1 {
 37 
 38             }
 39 
 40             #img_2 {
 41                 position: absolute;
 42                 top: -100%;
 43             }
 44 
 45             #img_3 {
 46                 position: absolute;
 47                 top: -200%;
 48             }
 49 
 50             #result_1 {
 51                 position: absolute;
 52                 top: -400%;
 53             }
 54 
 55             .move {
 56                 transform: translateY(100%);
 57             }
 58 
 59             .move_begin {
 60                 -webkit-animation: move_begin 1s ease-in;
 61             }
 62 
 63             @-webkit-keyframes move_begin {
 64                 from {-webkit-transform: translateY(0%);}
 65                 100%  {-webkit-transform: translateY(200%);}
 66             }
 67 
 68             .move_stable {
 69                 -webkit-animation: move_stable .5s linear infinite;
 70             }
 71 
 72             @-webkit-keyframes move_stable {
 73                 from {-webkit-transform: translateY(0%);}
 74                 100%  {-webkit-transform: translateY(300%);}
 75             }
 76 
 77             .move_end_1 {
 78                 -webkit-animation: move_end_1 1s ease-out;
 79             }
 80 
 81             @-webkit-keyframes move_end_1 {
 82                 100%  {-webkit-transform: translateY(300%);}
 83             }
 84 
 85             .move_end_2 {
 86                 -webkit-animation: move_end_2 1s ease-out;
 87             }
 88 
 89             @-webkit-keyframes move_end_2 {
 90                 100%  {-webkit-transform: translateY(100%);}
 91             }
 92 
 93             .move_end_3 {
 94                 -webkit-animation: move_end_3 1s ease-out;
 95             }
 96 
 97             @-webkit-keyframes move_end_3 {
 98                 100%  {-webkit-transform: translateY(200%);}
 99             }
100 
101 
102         </style>
103     </head>
104     <body>
105         <div class="slot_machine">
106             <img id="img_0" src="./t1.png" alt="" />
107             <img id="img_1" src="./t1.png" alt="" />
108             <img id="img_2" src="./t2.png" alt="" />
109             <img id="img_3" src="./t3.png" alt="" />
110         </div>
111         <script src="./jquery-3.0.0.min.js" charset="utf-8"></script>
112      <script>
113          var begin = false;
114          var status = 0;  // 0 stop 1 begin 2 loop 3 end
115 
116          $('html').on('click touchstart', function(event) {
117              event.preventDefault();
118              console.log(status);
119 
120              if (status == 0) {   // stop to begin
121                  $('.slot_machine img').addClass('move_begin');
122                  status = 1;
123 
124                  $('.slot_machine img').one("webkitAnimationEnd", move_begin_complete);
125 
126              } else if(status == 2) {  // loop to end
127                  $('.slot_machine img').one('animationiteration webkitAnimationIteration', function() {
128                      console.log('move_stable_animationiteration');
129                      $('.slot_machine img').unbind("animationiteration webkitAnimationIteration");
130                      $('.slot_machine img').removeClass('move_stable').addClass('move_end_1');
131                      $('.slot_machine img').one("webkitAnimationEnd", move_end_complete);
132                      status == 3;
133                  });
134              }
135          });
136          function move_begin_complete(){
137              console.log('move_begin_complete');
138              $('.slot_machine img').unbind("webkitAnimationEnd");
139              $('.slot_machine img').removeClass('move_begin').addClass('move_stable');
140              status = 2;
141          }
142          function move_end_complete(){
143              console.log('move_end_complete');
144              $('.slot_machine img').unbind("webkitAnimationEnd");
145              $('.slot_machine img').removeClass('move_end_1');
146              status = 0;
147          }
148      </script>
149     </body>
150 </html>

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

          测试效果图:

                      

        

 

 

 

      

posted @ 2016-08-12 16:27  小旭的blog  阅读(1121)  评论(0)  编辑  收藏  举报