掷色子猜大小游戏

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

 

HTML

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

 
<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">请直接点击上面的色子！</p> 

CSS

 

jQuery

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

 
$(function(){ 
    $("#dice").click(function(){ 
        $(".wrap").append("<div id='dice_mask'></div>");//加遮罩 
        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("您掷得点数是<span>"+num+"</span>").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; 
} 



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html5，动画，javascript" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>演示：jQuery掷色子动画</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:760px; height:220px; margin:10px auto;}
.wrap{width:200px; height:100px; margin:50px auto 30px auto; position:relative}
.dice{width:90px; height:90px; display:block; float:left; background:url(dice.png) no-repeat; cursor:pointer;}
.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}
p#result{text-align:center; font-size:16px}
p#result span{font-weight:bold; color:#f30; margin:6px}
p.sel{text-align:center; margin-top:30px}
#dice_mask{width:200px; height:100px; background:#fff; opacity:0; position:absolute; top:0; left:0; z-index:999}
</style>
<script type="text/javascript" src="../js/my.js"></script>
<script type="text/javascript">
$(function(){
    $("#dice").click(function(){
        $(".wrap").append("<div id='dice_mask'></div>");//加遮罩
        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("您掷得点数是<span>"+num+"</span>").fadeIn(2500);
        });
        
    });
});

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');
    });
}
</script>
</head>

<body>
<div id="header">
  
   <div class="demo_topad"><script src="/js/ad_js/jquery.js" type="text/javascript"></script></div>
</div>

<div id="main">
   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-251.html">掷色子猜大小游戏（可控制概率）</a></h2>
   <div class="demo">
           <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">请直接点击上面的色子！</p>
   </div>
 
</div>

</body>
</html>

 

 
posted @ 2014-12-16 15:05  axl234  阅读(1239)  评论(0)  编辑  收藏  举报