Jquery+php Dice Draw

Original jquery+php Dice Draw

This article takes the monopoly game as the background, uses the jquery and the PHP knowledge comprehensively, designs to draw the dice points to achieve the lottery result, the lottery probability is controllable, the developer may use this instance slightly to modify can apply in the lottery activity scene in the website.

View Demo Download source code

HTML First we need to prepare two dice and prize material, these authors have been packaged and uploaded, please rest assured download. We will write the following HTML structure code in the HTML page,. Wrap is used to place the dice and cue information,#The prize is used to place prizes. <divclass= "Demo" > <divclass= "Wrap" > <div id= "msg" ></div> <div id= "Dice" ><spanclass= "Dice dice_1" id= "Dice1" ></span> <spanclass= "Dice dice_6" id= "Dice2" ></span></div> </div> <ul id= "prize" > <li id= "d_0" & Gt;</li> <li id= "d_1" > <li id= "d_2" ></li> <li id= "D_3" > </li> <li id= "D_4" ></li> <li id= "d_5" ></li> <li id= "D_6" &G T;</li> <li id= "d_7" > <li id= "d_8" ></li> <li id= "D_9" >< IMG src= "Images/7.gif" alt= "Thank you for participation" ></li> </ul> </div>CSS we want to use CSS technology to properly standardize the layout of the page, we will enclose the prize in a rectangle, a total of 10 positions, the two dice positioned in the middle of the rectangle, the lottery can be directly clicked in the middle of the dice. These we can use CSS positioning technology to achieve page layout. . demo{width:650px; height:420px; margin:60px auto 10px auto; position:relative;} wrap{width:200px; height:100px; position:absolute; margin-left:220px; margin-top:140px; z-index:1000;} #msg{display:none;width:50px, height:20px, padding:4px background: #ffc; border:1px solid #fc9; Text-align:center; Color#f30; font-size:18px; position:absolute; z-index:1001; right:-20px; top:-10px}. dice{width:90px; height:90px; display:block;float: Left; Background:url (dice.png) no-repeat; Cursorpointer}#dice_mask{width:200px; height:100px; background: #fff; opacity:0; position:absolute; top:0; left:0; z-index:999} . 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}#Prize{position:relative}#prize Li{position:absolute; width:150px; height:112px; border:1px Solid #d3d3d3}#d_0{left:0; top:0}#d_1{left:160px; top:0}#d_2{left:320px; top:0}#d_3{left:480px; top:0}#d_4{left:480px; top:128px}#d_5{left:480px; top:256px}#d_6{left:320px; top:256px}#d_7{left:160px; top:256px}#d_8{left:0; top:256px}#d_9{left:0; top:128px}mask{opacity:0.6; width:150px; height:112px; line-height:32px; background:#FFC; z-index:1001; Position:absolute; top:0; left:0; Text-align:center; Font-size:16px} jquery We use Jqquery to complete the front-end action, including the dice animation, imitation Tycoon Prize progressive animation, which has anti-duplication click Knowledge, Ajax interactive knowledge, animation tips knowledge. The entire operation process can be summarized as follows: Click the dice-E Send Ajax request---Complete the dice animation---step motion animation to final prize position stop,complete the lottery. $(function(){     $("#dice"). Click (function(){         $("#prize li. Mask").Remove (); $(". Wrap"). Append ("<div id= ' Dice_mask ' ></div>");//Add a mask        varDice1 = $ ("#dice1"); varDice2 = $ ("#dice2"); $. Getjson ("dice.php",function(JSON) {varNUM1 = json[0]; varnum2 = json[1]; Diceroll (Dice1, NUM1);//Dice 1 AnimationDiceroll (DICE2,NUM2);//Dice 2 Animation            varnum = parseint (NUM1) +parseint (num2); $("#msg"). CSS ("Top", " -10px"). FadeIn (+). Text (num+ ' point '). Animate ({top: ' -50px '}, ' + '). FadeOut (500); Roll (0, num);//Progressive Motion animation        }); }); }); function Diceroll () is a dice motion animation, in the previous article in this site has been explained, is through the jquery animate () Implementation of the displacement, delay, change the background style to achieve the animation effect. functionDiceroll (Dice,num) {Dice. attr ("Class", "dice");//clears the number of points after the last animationDICE.CSS (' cursor ', ' default '); Dice. Animate ({left: ' +2px '}, 100,function() {Dice. addclass ("dice_t"); }). Delay ($). Animate ({top: ' -2px '},100,function() {Dice. Removeclass ("dice_t"). AddClass ("dice_s").); }). Delay ($). Animate ({opacity: ' Show '},600,function() {Dice. Removeclass ("dice_s"). AddClass ("Dice_e").); }). Delay. Animate ({left: ' -2px ', Top: ' 2px '},100,function() {Dice. Removeclass ("Dice_e"). AddClass ("Dice_" +num); Dice. CSS (' cursor ', ' pointer '); }); } function Roll () is critical, set an interval animation by setinterval (), every 0.5 Seconds to execute one time. The parameter I represents the initial position, and the parameter step represents the number of steps that need to be executed, in this case, the number of dice, that is, the steps that need to be taken. We add to the current prize according to I.mask, when the value of I is equal to step, stop the animation and remove the dice mask (to prevent repeated clicks). functionRoll (I,Step) {     var  Time= SetInterval (function(){         if(i>9){             vart = i-10; $("#d_" +t). Append ("<div class= ' mask ' ></div>"); $("#d_" + (t-1) + ". Mask").Remove (); }         $("#d_" +i). Append ("<div class= ' mask ' ></div>"); $("#d_" + (i-1) + ". Mask").Remove (); if(i==Step) {Clearinterval ( Time);//stops if the specified position is reached$ ("#dice_mask"). Remove ();//Remove Matte} i++;//Keep Moving .},500); } Phpdice.What PHP needs to do is: according to the probability of the allocation of prizes, the total number of points, according to the total number of points two dice of the allocation of points, and finally returned to the front page two dice points. Its code is simply modified on the basis of the article: dice guessing the size of the game (controllable probability). //set the probability of winning$prize _arr=Array(     ' 2 ' + =Array(' id ' =>2, ' V ' =>10), ' 3 ' + =Array(' id ' =>3, ' V ' =>20), ' 4 ' + =Array(' id ' =>4, ' V ' =>5), ' 5 ' + =Array(' id ' =>5, ' V ' =>5), ' 6 ' + =Array(' id ' =>6, ' V ' =>20), ' 7 ' + =Array(' id ' =>7, ' V ' =>2), ' 8 ' + =Array(' id ' =>8, ' V ' =>3), ' 9 ' + =Array(' id ' =>9, ' V ' =>20), ' ten ' =Array(' id ' =>10, ' V ' =>0), ' one ' = 'Array(' id ' =>11, ' V ' =>10), ' + ' =Array(' id ' =>12, ' V ' =>5), ); foreach($prize _arr  as $key=$val) {     $arr[$val[' ID ']] =$val[' V ']; }  $sum= Getrand ($arr);//Get the prize ID based on probability, get total points//allocate dice points$arrs=Array(     ' 2 ' + =Array(Array(+)), ' 3 ' =Array(Array(), ' 4 ' = =Array(Array(1,3),Array(2,2)), ' 5 ' =Array(Array(1,4),Array(2,3)), ' 6 ' =Array(Array(1,5),Array(2,4),Array(3,3)), ' 7 ' =Array(Array(1,6),Array(2,7),Array(3,4)), ' 8 ' =Array(Array(2,6),Array(3,5),Array(bis)), ' 9 ' =Array(Array(3,6),Array(4,5)), ' ten ' =Array(Array(4,6),Array(5,5)), ' one ' =Array(Array(5,6)), ' + ' =Array(Array(6,6)) ); $arr _rs=$arrs[$sum]; $i=Array_rand($arr _rs);//randomly fetching an array$arr _a=$arr _rs[$i]; Shuffle($arr _a);//Scramble OrderEchoJson_encode ($arr _a); function Getrand () to calculate the probability, in this site more than one draw article use, Detailed introduction please refer to this site article: PHP+jquery for the flip-flop draw. //Calculate probabilityfunctionGetrand ($PROARR) {     $result= ' '; //the total probability accuracy of probability array    $proSum=Array_sum($PROARR); //probability array Loop    foreach($PROARR  as $key=$proCur) {         $randNum=Mt_rand(1,$proSum); if($randNum<=$proCur) {             $result=$key;  Break; } Else {             $proSum-=$proCur; }     }     unset($PROARR); return $result; } Disclaimer: This article is the original article, Helloweba. com and author have copyright, if need to reprint, please specify from helloweba.com and retain the original link, otherwise regarded as infringement.

Jquery+php Dice Draw