玩轉Slot Machine

時間 2019-12-13

標籤 slot machine 简体版

原文原文鏈接

最近在作一個有關Slot Machine小遊戲的開發，其中遇到了很多的坑，現將我的遇到的問題總結以下，但願從此對你們開發的過程當中有所的幫助。html

這個項目是部署到微信朋友圈廣告的，兩天時間，PV就有14W之多，感受這個項目仍是挺成功的哦！！！jquery

我們閒話少說，直接上最終上線的項目效果圖。git

【意料以外的事情】這個項目居然獲獎了

這個項目的難點主要在於這個Slot Machine，我在開始開發的時候，也想過直接從github上直接找一個插件來實現，可是後來通過的的嘗試，我失敗了。在PC端相似的Slot Machine這種插件是很是多的，可是要是直接拿到移動端來用，是有好多的潛在問題的。咱們都知道PC端目前對於性能來講，廣泛是要比移動端好不少的，可是PC端的插件要是直接拿到移動端來使用的話，就會出現不少的性能問題，尤爲是在安卓手機上，會卡的十分嚴重。那麼，咱們做爲開發人員，只能硬着頭皮去解決這些棘手的問題。下面是寫的一個Demo。github

  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動畫在移動端的性能仍是比較好的，至少在安卓機上不會出現一卡一卡的現象。web

測試效果圖:微信

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。