jQuery PHP实现的掷色子抽奖游戏实例

本文实例讲述了jQuery PHP实现的掷色子抽奖游戏详细步骤。分享给大家供大家参考。具体分析如下：

该游戏是以大富翁游戏为背景，综合运用框架和服务器端编程语言(专业超文本预处理器的缩写)知识，设计出以掷色子点数来达成抽奖的效果，当然抽奖概率是可控的，开发者可以将本实例稍作修改即可运用到网站中的抽奖活动场景中。效果图如下：

完整实例代码点击此处本站下载。

超文本标记语言部分：

首先我们需要准备两粒色子和奖品素材，这些作者已经打包上传了，请大家放心下载。我们将在超文本标记语言页面中写下如下的超文本标记语言结构代码，包用来放置色子和提示信息，#奖品则是用来放置奖品的。

复制代码代码如下： div class=' demo ' div class=' wrap ' div id=' msg '/div div id=' dice ' span class=' dice dice _ 1 ' id=' dice dice 1 '/span span class=' dice dice _ 6 ' id=' dice 2 '/span/div ul id=' prize ' Li id=' d _ 0 ' img src=' images/0。gif ' alt='开始/Li Li id=' d _ 1 ' img src=' images/1。gif ' alt='现金100元/Li Li id=' d _ 2 ' img src=' images/2。gif ' alt='泰迪熊宝宝/Li Li id=' d _ 3 ' img src=' images/7。gif ' alt='谢谢参与/Li Li id=' d _ 4 ' img src=' images/3。gif ' alt=' iphone 5s '/Li Li id=' d _ 5 ' img src=' images/4。gif ' alt='笔记本电脑/Li Li id=' d _ 6 ' img src=' images/7。gif ' alt='谢谢参与/Li Li id=' d _ 7 ' img src=' images/5。gif ' alt='单反相机/Li Li id=' d _ 8 ' img src=' images/6。gif ' alt='轿车/Li Li id=' d _ 9 ' img src=' images/7。gif ' alt='谢谢参与/Li/ul/分区

半铸钢钢性铸铁(铸造半钢)部分：

我们要用半铸钢钢性铸铁(铸造半钢)技术来将页面布局合理规范化，我们将奖品围成一个矩形，共10个位置，将两粒色子定位在矩形的中央，抽奖时可以直接点击中间的色子。这些我们可以用半铸钢钢性铸铁(铸造半钢)的定位技术来实现页面布局。

复制代码代码如下：演示{宽度：650 px高度：420 px余量：60px自动10px自动位置：相对；} .包装{宽度：200像素高度：100 px位置：绝对；左边距left :220 pxmargin-top :140 px；z指数：1000;} # msg { display:none宽度：50 px高度：20 pxpadding:4px背景# ffcborder:1px实心# fc9文本对齐：居中；color : # f30 font-size :18 px；位置：绝对；z索引：1001;右侧：-20px；top:-10px} .骰子{宽度：90像素高度：90 px显示：块；float : leftbackground : URL(dice . png)不重复；光标：指针} # dice _ mask { width :200 px高度：100 px背景# fffopacity:0位置：绝对；top :0 left :0 z-index :999 } .骰子_ 1 {背景位置：-5px -4px} .骰子_ 2 {背景位置：-5px -107px} .骰子_ 3 {背景位置：-5px -212px} .骰子_ 4 {背景位置：-5px -317px} .骰子_ 5 {背景位置：-5px -427px} .dice _ 6 {背景位置：-5px -535px} .骰子_ t {背景位置：-5px -651px} .骰子背景位置：-5px -763px} .dice _ e {背景-位置：-5px-876 px } #价格{位置：相对} #价格Li {位置：绝对；宽度宽度：150像素宽度：112像素宽度：1像素实心# d3d 3d 3 } # d _ 0 { left :0 top :0 } # d _ 1 { left :160 pxtop :0 } # d _ 2 { left :320 pxtop 3:0 } # d _ 3 { left :480 pxtop :0 } # d _ 4 { left 3:480 pxtop :128 px } # d _ 4top :256 px } # d _ 6 { left :320 px；top :256 px } # d _ 7 { left :160 px；top :256 px } # d _ 8 { left :0 top :256 px } # d _ 9 { left :0 top :128 px } .掩膜{ opacity: 0.6宽度宽度：150像素宽度：112像素线高：32 px背景# ffcz索引：1001;位置：绝对；top:0left:0文本对齐：居中；font-size:16px}

