GOOCODE - Find your code/scripts

25 In this paper, we explain with examples of how to implement a dice to guess the size of the games. On stage we give you all about jQuery dice animation, this issue on the basis of the previous period, related to HTML, CSS, jQuery and PHP knowledge, the article focuses on the background PHP program will calculate the probabilities based on the size selected by the user, control the final throw points out, in this case a 20% chance to guess the user.

HTML
In this example uses two dice, that can throw two dice, and the resulting points should be the sum of two dice points. In addition, we placed the two boxes on the page, the user can select the size.

<p class="sel"> 
       <input type="radio" name="bs" id="big" value="1" checked> 大 
    <input type="radio" name="bs" id="small" value="0"> 小 
</p> 
<div class="wrap"> 
   <div id="dice"><span class="dice dice_1" id="dice1"></span> 
   <span class="dice dice_6" id="dice2"></span></div> 
</div> 
<p id="result">Please click above dice!</p> 

CSS
CSS can refer to the wording of the article: jQuery dice animation, the only difference is that more than a boson, in order to save space, this article is no longer emit CSS code.
jQuery
Users select the size, and then click the dice, then by $ .getJSON () sends back data.php an ajax request, submitted a selected size parameters, and then return to complete the dice animation based on the number of points, draw the throw points.

$(function(){ 
    $("#dice").click(function(){ 
        $(".wrap").append("<div id='dice_mask'></div>");//add mask
        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);//dice 1 animation 
            diceroll(dice2,num2);//dice 2 animation
            $("#dice_mask").remove();//remove mask
            var num = parseInt(num1)+parseInt(num2); 
            $("#result").html("Your throwing points are <span>"+num+"</span>").fadeIn(2500); 
        }); 
    }); 
}); 

Keep up on the instance is different, this time we did not use a random number of points, but to define the final throw of the dice points based on PHP backend return points, using a custom function diceroll (dice, num), represents the first parameter dice dice object, the second parameter num means that the definition of points. The following is a custom function diceroll (dice, num) to achieve animation code.

function diceroll(dice,num){ 
    dice.attr("class","dice");//After clearing the last points 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'); 
    }); 
} 

PHP
PHP file data.php foreground task is to convey the user over the parameter values (user selected large or small), the probability distribution guessed, such as the user selected large (1), the chance of a small 8, a big chance of 2, corresponding to a percentage.

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

According to predetermined probability, we should return "large" or "small", if it is small, we define two dice, and the number of points 2-6, if it is large, the number of points of the dice is defined and is 8- 12, then we mt_rand () randomly taken out a number, this number is the user throwing points.

foreach ($size_arr as $key => $val) { 
    $arr[$val['id']] = $val['v']; 
} 
 
$rid = getRand($arr); //According to the probability to calculate the size
if($rid==1){ 
    $sum = mt_rand(2,6); 
}else{ 
    $sum = mt_rand(8,12); 
} 

We got the dice total points, but we are using two tablets dice, then we'll have to assign points to two tablets boson boson, so we define the following array:

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

It can be seen only by 1 and 2 points a composition, but may consist of four points 1 and 3 or 2 and 2 components.
Finally, based on the total number of points we want to remove from the above array corresponding group (two-dimensional), and then randomly selected one of the group, and then disrupt the order, chaos dice digital sort, the final output json format data to the front page call.

$arr_rs = $arrs[$sum]; 
$i = array_rand($arr_rs);//random array
$arr_a = $arr_rs[$i]; 
shuffle($arr_a);//Shuffled 
echo json_encode($arr_a);//export json data 

Function getRand () is used to calculate the probability, what is getRand () code:

//Calculate the probability
function getRand($proArr) { 
    $result = ''; 
 
    //The total probability of accuracy 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; 
}