The principle: When the dice thrown by the jQuery animate () function to change the dice displacement, intermediate added delay effect, and transform boson background, the final animation when you run into randomly generated points to stop and throw the show points. In fact, the process of adding a number of different animated picture frames (with flash animation movie frame), the more the better frames, frame by frame and then run after the formation of the animation.
Ready
We need to prepare the dice material, in this example, I used to get from the network dice material, we need to do is to deal with six dice pictures (1-6 points), and an intermediate transition effects pictures (do motion blur) on the same picture, save it as dice.png, used as dice background.
Loading jQuery library, this is a must.
<script type="text/javascript" src="js/jquery.js"></script> Then join in the body HTML pages in the following code, which is used to place #dice dice, # result is used to display the prompt information.
<div class="wrap">
<div id="dice" class="dice dice_1"></div>
</div>
<p id="result">Please click above dice!</p>CSS
We use background pictures dice.png loaded into .dice in. Then we were used to locate several styles with different background-position dice with different values and transition point and figure renderings. Picture transition effects which I do a simple obfuscation, we can also use css3 to handle image blur. Note #dice_mask is used to make anti-repeated clicks, will be mentioned later.
.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
When you click the color midnight, the first pre-dice style (empty style after the last movie), and the dice with a transparent cover anti #dice_mask repeated clicks, and generates a random number from 1 to 6, and then through animate () function to change the dice displacement, change dice class makes the transition appear blurred background image, then a slight delay delay (), and then went into the next frame of the animation, the end of the last movie, dice the class styles targeted to on dice_x, x represents the number of points, which is the number of points obtained after the throw dice, remove the masking effect, they can continue to click on the dice.
$(function(){
var dice = $("#dice");
dice.click(function(){
$(".wrap").append("<div id='dice_mask'></div>");//add mask
dice.attr("class","dice");//After clearing the last points animation
dice.css('cursor','default');
var num = Math.floor(Math.random()*6+1);//random num 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("Your throwing points are<span>"+num+"</span>");
dice.css('cursor','pointer');
$("#dice_mask").remove();//remove mask
});
});
});More dice animation is the simulation of a flash animation frames to play frame by frame to run through the timeline, and the use of jQuery can replace flash animation to complete this, although the effect is not the flash-hyun. Dice animation of this article is to pave the way for the next phase of the article, the next article I will tell you of combining jQuery, HTML, CSS, PHP, MySQL and comprehensive technical articles and code examples, explain dice lottery game, you can control the throw probability outstanding sub points, but also a fun game, so stay at GOOCODE for JQuery Scripts.
