最近在做一个有关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动画在移动端的性能还是比较好的，至少在安卓机上不会出现一卡一卡的现象。
测试效果图: