The effect of the dice game animation using jquery

  Everyone must have played the dice game, today I share with you how to use jquery to achieve the animation effect of the dice, through the jquery animate () Custom animation function and the CSS background picture to toggle the implementation of animation effect

Implementation principle: When the dice roll, through the animate () function of jquery to change the boson displacement, the middle added the delay effect, and transform the dice background, the final animation to run to the number of randomly generated points to stop, and show the number of points thrown. In fact, the animation process to add a number of different pictures of the frame (with the Flash animation film frame), the more frames the better the effect, and then the frame after the formation of the animation effect. First, we need to prepare the dice material, in this example, I take the boson footage from the network, and we're going to deal with the 6 dice pictures (1-6 dots) and the middle transition effect picture (do motion blur) on the same picture, Save as Dice.png, as a boson background. Load into the jquery library, which is a must.     Copy code code as follows: <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, #result是用来显示提示信息的. Copy code code as follows: <div id= "Dice" class= "Dice dice_1" ></div>  <p id= "Result" > Please click on the dice above! </p> Two, CSS code we use background to load the picture dice.png into. Dice. Then we used several styles to locate different dice points and transition effects through different background-position values. One of the transition effects of the picture I did a simple fuzzy processing, you can also use CSS3 to deal with the blur effect of the picture. Note that #dice_mask is used to do anti-repeated clicks, which will be mentioned later. The code is as follows:. 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}  Three, jquery code when click Dice, first preset dice style (empty the last animation style), the dice with transparent #dice_mask cover anti-repeated clicks, and produce a random number of 1-6, and then through the animate () function, Change the boson displacement, changing the dice class makes the transition blurred background picture, and then a little delay delay (), and then into the next frame animation, the end of the animation, the Dice class style positioning to the dice_x, X points, that is, the number of points after throwing excellent son, Remove the mask effect, and you can continue to click the dice.   Code as follows: $ (function () {      var dice = $ ("#dice");      Dice.click (function () {  & nbsp       DICE.ATTR ("Class", "dice");//Erase last animated points           DICE.CSS ("Cursor", " Default "); &nbsp         $ (". Wrap"). Append ("<div id= ' Dice_mask ' ></div>");/+ mask           var num = Math.floor (math.random () *6+1);//Generate random number 1-6          Dice.animate ({left: ' + 2px '}, 100,function () {              Dice.addclass ("dice_t");      &NBSP ;  }). Delay. Animate ({top: ' -2px '},100,function () {              Dice.removeclass ("dice_t"). AddClass ("dice_s");         }). Delay ({animate: ' Show '},600,function () {              Dice.removeclass ("dice_s") addclass ("Dice_e");          }). Delay. Animate ({left: ' -2px ', Top: ' 2px '},100,function () {      & nbsp       Dice.removeclass ("Dice_e"). AddClass ("Dice_" +num);              $ ("#result"). HTML ("You are throwing points is <span> +num+" </span>");               DICE.CSS (' cursor ', ' pointer ');            &N Bsp $ ("#dice_mask"). Remove ()//Remove mask          });     }); }); There are a lot of ways to prevent repeated clicks, jquery provides one (), Live (), bind (), on (), etc. these functions do not work in that instance, so I figured out a way to hide the dice with a transparent mask layer that is the same size as the dice when you click on the dice. So that in the animation operation can not be repeated click Dice, when the animation is completed, and then remove the mask layer, so that the dice will be clicked again. Above the animation effect of the dice is to simulate the flash frame animation, through the timeline to play a frame run, and the use of jquery can replace Flash to complete such animation effect, although the effect is not flash dazzle. This article of the dice animation effect is to pave the next article, the next article I will introduce a combination of jquery, HTML, CSS, PHP, MySQL comprehensive technical articles and instance code, to explain the dice lottery game, you can control the probability of throwing excellent sub points, but also a fun game.