Using jQuery to achieve the dice game animation effect

How to do it: after a dice is thrown, the animate() function of jQuery is used to change the dice displacement, add delay effect in the middle, and transform the dice background. Finally, the animation is stopped when it runs to the randomly generated points, and the points are displayed. In fact, the animation process is to add a number of different picture frames (as in the flash animation film), the more the better effect, and then frame by frame after the formation of the animation effect.
Preparation work
We need to prepare the dice material. In this example, I used the dice material obtained from the network. What we need to do is to put the six dice pictures (1-6 points) and the pictures of intermediate transition effect (doing motion blur processing) on the same picture, and save them as dice.
Loading the jQuery library is a must.

<script type="text/javascript" src="js/jquery.js"></script>

Then add the following code to the body of the HTML page, where #dice is used to place the dice and #result is used to display the prompt.

<div id="dice" class="dice dice_1"></div> 
<p id="result"> Please click directly on the above dice! </p>

Two, CSS code
We used background to load the picture dice. PNG into dice. Then we used several styles to position the different number of dots and transition effect through different background-position values. I did a simple blur on the transition images, and you can also use css3 to blur the images. Note that #dice_mask is used to prevent duplicate clicks, which 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 code
When click the dice, dice first preset style (empty after the last animation style), the dice with transparent cover # dice_mask clicks, and generate a random number 1-6, and then through the animate () function, change the dice displacement, change the dice class makes a transition blur the background image, and then make a little delay delay (), then get to the next frame animation, and finally at the end of the animation, dice class style positioning to dice_x, x said points, which is obtained after rolled the dice points, remove the mask effect, You can click on the dice again.

$(function(){ 
    var dice = $("#dice"); 
    dice.click(function(){ 
        dice.attr("class","dice");//Clear the points after the last animation
        dice.css("cursor","default"); 
        $(".wrap").append("<div id='dice_mask'></div>");//Add mask
        var num = Math.floor(Math.random()*6+1);//Generate random Numbers 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(" You roll a number of <span>"+num+"</span>"); 
            dice.css('cursor','pointer'); 
            $("#dice_mask").remove();//Remove the mask
        }); 
    }); 
});

About preventing many clicks, jQuery offers one (), the live (), bind (), on (), etc. These functions will work in this instance, so I think of a way to, when after click the dice start animation, with a transparent and dice size as mask layer will obscure dice, in animation is not continuous in the operation of the repeat click the dice, when animation run is completed, and then remove the mask layer, which can again be clicked.
The animation effect of the dice above is to simulate the flash frame animation, through the timeline to play frame by frame, and the use of jQuery can replace flash to complete such animation effect, although the effect is not flash flash flash flash. The effect of dice animation in this paper is to lay the foundation for the next article. In the next article, I will introduce to you a comprehensive technical article and example code combining jQuery, HTML, CSS, PHP and MySQL, and explain the dice lottery game, which can control the probability of dice points, and is also a fun game.