jquery+php implementation of the Dice lottery game examples _php skills

This example describes the detailed steps of the jquery+php implementation of the dice lottery game. Share to everyone for your reference. The specific analysis is as follows:

The game is a monopoly game for the background, the comprehensive use of jquery and PHP knowledge, designed to roll dice points to achieve the results of the lottery, of course, lottery probability is controllable, developers can modify this instance slightly can be applied to the site of the lottery activities in the scene. The effect chart is as follows:

Full instance code click here to download the site.

HTML section:

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 messages, #prize则是用来放置奖品的.

Copy Code code as follows:

<div class= ' demo ' >
<div class= ' wrap ' >
<div id= ' msg ' ></div>
<div id= ' dice ' ><span class= ' dice dice_1 ' id= ' Dice1 ' ></span>
<span class= ' Dice dice_6 ' id= ' Dice2 ' ></span></div>
</div>
<ul id= ' Prize ' >
<li id= ' d_0 ' ></li>
<li id= ' d_1 ' ></li>
<li id= ' d_2 ' ></li>
<li id= ' d_3 ' ></li>
<li id= ' d_4 ' ></li>
<li id= ' d_5 ' ></li>
<li id= ' d_6 ' ></li>
<li id= ' d_7 ' ></li>
<li id= ' d_8 ' ></li>
<li id= ' d_9 ' ></li>
</ul>
</div>

CSS section:

We want to use CSS technology to standardize the layout of the page, we will be surrounded by the prizes into a rectangle, a total of 10 positions, the two dice located in the center of the rectangle, the lottery can be directly clicked in the middle of the dice. We can use CSS positioning technology to achieve the layout of the page.

Copy Code code as follows:

. 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; Cursor:pointer}
#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 section:

We use Jqquery to complete the front end action, including the roll dice animation, imitation tycoon prizes step-by-Step motion animation, which has anti-duplication click Knowledge, Ajax interactive knowledge, animation tips knowledge. The entire operation process can be simply summed up as: Click the dice-> to dice.php send Ajax request-> complete the dice animation-> hint points-> step-by-Step motion animation to the final prize location stop-> complete the draw.

Copy Code code as follows:

$ (function () {
$ (' #dice '). Click (function () {
$ (' #prize Li Mask '). Remove ();
$ ('. Wrap '). Append (' <div id= ' dice_mask ' ></div> ');/+ Mask
var Dice1 = $ (' #dice1 ');
var Dice2 = $ (' #dice2 ');
$.getjson (' dice.php ', function (JSON) {
var num1 = json[0];
var num2 = json[1];
Diceroll (DICE1,NUM1);/Roll Dice 1 animation
Diceroll (dice2,num2);/Roll Dice 2 animation
var num = parseint (NUM1) +parseint (num2);
$ (' #msg '). CSS (' top ', ' -10px '). FadeIn. Text (num+ ' point '). Animate ({top: ' -50px '}, ' 1000 '). fadeout (500);
Roll (0, num);//Progressive motion animation
});
});
});

function Diceroll () is a boson motion animation, in the previous article in this site has been explained, is through jquery animate () to achieve the displacement, delay, change background style to achieve the animation effect.

Copy Code code as follows:

function Diceroll (dice,num) {
Dice.attr (' class ', ' dice ');//Clear the number of points after the last animation
DICE.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, setinterval () to set an interval animation, every 0.5 seconds time to perform. The parameter I represents the initial position, and the parameter step represents the number of steps that need to be performed, in this case the number of the dice, that is, how many steps to take. We add. Mask to the current prize according to I, when the value of I is equal to step, stop the animation and remove the mask of the dice (prevent repeated clicks).

Copy Code code as follows:

function Roll (i,step) {
var time = setinterval (function () {
if (i>9) {
var t = 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); Stop if you reach the specified location
$ (' #dice_mask '). Remove ();//Removing mask
}
i++;//, keep moving.
},500);
}

PHP section:

dice.php need to do is: according to the allocation of a good prize probability, get the total number of points, according to the total number of two dice points allocated, and finally returned to the front page two dice points.

Copy Code code as follows:

Set a winning probability
$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),
' => 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 award ID according to probability, get the total number of points

Allocate Dice points
$arrs = Array (
' 2 ' => Array (array (1,1)),
' 3 ' => Array (array (1,2)),
' 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 (4,4)),
' 9 ' => Array (Array (3,6), Array (4,5)),
' => 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);//random array
$arr _a = $arr _rs[$i];
Shuffle ($arr _a);//Upset Order
Echo Json_encode ($arr _a);

function Getrand () to calculate probabilities

Copy Code code as follows:

Calculation probability
function Getrand ($PROARR) {
$result = ';

The total probability precision 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;
}

I hope this article will help you with your PHP program design.