使用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弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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
xajax写的留言本
2006/11/25 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php实现加减法验证码代码
2014/02/14 PHP
php验证session无效的解决方法
2014/11/04 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
php 可变函数使用小结
2018/06/12 PHP
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python3标准库总结
2019/02/19 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
《月迹》教学反思
2014/02/19 职场文书
工会经费申请报告
2015/05/15 职场文书
建国大业电影观后感
2015/06/01 职场文书
爱护公物主题班会
2015/08/17 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
python spilt()分隔字符串的实现示例
2021/05/21 Python
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript