jquery+php implementation of the dice lottery game instance, the jquery boson _php tutorial

jquery+php implementation of the dice lottery game instance, jquery boson

This paper 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, a comprehensive use of jquery and PHP knowledge, design to dice points to achieve the effect of the lottery, of course, the probability of the lottery is controllable, developers can use this example slightly modified to apply to the lottery scene in the site. As follows:

Full instance code click here to download this site.

HTML section:

First of all we need to prepare two dice and prize material, these authors have been packed 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, #prize则是用来放置奖品的.

Copy the Code code as follows:

CSS section:

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.

Copy CodeThe code is 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 dice animation, imitation Tycoon Prize progressive animation, which has anti-repetition click Knowledge, Ajax interactive knowledge, animation tips knowledge. The entire operation flow can be summed up as follows: Click Dice----Send Ajax request----Complete the dice animation----step motion animation to the final prize position stop--complete the lottery.

Copy the Code code as follows:
$ (function () {
$ (' #dice '). Click (function () {
$ (' #prize li. Mask '). Remove ();
$ ('. Wrap '). Append (");//Mask
var Dice1 = $ (' #dice1 ');
var Dice2 = $ (' #dice2 ');
$.getjson (' dice.php ', function (JSON) {
var num1 = json[0];
var num2 = json[1];
Diceroll (DICE1,NUM1);//dice 1 animation
Diceroll (dice2,num2);//Dice 2 animation
var num = parseint (NUM1) +parseint (num2);
$ (' #msg '). CSS (' top ', ' -10px '). FadeIn (+). Text (num+ ' point '). Animate ({top: ' -50px '}, ' n '). 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.

Copy the 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 ');
}). (). Animate ({top: ' -2px '},100,function () {
Dice.removeclass (' dice_t '). addclass (' dice_s ');
}). Animate ({opacity: ' Show '},600,function () {
Dice.removeclass (' dice_s '). addclass (' dice_e ');
}). Animate ({left: ' -2px ', Top: ' 2px '},100,function () {
Dice.removeclass (' Dice_e '). addclass (' Dice_ ' +num);
DICE.CSS (' cursor ', ' pointer ');
});
}

function roll () is important to set an interval animation by SetInterval (), which executes once every 0.5 seconds. 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. Mask to the current prize according to I, and when the value of I is equal to step, stop the animation and remove the dice mask (to prevent repeated clicks).

Copy the Code code as follows:
function Roll (i,step) {
var time = setinterval (function () {
if (i>9) {
var t = i-10;
$ (' #d_ ' +t). Append (');
$ (' #d_ ' + (t-1) + '. Mask '). Remove ();
}
$ (' #d_ ' +i). Append (');
$ (' #d_ ' + (i-1) + '. Mask '). Remove ();

if (i==step) {
Clearinterval (time); Stops if the specified position is reached
$ (' #dice_mask '). Remove ();//Remove Mask
}
i++;//, keep moving.
},500);
}

PHP section:

dice.php need 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.

Copy CodeThe code is as follows:
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 and get the total number of points

Allocating 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 (+)),
' 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);//random array
$arr _a = $arr _rs[$i];
Shuffle ($arr _a);//Scramble Order
Echo Json_encode ($arr _a);

The function Getrand () is used to calculate the probability

Copy the Code code as follows:
Calculate probability
function Getrand ($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;
}

I hope this article is helpful to everyone's PHP programming.

http://www.bkjia.com/PHPjc/937083.html www.bkjia.com true http://www.bkjia.com/PHPjc/937083.html techarticle jquery+php Implementation of the dice lottery game example, JQuery boson This article describes the jquery+php implementation of the Dice lottery game detailed steps. Share to everyone for your reference. Specific analysis ...

