An example of the lottery game is made by PHP. The result of the lottery is achieved by throwing the dice points, which adds some interest to the lottery.

We will write down the following html structure code in the html page,. wrap is used to place the color and prompt information, and "print" is used to place the prize.

 1 <div class="demo">  
 2     <div class="wrap">  
 3         <div id="msg"></div>  
 4            <div id="dice"><span class="dice dice_1" id="dice1"></span>  
 5         <span class="dice dice_6" id="dice2"></span></div>  
 6     </div>  
 7     <ul id="prize">  
 8         <li id="d_0"><img src="images/0.gif" alt="start"></li>  
 9         <li id="d_1"><img src="images/1.gif" alt="100 yuan in cash"></li>  
10         <li id="d_2"><img src="images/2.gif" alt="Teddy bear"></li>  
11         <li id="d_3"><img src="images/7.gif" alt="Thanks for your participation."></li>  
12         <li id="d_4"><img src="images/3.gif" alt="iphone 5s"></li>  
13         <li id="d_5"><img src="images/4.gif" alt="Notebook computer"></li>  
14         <li id="d_6"><img src="images/7.gif" alt="Thanks for your participation."></li>  
15         <li id="d_7"><img src="images/5.gif" alt="SLR camera"></li>  
16         <li id="d_8"><img src="images/6.gif" alt="Sedan"></li>  
17         <li id="d_9"><img src="images/7.gif" alt="Thanks for your participation."></li>  
18     </ul>  
19 </div>

We use jQuery to complete the front-end actions, including the color sub animation, the gradual motion animation of prizes, including the anti repeated click knowledge, ajax interaction knowledge, animation prompt knowledge. The whole operation process can be simply summarized as: click on the color chip - > send ajax request to dice.php - > complete the color chip animation - > prompt points - > gradually move the animation to the final prize position to stop - > complete the lottery.

 1 $(function(){  
 2     $("#dice").click(function(){  
 3         $("#prize li .mask").remove();  
 4         $(".wrap").append("<div id='dice_mask'></div>");//Add mask  
 5         var dice1 = $("#dice1");  
 6         var dice2 = $("#dice2");  
 7         $.getJSON("dice.php",function(json){  
 8             var num1 = json[0];  
 9             var num2 = json[1];  
10             diceroll(dice1,num1);//Dice 1 animation  
11             diceroll(dice2,num2);//Dice 2 animation  
12             var num = parseInt(num1)+parseInt(num2);  
13             $("#msg").css("top","-10px").fadeIn(500).text(num+'spot').animate({top:'-50px'},'1000').fadeOut(500);  
14             roll(0, num);//Step by step motion animation  
15         });  
16     });  
17 });

dice.php file code: according to the configured prize probability, get the total number of points, allocate the number of points of two color particles according to the total number of points, and finally return the number of points of two color particles to the front page

 1 $(function(){  
 2     $("#dice").click(function(){  
 3         $("#prize li .mask").remove();  
 4         $(".wrap").append("<div id='dice_mask'></div>");//Add mask  
 5         var dice1 = $("#dice1");  
 6         var dice2 = $("#dice2");  
 7         $.getJSON("dice.php",function(json){  
 8             var num1 = json[0];  
 9             var num2 = json[1];  
10             diceroll(dice1,num1);//Dice 1 animation  
11             diceroll(dice2,num2);//Dice 2 animation  
12             var num = parseInt(num1)+parseInt(num2);  
13             $("#msg").css("top","-10px").fadeIn(500).text(num+'spot').animate({top:'-50px'},'1000').fadeOut(500);  
14             roll(0, num);//Step by step motion animation  
15         });  
16     });  
17 });
18 dice.php
19 According to the configured prize probability, get the total number of points, allocate the number of points of two color particles according to the total number of points, and finally return to the number of points of two color particles on the front page
20 
21 //Set winning probability  
22 $prize_arr = array(  
23     '2' => array('id'=>2,'v'=>10),  
24     '3' => array('id'=>3,'v'=>20),  
25     '4' => array('id'=>4,'v'=>5),  
26     '5' => array('id'=>5,'v'=>5),  
27     '6' => array('id'=>6,'v'=>20),  
28     '7' => array('id'=>7,'v'=>2),  
29     '8' => array('id'=>8,'v'=>3),  
30     '9' => array('id'=>9,'v'=>20),  
31     '10' => array('id'=>10,'v'=>0),  
32     '11' => array('id'=>11,'v'=>10),  
33     '12' => array('id'=>12,'v'=>5),  
34 );  
35   
36 foreach ($prize_arr as $key => $val) {  
37     $arr[$val['id']] = $val['v'];  
38 }  
39   
40 $sum = getRand($arr); //Award based on probability id，Get total points  
41   
42 //Assign chromatic number  
43 $arrs = array(  
44     '2' => array(array(1,1)),  
45     '3' => array(array(1,2)),  
46     '4' => array(array(1,3),array(2,2)),  
47     '5' => array(array(1,4),array(2,3)),  
48     '6' => array(array(1,5),array(2,4),array(3,3)),  
49     '7' => array(array(1,6),array(2,7),array(3,4)),  
50     '8' => array(array(2,6),array(3,5),array(4,4)),  
51     '9' => array(array(3,6),array(4,5)),  
52     '10' => array(array(4,6),array(5,5)),  
53     '11' => array(array(5,6)),  
54     '12' => array(array(6,6))  
55 );  
56   
57 $arr_rs = $arrs[$sum];  
58 $i = array_rand($arr_rs);//Random array  
59 $arr_a = $arr_rs[$i];  
60 shuffle($arr_a);//Disorder sequence  
61 echo json_encode($arr_a);

From: https://www.sucaihuo.com/php/157.html Reprint please indicate the source!