脚本宝典收集整理的这篇文章主要介绍了jQuery+PHP实现的掷色子抽奖游戏实例,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例讲述了jquery+PHP实现的掷色子抽奖游戏详细步骤。分享给大家供大家参考。具体分析如下:
该游戏是以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽奖活动场景中。效果图如下:
完整实例代码点击此处。
首先我们需要准备两粒色子和奖品素材,这些作者已经打包上传了,请大家放心下载。我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信息,#PRize则是用来放置奖品的。
代码如下:@H_502_10@
我们要用CSS技术来将页面布局合理规范化,我们将奖品围成一个矩形,共10个位置,将两粒色子定位在矩形的中央,抽奖时可以直接点击中间的色子。这些我们可以用CSS的定位技术来实现页面布局。
代码如下:@H_502_10@502_10@
我们使用jQQuery来完成前端动作,包括掷色子动画,仿大富翁奖品逐步运动动画,其中有防重复点击知识、ajax交互知识,动画提示知识。整个 操作流程可简单概括为:点击色子->向dice.PHP发送ajax请求->完成掷色子动画->提示点数->逐步运动动画到最终 奖品位置停止->完成抽奖。
代码如下:@H_502_10@
函数diceroll()是一个色子运动动画,在本站前面的文章中已讲解过,就是通过jQuery的animate()实现的位移、延时、变化背景样式来实现的动画效果。
代码如下:@H_502_10@502_10@
函数roll()至关重要,通过setInterval()设置一个间隔动画,每隔0.5秒时间执行一次。参数i代表初始位置,参数step代表需要执行 的步数,在本例中就是色子的点数,即需要走的步数。我们根据i给当前奖品加上.mask,当i的值与step相等时,停止动画,并且移除色子的遮罩(防止 重复点击)。
代码如下:@H_502_10@if(i==step){
clearInterval(time); //如果到达指定位置则停止
$('#dicemask').remove();//移除遮罩
}
i++;//继续前进
},500);
}
@H502_10@
dice.PHP需要做的事情有:根据配置好的奖品概率,得到总点数,根据总点数进行两粒色子的点数分配,最后返回给前端页面两粒色子的点数。
代码如下:@H_502_10@foreach ($prize_arr as $key => $val) {
$arr[$val['id']] = $val['v'];
}
$sum = getRand($arr); //根据概率获取奖项id,得到总点数
//分配色子点数
$arrs = array(
'2' => array(array(1,1)),
'3' => array(array(1,2)),
'4' => array(array(1,3),array(2,
'5' => array(array(1,4),3)),
'6' => array(array(1,5),array(3,
'7' => array(array(1,6),7),4)),
'8' => array(array(2,array(4,
'9' => array(array(3,5)),
'10' => array(array(4,array(5,
'11' => array(array(5,6)),
'12' => array(array(6,6))
);
$arr_rs = $arrs[$sum];
$i = array_rand($arr_rs);//随机取数组
$arr_a = $arr_rs[$i];
shuffle($arr_a);//打乱顺序
echo json_encode($arra);
@H502_10@
函数getRand()用来计算概率
代码如下:@H_502_10@//概率数组的总概率精度
$proSum = array_sum($proArr);
//概率数组循环
foreach ($proArr as $key => $proCur) {
$randNum = mtrand(1,$proSum);
if ($randNum <= $proCur) {
$result = $key;
break;
} else {
$proSum -= $proCur;
}
}
unset ($proArr);
return $result;
}
@H502_10@
以上是脚本宝典为你收集整理的jQuery+PHP实现的掷色子抽奖游戏实例全部内容,希望文章能够帮你解决jQuery+PHP实现的掷色子抽奖游戏实例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。