HTML

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

大

小

请直接点击上面的色子！

CSS

CSS的写法可以参照上期文章：jQuery掷色子动画，唯一区别的就是多了一粒色子，为了节省篇幅，本文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()是用来计算概率的，在本站多篇抽奖文章中用到，详细介绍请参照本站文章：PHP+jQuery实现翻板抽奖，一下是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;

}