最近在做一个有关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. PHP 正则表达式语法

    则表达式简介 在某些应用中,往往有时候需要根据一定的规则来匹配(查找)确认一些字符串,如要求用户输入的 QQ 号码为数字且至少 5 位.用于描述这些规则的工具就是正则表达式. 最简单的匹配 最简单的匹 ...

  2. js new date详解

    创建一个日期对象: var objDate=new Date([arguments list]); var ini_date=new Date(2014,7,0); //是代表7月最后一天 ,也就是2 ...

  3. Mysql中自增字段(AUTO_INCREMENT)的一些常识

    Mysql中自增字段(AUTO_INCREMENT)的一些常识: http://chengxuyuan.naxieshir.com/fenlei/2/p/151.html

  4. Cross Site Request Forgery (CSRF)--spring security -转

    http://docs.spring.io/spring-security/site/docs/3.2.0.CI-SNAPSHOT/reference/html/csrf.html 13. Cross ...

  5. SingletonBeanRegistry

    // 给定一个存在的object对象,该Registry将它存储为一个单例的根据给定的beanName(给定的object已经完全初始化完成,在访问Registry的单例object时应该是同步的)v ...

  6. myEclipse6.5与数据库(SQL Server2008)连接遇到的问题(自己总结的干货)<用SSH框架的时候,用servlet+javabean+jsp的时候>

    昨天因为学习SSH框架的搭建,时隔一年又重新遇到了myEclipse连接数据库的问题.废话不多说,上干货 (以下全部按照我遇到的问题的顺序,也就是没有顺序,就是任性) 请注意:这是在myEclipse ...

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

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

  8. Linux 文件/文件夹操作命令

    1 cd命令 命令格式:cd  [目录名]    (cd和目录之间使用空格隔开) cd      进入用户主目录: cd  ~  进入用户主目录: cd  -  返回进入此目录之前所在的目录: cd  ...

  9. JavaScript “\”替换成 “\\”

    str=str.replace(/\\/g,'\\\\');

  10. 开始学习css

    今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...