Example of the dice lottery game implemented by jQuery+PHP, jquery dice

Example of dice lottery game implemented by jQuery+PHP, jquery dice

The example in this article describes the detailed steps of the dice lottery game implemented by jQuery+PHP. Share it with everyone for your reference. The specific analysis is as follows:

This game is based on the Monopoly game. It uses jQuery and PHP knowledge to design a lottery effect by throwing dice points. Of course, the lottery probability is controllable. Developers can slightly modify this example. It can be applied to the lottery scenario on the website. The rendering is as follows:

Click here to download the complete example code from this website.

HTML part:

First we need to prepare two dice and prize materials. These authors have already packaged and uploaded them, so please feel free to download them. We will write the following html structure code in the html page. .wrap is used to place the dice and prompt information, and #prize is used to place the prize.

Copy code The code is as follows:

CSS part:

We need to use CSS technology to reasonably standardize the page layout. We surround the prizes in a rectangle with 10 positions in total, and position the two dice in the center of the rectangle. You can directly click on the middle dice during the draw. We can use CSS positioning technology to implement page layout.

Copy code

The 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部分：

我们使用jQquery来完成前端动作，包括掷色子动画，仿大富翁奖品逐步运动动画，其中有防重复点击知识、ajax交互知识，动画提示知识。整个操作流程可简单概括为：点击色子->向dice.php发送ajax请求->完成掷色子动画->提示点数->逐步运动动画到最终奖品位置停止->完成抽奖。

复制代码代码如下:

$(function(){
    $('#dice').click(function(){
        $('#prize li .mask').remove();
        $('.wrap').append('

');//加遮罩
        var dice1 = $('#dice1');
        var dice2 = $('#dice2');
        $.getJSON('dice.php',function(json){
            var num1 = json[0];
            var num2 = json[1];
            diceroll(dice1,num1);//掷色子1动画
            diceroll(dice2,num2);//掷色子2动画
            var num = parseInt(num1)+parseInt(num2);
            $('#msg').css('top','-10px').fadeIn(500).text(num+'点').animate({top:'-50px'},'1000').fadeOut(500);
            roll(0, num);//逐步运动动画
        });
    });
});

函数diceroll()是一个色子运动动画，在本站前面的文章中已讲解过，就是通过jQuery的animate()实现的位移、延时、变化背景样式来实现的动画效果。

复制代码代码如下:

The function roll() is very important. Set an interval animation through setInterval() and execute it 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, it is the number of dice points, that is, the number of steps that need to be taken. We add .mask to the current prize based on i. When the value of i is equal to step, the animation is stopped and the die's mask is removed (to prevent repeated clicks).

Copy code 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){
                                                                                                              ,,,,,,,,,,;                  $('#dice_mask').remove();//Remove mask
          }
         i++;//Keep moving forward
},500);
}

PHP part:

What dice.php needs to do is: get the total points based on the configured prize probability, distribute the points of the two dice according to the total points, and finally return the points of the two dice to the front-end page.

Copy code The 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),
'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); //Get the award id based on probability and get the total 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)),
'10' => array(array(4,6),array(5,5)),
'11' => array(array(5,6)),
'12' => array(array(6,6))
);

$arr_rs = $arrs[$sum];
$i = array_rand($arr_rs);//Randomly pick the array
$arr_a = $arr_rs[$i];
shuffle($arr_a);//Shuffle the order
echo json_encode($arr_a);

The function getRand() is used to calculate probability

Copy code The code is as follows:

//Calculate probability
function getRand($proArr) {
$result = '';

//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 will be helpful to everyone’s PHP programming design.