新普京网站-澳门新普京 > 新普京网站 > 采纳jQuery达成的掷色子游戏动漫效果

采纳jQuery达成的掷色子游戏动漫效果

2019/12/29 20:38

达成原理:当色子掷出后,通过jQuery的animate(卡塔尔(قطر‎函数改换色子位移,中间投入延时间效果与利益果,并转移色子背景,最终动漫运营到任性发生的罗列时停下,并呈现掷出的罗列。其实正是卡通进程参加八个例外图片的帧,帧数越来越多职能越好,然后逐帧运维后就产生了动漫效果。生龙活虎、希图干活大家必要筹算色子素材,本示例中,笔者利用从网络上得到到的色子素材,大家要做拍卖的是将6个骰子图片,以致中间过渡效果的图纸放在肖似张图片上,保存为dice.png,用作色子背景图。载入jQuery库,那是必得的。复制代码 代码如下:

 大家一定都玩过掷色子的14日游,今日本人给大家大饱眼福的是如何运用jQuery来落到实处掷色子的卡通效果,通过jQuery的animate(卡塔尔国自定义动漫函数并整合CSS背景图片切换完结的卡通片效果

下一场在HTML页面包车型大巴body中投入以下代码,在那之中#dice是用来放置色子的,#result是用来显示提醒新闻的。复制代码 代码如下:

达成原理:当色子掷出后,通过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"State of Qatar;      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+1State of Qatar;//产生随机数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(卡塔尔国;//移除遮罩          }State of Qatar;      }卡塔尔(قطر‎;  }卡塔尔国; 关于幸免再度点击的主意非常多,jQuery提供了one(State of Qatar,live(卡塔尔(قطر‎,bind(卡塔尔国,on(State of Qatar等等这一个函数在该实例中都低效,所以笔者想了个办法,当点击色子后起先动漫时,用三个和色子大小雷同的晶莹遮罩层将色子遮住,使得在动漫运转中不可一而再延续重复点击色子,当动漫运维成功后,再将遮罩层移除,那样色子就能够再度被点击了。 以上掷色子的卡通效果正是模拟了flash的帧动漫,通过时间轴来播放逐帧运营,而采用jQuery可以替代flash实现如此的卡通片效果,就算功效未有flash的炫。本文的掷色子动漫效果是为下期文章做铺垫,上期文章笔者将给我们介绍结合jQuery、HTML、CSS、PHP、MySQL的综合性本领文章及实例代码,讲明掷色子抽取奖金游戏,能够决定掷特出子点数的概率,也是一个意味游戏。

请直接点击上面的色子!

...

上一篇:jquery如何根据值设置默认的选中项_jquery_脚本之家 下一篇:js中用window.open打开多个窗口的name问题_javascript技巧_脚本之家