使用jQuery实现的掷色子游戏动画效果


Posted in Javascript onMarch 14, 2014

实现原理:当色子掷出后,通过jQuery的animate()函数改变色子位移,中间加入延时效果,并变换色子背景,最终动画运行到随机产生的点数时停止,并显示掷出的点数。其实就是动画过程加入多个不同图片的帧(同flash动画影片中的帧),帧数越多效果越好,然后逐帧运行后就形成了动画效果。
一、准备工作
我们需要准备色子素材,本示例中,我采用从网络上获取到的色子素材,我们要做处理的是将6个色子图片(1-6点),以及中间过渡效果的图片(做运动模糊处理)放在同一张图片上,保存为dice.png,用作色子背景图。
载入jQuery库,这是必须的。

<script type="text/javascript" src="js/jquery.js"></script>

然后在HTML页面的body中加入以下代码,其中#dice是用来放置色子的,#result是用来显示提示信息的。
<div id="dice" class="dice dice_1"></div> 
<p id="result">请直接点击上面的色子!</p>

二、CSS代码
我们使用background将图片dice.png载入到.dice中。然后我们分别用了几种样式通过不同的background-position值来定位不同的色子点数图和过渡效果图。其中的过渡效果图片我做了简单的模糊处理,大家也可以使用css3来处理图片的模糊效果。注意#dice_mask是用来做防重复点击的,后面会提到。
.wrap{width:90px; height:90px; margin:120px auto 30px auto; position:relative} 
.dice{width:90px; height:90px; background:url(dice.png) no-repeat;} 
.dice_1{background-position:-5px -4px} 
.dice_2{background-position:-5px -107px} 
.dice_3{background-position:-5px -212px} 
.dice_4{background-position:-5px -317px} 
.dice_5{background-position:-5px -427px} 
.dice_6{background-position:-5px -535px} 
.dice_t{background-position:-5px -651px} 
.dice_s{background-position:-5px -763px} 
.dice_e{background-position:-5px -876px} 
p#result{text-align:center; font-size:16px} 
p#result span{font-weight:bold; color:#f30; margin:6px} 
#dice_mask{width:90px; height:90px; background:#fff; opacity:0; position:absolute; 
 top:0; left:0; z-index:999}

三、jQuery代码
当单击色子时,先预置色子的样式(清空上次动画后的样式),将色子用透明的#dice_mask遮住防重复点击,并产生一个1-6的随机数,然后通过animate()函数,改变色子位移,改变色子的class使得出现过渡模糊背景图片,接着稍作延迟delay(),再接着进入下一个帧动画,最后动画结束时,色子的class样式定位到dice_x上,x表示点数,也就是得到了掷出色子后的点数,移除遮罩效果,又可以继续点击掷色子。
$(function(){ 
    var dice = $("#dice"); 
    dice.click(function(){ 
        dice.attr("class","dice");//清除上次动画后的点数 
        dice.css("cursor","default"); 
        $(".wrap").append("<div id='dice_mask'></div>");//加遮罩 
        var num = Math.floor(Math.random()*6+1);//产生随机数1-6 
        dice.animate({left: '+2px'}, 100,function(){ 
            dice.addClass("dice_t"); 
        }).delay(200).animate({top:'-2px'},100,function(){ 
            dice.removeClass("dice_t").addClass("dice_s"); 
        }).delay(200).animate({opacity: 'show'},600,function(){ 
            dice.removeClass("dice_s").addClass("dice_e"); 
        }).delay(100).animate({left:'-2px',top:'2px'},100,function(){ 
            dice.removeClass("dice_e").addClass("dice_"+num); 
            $("#result").html("您掷得点数是<span>"+num+"</span>"); 
            dice.css('cursor','pointer'); 
            $("#dice_mask").remove();//移除遮罩 
        }); 
    }); 
});

关于防止重复点击的办法很多,jQuery提供了one(),live(),bind(),on()等等这些函数在该实例中都行不通,所以我想了个办法,当点击色子后开始动画时,用一个和色子大小一样的透明遮罩层将色子遮住,使得在动画运行中不可连续重复点击色子,当动画运行完成后,再将遮罩层移除,这样色子就可以重新被点击了。
以上掷色子的动画效果就是模拟了flash的帧动画,通过时间轴来播放逐帧运行,而运用jQuery可以代替flash完成这样的动画效果,虽然效果没有flash的炫。本文的掷色子动画效果是为下期文章做铺垫,下期文章我将给大家介绍结合jQuery、HTML、CSS、PHP、MySQL的综合性技术文章及实例代码,讲解掷色子抽奖游戏,可以控制掷出色子点数的概率,也是一个趣味游戏。
Javascript 相关文章推荐
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
js实现页面图片消除效果
Mar 24 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 #Javascript
javascript将相对路径转绝对路径示例
Mar 14 #Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 #Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 #Javascript
javascript回车完美实现tab切换功能
Mar 13 #Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 #Javascript
JQuery中extend使用介绍
Mar 13 #Javascript
You might like
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
Python中强大的命令行库click入门教程
2016/12/26 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python学习入门细节知识点
2018/03/29 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
tensorflow的计算图总结
2020/01/12 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
python利用platform模块获取系统信息
2020/10/09 Python
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
生产主管岗位职责
2013/11/10 职场文书
销售部主管岗位职责
2013/12/18 职场文书
初中化学教学反思
2014/01/23 职场文书
司机岗位职责说明书
2014/07/29 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
Elasticsearch 数据类型及管理
2022/04/19 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
MySQL 字符集 character
2022/05/04 MySQL
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技