本文结合实例为大家讲解如何实现一个掷色子猜大小的游戏功能。上期我们给大家介绍了jQuery掷色子动画，本期在上期的基础上，涉及到HTML，CSS，jQuery以及PHP相关知识，文章重点关注后台PHP程序会根据用户选择的大小计算概率，控制最终掷出的点数，本例中用户猜中几率为20%。

HTML

本例中用到两粒色子，也就是说可以同时掷出两粒色子，所得的点数应该是两粒色子的点数之和。另外我们在页面上放置两个单选框，用户可以选择大小。

  
     
               
       大 
       小 
      
 
      
 
       
         
        
       
 
      
 
      
请直接点击上面的色子！
     

CSS

 

jQuery

用户选择大小，然后单击色子，这时通过$.getJSON()向后台data.php发送一个ajax请求，提交了所选的大小参数，然后根据返回的点数完成色子动画，得出所掷出的点数。

  $(function(){      $("#dice").click(function(){ $(".wrap").append("
     
");//加遮罩 var dice1 = $("#dice1"); var dice2 = $("#dice2"); var big_num = $("#big"); var sel = $("#big").attr("checked")?1:0; $.getJSON("data.php",{sels:sel},function(json){ var num1 = json[0]; var num2 = json[1]; $("#result").hide(); diceroll(dice1,num1);//掷色子1动画 diceroll(dice2,num2);//掷色子2动画 $("#dice_mask").remove();//移除遮罩 var num = parseInt(num1)+parseInt(num2); $("#result").html("您掷得点数是"+num+"").fadeIn(2500); }); }); });

跟上期实例不同的是，我们这次没有使用随机点数，而是根据后台PHP返回的点数来定义色子最终掷出的点数，使用自定义函数diceroll(dice,num)，第一个参数dice表示色子对象，第二个参数num表示定义的点数。以下是自定义函数diceroll(dice,num)实现的动画代码。

  function diceroll(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'); }); }

PHP

PHP文件data.php的任务是根据用户前台传达过来的参数值（用户选的大或小），分配猜中几率，比如用户选大（1），则出小的几率为8，出大的几率为2，分别对应百分比。

  $num = intval($_GET['sels']);  if($num==1){ //大 $v = array(8,2); }else{ //小 $v = array(2,8); } $size_arr = array( '0' => array('id'=>1,'v'=>$v[0]), '1' => array('id'=>2,'v'=>$v[1]) );

根据设定好的概率，我们应该返回“大”还是“小”，如果是小，我们定义两粒色子点数之和为2-6，如果是大，则定义色子点数之和为8-12，然后我们用mt_rand()随机取出一个数字出来，这个数字就是用户掷出的点数。

  foreach ($size_arr as $key => $val) { $arr[$val['id']] = $val['v']; } $rid = getRand($arr); //根据概率计算大小 if($rid==1){ $sum = mt_rand(2,6); }else{ $sum = mt_rand(8,12); }

我们得到了色子总点数，但是我们使用的是两粒色子，那我们就得把色子点数分配给两粒色子，这样我们定义了以下数组：

  $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)) );

可以看出，点数2只能由1和1组成，而点数4则可以由1和3或者2和2组成。

最后，我们要根据总点数，从以上数组中取出对应的组（二维），然后随机取其中一组，再打乱顺序，混乱色子的数字排序，最后输出json格式数据给前端页面调用。

  $arr_rs = $arrs[$sum]; $i = array_rand($arr_rs);//随机取数组 $arr_a = $arr_rs[$i]; shuffle($arr_a);//打乱顺序 echo json_encode($arr_a);//输出json数据

函数getRand()是用来计算概率的，在本站多篇抽奖文章中用到，详细介绍请参照本站文章：，一下是getRand()代码：

  //计算概率  function getRand($proArr) {      $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 foreach ($proArr as $key => $proCur) { $randNum = mt_rand(1, $proSum); if ($randNum <= $proCur) { $result = $key; break; } else { $proSum -= $proCur; } } unset ($proArr); return $result; }

      
      
      
      
      
     
       
        
       
      
      
   
       
掷色子猜大小游戏（可控制概率）
   
       
           
        
                大             小        
           
        
               
         
          
          
         
        
        
        
        
请直接点击上面的色子！