玩转Slot Machine
最近在做一个有关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的更多相关文章
- 游戏引擎架构 (Jason Gregory 著)
第一部分 基础 第1章 导论 (已看) 第2章 专业工具 (已看) 第3章 游戏软件工程基础 (已看) 第4章 游戏所需的三维数学 (已看) 第二部分 低阶引擎系统 第5章 游戏支持系统 (已看) 第 ...
- 【转载】Bandits for Recommendation Systems (Part I)
[原文链接:http://engineering.richrelevance.com/bandits-recommendation-systems/.] [本文链接:http://www.cnblog ...
- Unity3D 集合插件目录
http://unity3d.9ria.com/?p=2171 这个基本上很全 下面自己觉的还不错的,当然那些大众的就不列出来了 一.KGFMapSystem Quick Start : http:/ ...
- Tabs - 选项卡插件
接上篇Tabs - 选项卡插件 其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充 9)Flipping C ...
- Best jQuery Plugins of the Month – May 2014
1. jQuery referenceSection jQuery referenceSection by Scott Mascio ensures to help users in adding a ...
- Vue.js 系列教程 ②
这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件,Props 以及 Slots.这不是一个完整的指南,而是基础知识的概述,所以你可以了解Vue.js ...
- 从java1到java9每个版本都有什么新特性?
每次出新版本,大家大概都会这么问,"Java X会有什么特性呢?" .在下面的内容里,我总结了至今为止的Java主要发行版中各自引入的新特性,这样做的目的是为了突出各个新特性是在哪 ...
- W3CSchool实战闯关笔记(JavaScript)
//handsome /** *ugly **/ 第一关注释 // 举例 var myName; // Define myName below this line 第二关声明变量 // Setup v ...
- XVIII Open Cup named after E.V. Pankratiev. Ukrainian Grand Prix
A. Accommodation Plan 对于已知的$K$个点,离它们距离都不超过$L$的点在树上是一个连通块,考虑在每种方案对应的离$1$最近的点统计. 即对于每个点$x$,统计离它距离不超过$L ...
随机推荐
- PHP 正则表达式语法
则表达式简介 在某些应用中,往往有时候需要根据一定的规则来匹配(查找)确认一些字符串,如要求用户输入的 QQ 号码为数字且至少 5 位.用于描述这些规则的工具就是正则表达式. 最简单的匹配 最简单的匹 ...
- js new date详解
创建一个日期对象: var objDate=new Date([arguments list]); var ini_date=new Date(2014,7,0); //是代表7月最后一天 ,也就是2 ...
- Mysql中自增字段(AUTO_INCREMENT)的一些常识
Mysql中自增字段(AUTO_INCREMENT)的一些常识: http://chengxuyuan.naxieshir.com/fenlei/2/p/151.html
- 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 ...
- SingletonBeanRegistry
// 给定一个存在的object对象,该Registry将它存储为一个单例的根据给定的beanName(给定的object已经完全初始化完成,在访问Registry的单例object时应该是同步的)v ...
- myEclipse6.5与数据库(SQL Server2008)连接遇到的问题(自己总结的干货)<用SSH框架的时候,用servlet+javabean+jsp的时候>
昨天因为学习SSH框架的搭建,时隔一年又重新遇到了myEclipse连接数据库的问题.废话不多说,上干货 (以下全部按照我遇到的问题的顺序,也就是没有顺序,就是任性) 请注意:这是在myEclipse ...
- 【推公式】UVa 10995 - Educational Journey
1A~,但后来看人家的代码好像又写臭了,T^T... Problem A: Educational journey The University of Calgary team qualified f ...
- Linux 文件/文件夹操作命令
1 cd命令 命令格式:cd [目录名] (cd和目录之间使用空格隔开) cd 进入用户主目录: cd ~ 进入用户主目录: cd - 返回进入此目录之前所在的目录: cd ...
- JavaScript “\”替换成 “\\”
str=str.replace(/\\/g,'\\\\');
- 开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...