掷弹兵彩票抽奖实现的一个例子
本游戏是在垄断游戏的背景下,综合运用jQuery和php的知识,设计出掷骰子点来达到抽奖的效果,当然,抽奖的概率是可控的,开发者可以用一些修改的例子来应用到现场彩票的现场:
完整的实例代码在这里下载。
HTML的一部分:
首先我们需要准备两块颜色和奖的材料,这些作者已经打包上传,请放心下载。我们将在HTML页面中写下下面的HTML结构代码,主要用于将颜色和提示信息,并#奖用于奖。
复制代码代码如下所示:
CSS部分:
我们将使用CSS技术合理而正常地安排页面布局。我们将奖品分成10个位置的矩形,并将两个粒子定位在矩形的中心。抽奖时,我们可以直接点击中间骰子,我们可以使用CSS定位技术来实现页面布局。
复制代码代码如下所示:
。演示{宽度:650px;身高:420px;保证金:60px汽车10px汽车;位置:相对;}
。包{宽度:200px;身高:100px;位置:绝对;margin-left: 220px;边距:140px;Z指数:1000;}
#味精{显示:无;宽度:50px;高度:20px;填充:4px;背景:# FFC;边框1px solid # fc9;
文本对齐:中心;颜色:# F30;字体大小:18px;位置:绝对;Z指数:1001;右:- 20px;顶部:- 10px }
。骰子{宽度:90px;身高:90px;显示:块;浮动:左;背景:URL(骰子。PNG)没有重复;鼠标指针}
# dice_mask {宽度:200px;身高:100px;背景:# FFF;不透明度:0;位置:绝对的;最高:0;左:0;Z指数:999 }
。dice_1 {背景位置:- 5px - 4px }
。dice_2 {背景位置:- 5px - 107px }
。dice_3 {背景位置:- 5px - 212px }
。dice_4 {背景位置:- 5px - 317px }
。dice_5 {背景位置:- 5px - 427px }
。dice_6 {背景位置:- 5px - 535px }
。dice_t {背景位置:- 5px - 651px }
。dice_s {背景位置:- 5px - 763px }
。dice_e {背景位置:- 5px - 876px }
#奖{ }:相对位置
#奖李{位置:绝对;宽度:150px;身高:112px;边框1px solid # d3d3d3 }
# d_0 {左:0;最高:0 }
# d_1 {左:160px;顶:0 }
# d_2 {左:320px;顶:0 }
# d_3 {左:480px;顶:0 }
# d_4 {左:480px;顶部:128px }
# d_5 {左:480px;顶部:256px }
# d_6 {左:320px;顶部:256px }
# d_7 {左:160px;顶部:256px }
# d_8 {左:0;最高:256px }
# d_9 {左:0;最高:128px }
{不透明度:0.6。面具;宽度:150px;身高:112px;线高度:32px;背景:# FFC;
Z指数:1001;位置:绝对的;最高:0;左:0;文本对齐:中心;字体大小:16px }
jQuery的一部分:
我们用jqquery完成前端的行为,包括扔骰子动画,模仿富翁奖,并逐渐移动的动画,包括重复点击知识,Ajax交互知识,动画提示知识。整个过程可以概括为以下几点:点击骰子送dice.php Ajax请求-> >完整的骰子动画->提示点->逐渐到最终位置的定格动画,完整的彩票奖。
复制代码代码如下所示:
$(函数(){())
$(#骰子)。Click(function(){)
$(#奖里。面具)删除();
$(换行)。追加();添加一个掩码。
dice1 = $(var的# dice1);
dice2 = $(var的# dice2);
美元。getJSON('dice。php,功能(JSON){
VaR num1 = JSON { 0 };
VaR num2为JSON { 1 };
diceroll(dice1,num1); / /骰子1动画
diceroll(dice2,num2); / /骰子2动画
VaR Num = parseInt(num1)+ parseInt(num2);
$(#味精)。Css(' ',' 10px)。FadeIn(500)。文本(数+点)。动画({顶:50px},'1000)。FadeOut(500);
滚动(0,努姆);逐步运动动画
});
});
});
功能diceroll()是一个彩色动画,已在我们的站,以前的文章,解释说,通过位移实现动画效果,延迟和改变背景图案由动画(jQuery)。
复制代码代码如下所示:
功能diceroll(骰子、努姆){
Dice.attr(' ','dice '); / /删除最后一个动画点
Dice.css('cursor ','default);
dice.animate({左:+ 2px},100、函数()){
Dice.addClass('dice_t);
}),Delay(200)。动画({顶:2px},100、函数()){
Dice.removeClass('dice_t)。AddClass('dice_s);
}),Delay(200)。动画({不透明度:'show},600、函数()(){)
Dice.removeClass('dice_s)。AddClass('dice_e);
}),Delay(100)。动画({左:2px,顶部:'2px},100、函数()()){
Dice.removeClass('dice_e)。AddClass('dice_ + Num);
Dice.css('cursor ','pointer);
});
}
卷()的功能是至关重要的,建立一个区间动画通过setInterval()和执行它每0.5秒。我代表初始位置的参数,而参数的步骤表示要执行的步骤的数量。在这种情况下,颜色的数量,即需要采取的步骤的数量。我们将掩码添加到基于i的当前奖品中,当i的值等于步骤时,动画被停止,颜色的阴影被移除(以防止重复点击)。
复制代码代码如下所示:
函数滚动(i,步骤){
VAR时间= setInterval()函数(){
如果(i = 9){
var = i - 10;
$(# d_ + T)。append();
($ # d_ +(t-1)。面具(去除)+);
}
$(# d_ +我)。append();
($ # d_ +(i-1)。面具(去除)+);
如果(i =步骤){
ClearInterval(时间); / /如果到达指定位置停止
$(# dice_mask '),删除(); / /删除面具
}
+;//去
},500);
}
PHP的一部分:
什么dice.php需要做的是让总分根据销售奖的概率,并根据总分分配两粒子的点,最后回到在头版两粒子数。
复制代码代码如下所示:
确定获胜的可能性
prize_arr美元=阵列(
2=阵列('id' = > 2,V = > 10),
3=阵列('id' = > 3,V = > 20),
4=阵列('id' = > 4,V = > 5),
5=阵列('id' = > 5,V = > 5),
6=阵列('id' = > 6,V = > 20),
7=阵列('id' = > 7,V = > 2),
8=阵列('id' = > 8,V = > 3),
9=阵列('id' = > 9,V = > 20),
10=阵列('id' = > 10,V = > 0),
11=阵列('id' = > 11,V = > 10),
12=阵列('id' = > 12,V = > 5),
);
foreach(prize_arr美元美元美元关键= val){
$ ARR { $瓦尔{ 'id' } } = { } $值V;
}
总和= getRand美元($ ARR); / /根据一个ID奖获得的概率,总点
骰子点分布
基于美元=阵列(
2=数组(数组(1,1)),
3=数组(数组(1,2)),
4=数组(array(1,3),数组(2,2)),
5=数组(array(1,4),数组(2,3)),
6=数组(array(1,5),(2,4)阵列,阵列(3,3)),
7=数组(array(1,6)、阵列(2,7)、阵列(3,4)),
8=数组(array(2,6),数组(3,5)、阵列(4,4)),
9=数组(array(3,6),数组(4,5)),
10=数组(array(4,6),数组(5,5)),
11=数组(array(5,6)),
12=数组(array(6,6))
);
arr_rs美元美元美元= {和}方法;
我= array_rand美元(美元arr_rs); / /随机阵列
arr_a美元美元美元arr_rs = {我};
洗牌($ arr_a) / /订单;
回声json_encode($ arr_a);
函数getRand()是用来计算概率
复制代码代码如下所示:
概率计算
函数getRand($ proarr){
结果=;
概率的总概率
$启源= array_sum($ proarr);
循环数组的概率
foreach(proarr美元美元美元关键=采购指){
randnum美元(1美元= mt_rand,启源);
如果(randnum美元美元采购指){
$结果=键;
打破;
{人}
$启源= $采购指;
}
}
unset($ proarr);
返回$结果;
}
希望本文能对大家的PHP程序设计有所帮助。