使用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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
详解vue中localStorage的使用方法
Nov 22 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的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
python实现备份目录的方法
2015/08/03 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
给学校的建议书范文
2014/05/15 职场文书
介绍信模板
2015/01/31 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Python基础之元类详解
2021/04/29 Python
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电