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

  次阅读 作者:智能小宝 来源:互联网 2016-01-26 11:09 我要评论(0)

大家一定都玩过掷色子的游戏,今天我给大家分享的是如何使用jQuery来实现掷色子的动画效果,通过jQuery的animate()自定义动画函数并结合CSS背景图片切换实现的动画效果

实现原理:当色子掷出后,通过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(){

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...