jQuery+PHP实现的掷色子抽奖游戏实例

jQuery部分：

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

复制代码代码如下:
$(function(){
   $("#dice").click(function(){
       $("#prizeli.mask").remove();
       $(".wrap").append("<divid="dice_mask"></div>");//加遮罩
       vardice1=$("#dice1");
       vardice2=$("#dice2");
       $.getJSON("dice.php",function(json){
           varnum1=json[0];
           varnum2=json[1];
           diceroll(dice1,num1);//掷色子1动画
           diceroll(dice2,num2);//掷色子2动画
           varnum=parseInt(num1)+parseInt(num2);
           $("#msg").css("top","-10px").fadeIn(500).text(num+"点").animate({top:"-50px"},"1000").fadeOut(500);
           roll(0,num);//逐步运动动画
       });
   });
});

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

复制代码代码如下:
functiondiceroll(dice,num){
   dice.attr("class","dice");//清除上次动画后的点数
   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");
   });
}

函数roll()至关重要，通过setInterval()设置一个间隔动画，每隔0.5秒时间执行一次。参数i代表初始位置，参数step代表需要执行的步数，在本例中就是色子的点数，即需要走的步数。我们根据i给当前奖品加上.mask，当i的值与step相等时，停止动画，并且移除色子的遮罩（防止重复点击）。

复制代码代码如下:
functionroll(i,step){
   vartime=setInterval(function(){
       if(i>9){
           vart=i-10;
           $("#d_"+t).append("<divclass="mask"></div>");
           $("#d_"+(t-1)+".mask").remove();
       }
       $("#d_"+i).append("<divclass="mask"></div>");
       $("#d_"+(i-1)+".mask").remove();
        
       if(i==step){
            clearInterval(time);//如果到达指定位置则停止
            $("#dice_mask").remove();//移除遮罩
       }
       i++;//继续前进
   },500);
}

PHP部分：

dice.php需要做的事情有：根据配置好的奖品概率，得到总点数，根据总点数进行两粒色子的点数分配，最后返回给前端页面两粒色子的点数。

复制代码代码如下:
//设置中奖概率
$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_arras$key=>$val){
   $arr[$val["id"]]=$val["v"];
}
 
$sum=getRand($arr);//根据概率获取奖项id，得到总点数
 
//分配色子点数
$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);//随机取数组
$arr_a=$arr_rs[$i];
shuffle($arr_a);//打乱顺序
echojson_encode($arr_a);

函数getRand()用来计算概率

复制代码代码如下:
//计算概率
functiongetRand($proArr){
   $result="";
 
   //概率数组的总概率精度
   $proSum=array_sum($proArr);
 
   //概率数组循环
   foreach($proArras$key=>$proCur){
       $randNum=mt_rand(1,$proSum);
       if($randNum<=$proCur){
           $result=$key;
           break;
       }else{
           $proSum-=$proCur;
       }
   }
   unset($proArr);
   return$result;
} 

希望本文所述对大家的php程序设计有所帮助。

本文地址： jQuery+PHP实现的掷色子抽奖游戏实例