框架部分：

我们使用jQquery完成前端动作，包括掷骰子动画和模仿大富翁奖品的分步动作动画，包括防止重复点击、ajax交互和动画提示的知识。整个操作过程可以简单概括为：点击骰子-向dice.php发送ajax请求-完成掷骰子-投掷动画-提示点数-一步一步移动动画停在最终奖品位置-完成抽奖。

复制代码如下： $ (function () {$ ('# dice ')。单击(function () {$ ('# prizeli.mask ')。移除()；$('.换行')。追加(' div id=' dice _ mask '/div ')；//屏蔽var dice 1=$(' # dice 1 ')；var dice 2=$(' # dice 2 ')；$.getJSON('dice.php '，function(JSON){ var num 1=JSON[0]；var num 2=JSON[1]；diceroll(dice1，num 1)；//骰子1动画骰子(骰子2，num 2)；//dice 2动画varnum=par sent(num 1)par sent(num 2)；$ ('# msg ')。CSS ('top '，'-10px ')。法丁(500)。文本(数字“点”)。动画({top:'-50px'}，' 1000 ')。淡出(500)；roll(0，num)；//步进运动动画})；});});

函数dice()是一个dice运动动画，本站点前一篇文章已经讲解过了，就是jQuery的animation()实现的位移、延时、改变背景风格实现的动画效果。

复制代码如下：函数字典(dice，num) {dice.attr ('class '，' dice ')；//清除最后一个动画后的点dice.css('cursor '，' default ')；dice.animate({left: ' 2px'}，100，function(){ dice . addclass(' dice _ t ')；}).延迟(200)。animate({top:'-2px'}，100，function(){ dice . remove class(' dice _ t ')。addCLaSS(' dice _ s ')；}).延迟(200)。animate({ opa city 3360 ' show ' }，600，function(){ dice . remove class(' dice _ s ')。addCLaSS(' dice _ e ')；}).延迟(100)。animate({left:'-2px '，top:'2px'}，100，function(){ dice . remove class(' dice _ e ')。addCLaSS(' dice _ num ')；dice.css('光标'，'指针')；});}

roll()函数非常重要。通过setInterval()设置一个间隔动画，每0.5秒执行一次。参数I表示初始位置，参数step表示要执行的步骤数，在本例中是骰子的数量，即要采取的步骤数。我们补充。遮罩到当前奖品按I，当I的值等于step时，停止动画并移除骰子的遮罩(防止重复点击)。

复制代码如下：函数roll (I，step){ var time=set interval(function(){ if(i9){ var t=I-10；$('#d_' t)。追加(' div class=' mask '/div ')；$(“# d _”(t-1)”。面具')。移除()；} $(“# d _”I)。追加(' div class=' mask '/div ')；$(“# d _”(I-1)”。面具')。移除()；if(i==step){ clearInterval(时间)；//Stop $('#dice_mask ')。如果到达指定位置，则移除()；//去掉蒙版} I；//继续走}，500)；}

PHP部分：

dice.php需要做的是根据配置的中奖概率得到总积分，根据总积分分配两个骰子的积分，最后将两个骰子的积分返回首页。

复制代码如下：//设置中奖概率$ price _ arr=array(' 2 '=array(' id '=2，' v'=10)，' 3'=array ('id'=3，' v'=20)，' 4'=array(' . '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 '=11)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，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$ arr _ RS=$ arrs[$ sum]；$ I=array _ rand($ arr _ RS)；//随机数组$ arr _ a=$ arr _ RS[$ I]；shuffle($ arr _ a)；//乱序echo JSON _ encode($ arr _ a)；

函数getRand()用于计算概率。

复制代码代码如下：//计算概率函数GetRand($ ProArr){ $ result=' '；//概率数组的总概率精度$ PROsum=array _ sum($ ProArr)；//概率数组循环foreach($ proArr as $ key=$ proCur){ $ randNum=mt _ rand(1，$ proSum)；if($ randNum=$ proCur){ $ result=$ key；打破；} else { $ PROsum-=$ ProCur；} } unset($ ProArr)；返回$ result}

希望本文所述对大家的服务器端编程语言(专业超文本预处理器的缩写)程序设计有所帮助。