JQuery + PHP-based game example of the ghost lottery, jquery ghost _ PHP Tutorial

JQuery ghost is an example of a lottery game implemented by jquery + PHP. JQuery + PHP provides an example of the ghost lottery game. This document describes the detailed steps of the ghost lottery game implemented by jquery + PHP. Share it with you for your reference. Detailed analysis of jQuery + PHP implementation of the throwing ghost lottery game instance, jquery ghost

This article describes the detailed steps of the ghost game in jQuery + PHP. Share it with you for your reference. The specific analysis is as follows:

This game is based on the rich man game. it combines jQuery and PHP knowledge to design a lottery draw with the number of bonus points to achieve the effect. of course, the lucky draw probability is controllable, developers can make slight modifications to this instance to apply it to the lottery activity scenario on the website. As follows:

Click here to download the complete instance code.

HTML section:

First, we need to prepare two shards and prize materials. these authors have packed and uploaded them. please feel free to download them. We will write down the following html structure code on the html page. wrap is used to place tips and prompt information, and # prize is used to place prizes.

The code is as follows:

CSS section:

We will use CSS technology to standardize the page layout reasonably. we will enclose the prize into a rectangle with 10 positions in total and locate the two shards in the center of the rectangle, during the lucky draw, you can directly click "middle. We can use CSS positioning technology to implement page layout.

The code is as follows:

. Demo {width: Pixel px; 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-pixel px}
. 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: Pixel px; 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: Pixel px; 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 actions, including rolling animation and step-by-step motion animation of the Monopoly prize. among them, we have the knowledge of anti-repeated clicks, ajax interaction, and animation prompts. The entire operation process can be summarized as follows: click submit-> Submit to dice. php sends an ajax request-> complete the rolling animation-> Number of points-> gradually move the animation to the final prize location to stop-> complete the lucky draw.

The code is as follows:

$ (Function (){
$ ('# Dice'). click (function (){
$ ('# Prize li. mask'). remove ();
$ ('. Wrapp'). append ('

'); // Adds a mask.
Var dice1 = $ ('# dice1 ');
Var dice2 = $ ('# dice2 ');
$. GetJSON ('Dice. php', function (json ){
Var num1 = json [0];
Var num2 = json [1];
Diceroll (dice1, num1); // throw an animation
Diceroll (dice2, num2); // throw limit 2 Animation
Var num = parseInt (num1) + parseInt (num2 );
Certificate ('{msg'}.css ('top', '-10px '). fadeIn (500 ). text (num + 'point '). animate ({top: '-50px'}, '123 '). fadeOut (1, 500 );
Roll (0, num); // progressive motion animation
});
});
});

The function diceroll () is an animated animation. it has been explained in the previous article on this site through jQuery's animate () implementation of displacement, latency, and change of the background style to achieve the animation effect.

The code is 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 (200). animate ({top: '-2px'}, 100, function (){
Dice. removeClass ('Dice _ t'). addClass ('Dice _ s ');
}). Delay (200). animate ({opacity: 'show'}, 600, function (){
Dice. removeClass ('Dice _ s'). addClass ('Dice _ e ');
}). Delay (100). animate ({left: '-2px', top: '2px '}, 100, function (){
Dice. removeClass ('Dice _ e'). addClass ('Dice _ '+ num );
Dice.css ('cursor ', 'pointer ');
});
}

The function roll () is crucial. you can use setInterval () to set an interval animation that is executed every 0.5 seconds. Parameter I represents the initial position. parameter step represents the number of steps to be executed. In this example, it is the number of worker points, that is, the number of steps to be taken. We add. mask to the current prize based on I. When the I value is equal to the step, stop the animation and remove the mask of the cursor (to prevent repeated clicks ).

The code is 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); // stop if the specified location is reached
$ ('# Dice_mask'). remove (); // remove the mask.
}
I ++; // proceed
},500 );
}

PHP section:

Dice. php needs to do the following: according to the configured prize probability, get the total number of points, assign the number of two shards based on the total number of points, and finally return the number of two shards to the front-end page.

The code is as follows:

// Set the 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 ),
'10' => array ('id' => 10, 'V' => 0 ),
'11' => array ('id' => 11, 'V' => 10 ),
'12' => array ('id' => 12, 'V' => 5 ),
);

Foreach ($ prize_arr as $ key => $ val ){
$ Arr [$ val ['id'] = $ val ['V'];
}

$ Sum = getRand ($ arr); // Obtain the award id based on the probability and get the total number of points

// Allocate worker points
$ Arrs = array (
'2' => array (1, 1 )),
'3' => array (1, 2 )),
'4' => array (1, 3), array (2, 2 )),
'5' => array (1, 4), array (2, 3 )),
'6' => array (1, 5), array (2, 4), array (3, 3 )),
'7' => array (1, 6), array (2, 7), array (3, 4 )),
'8' => array (2, 6), array (3, 5), array (4, 4 )),
'9' => array (3, 6), array (4, 5 )),
'10' => array (4, 6), array (5, 5 )),
'11' => array (5, 6 )),
'12' => array (6, 6 ))
);

$ Arr_rs = $ arrs [$ sum];
$ I = array_rand ($ arr_rs); // random array
$ Arr_a = $ arr_rs [$ I];
Shuffle ($ arr_a); // disrupt the order
Echo json_encode ($ arr_a );

The getRand () function is used to calculate the probability.

The code is as follows:

// Calculate the probability
Function getRand ($ proArr ){
$ Result = '';

// The total probability precision of the 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 php programming.

Examples in this article describe how to use jQuery + PHP to draw a lottery. Share it with you for your reference. Specific analysis...