掷色子猜大小游戏(可控制概率)

2014年03月12日 20:37helloweba.com 作者:月光光 标签:jQuery  PHP  CSS3 

本文结合实例为大家讲解如何实现一个掷色子猜大小的游戏功能。上期我们给大家介绍了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

CSS的写法可以参照上期文章:jQuery掷色子动画,唯一区别的就是多了一粒色子,为了节省篇幅,本文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;
}
声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/251.html

3条评论

  • 能不能加下你***,想订做这个程序

  • 记得加载jquery库文件

  • 色子动不了,按照你步骤做的