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


Posted in PHP onJanuary 04, 2015

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

该游戏是以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽奖活动场景中。效果图如下:

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

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

HTML部分:

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

<div class='demo'> 

    <div class='wrap'> 

        <div id='msg'></div> 

           <div id='dice'><span class='dice dice_1' id='dice1'></span> 

        <span class='dice dice_6' id='dice2'></span></div> 

    </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> 

</div>

CSS部分:

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

.demo{width:650px; height:420px; margin:60px auto 10px auto; position:relative; } 

.wrap{width:200px; height:100px; position:absolute; margin-left:220px; margin-top:140px; z-index:1000;} 

#msg{display:none;width:50px; height:20px; padding:4px; background:#ffc; border:1px solid #fc9;  

text-align:center; color:#f30; font-size:18px; position:absolute; z-index:1001; right:-20px; top:-10px} 

.dice{width:90px; height:90px; display:block; float:left; background:url(dice.png) no-repeat; cursor:pointer} 

#dice_mask{width:200px; height:100px; background:#fff; opacity:0; position:absolute; top:0; left:0; z-index:999} 

.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} 

#prize{position:relative} 

#prize li{position:absolute; width:150px; height:112px; border:1px solid #d3d3d3} 

#d_0{left:0; top:0} 

#d_1{left:160px; top:0} 

#d_2{left:320px; top:0} 

#d_3{left:480px; top:0} 

#d_4{left:480px; top:128px} 

#d_5{left:480px; top:256px} 

#d_6{left:320px; top:256px} 

#d_7{left:160px; top:256px} 

#d_8{left:0; top:256px} 

#d_9{left:0; top:128px} 

.mask{opacity: 0.6; width:150px; height:112px; line-height:32px; background:#ffc;  

z-index:1001; position:absolute; top:0; left:0; text-align:center; font-size:16px}

jQuery部分:

我们使用jQquery来完成前端动作,包括掷色子动画,仿大富翁奖品逐步运动动画,其中有防重复点击知识、ajax交互知识,动画提示知识。整个 操作流程可简单概括为:点击色子->向dice.php发送ajax请求->完成掷色子动画->提示点数->逐步运动动画到最终 奖品位置停止->完成抽奖。

$(function(){ 

    $('#dice').click(function(){ 

        $('#prize li .mask').remove(); 

        $('.wrap').append('<div id='dice_mask'></div>');//加遮罩 

        var dice1 = $('#dice1'); 

        var dice2 = $('#dice2'); 

        $.getJSON('dice.php',function(json){ 

            var num1 = json[0]; 

            var num2 = json[1]; 

            diceroll(dice1,num1);//掷色子1动画 

            diceroll(dice2,num2);//掷色子2动画 

            var num = parseInt(num1)+parseInt(num2); 

            $('#msg').css('top','-10px').fadeIn(500).text(num+'点').animate({top:'-50px'},'1000').fadeOut(500); 

            roll(0, num);//逐步运动动画 

        }); 

    }); 

});

函数diceroll()是一个色子运动动画,在本站前面的文章中已讲解过,就是通过jQuery的animate()实现的位移、延时、变化背景样式来实现的动画效果。

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'); 

    }); 

}

函数roll()至关重要,通过setInterval()设置一个间隔动画,每隔0.5秒时间执行一次。参数i代表初始位置,参数step代表需要执行 的步数,在本例中就是色子的点数,即需要走的步数。我们根据i给当前奖品加上.mask,当i的值与step相等时,停止动画,并且移除色子的遮罩(防止 重复点击)。

function roll(i,step){ 

    var time = setInterval(function(){ 

        if(i>9){ 

            var t = i - 10; 

            $('#d_'+t).append('<div class='mask'></div>'); 

            $('#d_'+(t-1)+' .mask').remove(); 

        } 

        $('#d_'+i).append('<div class='mask'></div>'); 

        $('#d_'+(i-1)+' .mask').remove(); 

         

        if(i==step){ 

             clearInterval(time); //如果到达指定位置则停止 

             $('#dice_mask').remove();//移除遮罩 

        } 

        i++;//继续前进 

    },500); 

}

PHP部分:

dice.php需要做的事情有:根据配置好的奖品概率,得到总点数,根据总点数进行两粒色子的点数分配,最后返回给前端页面两粒色子的点数。

//设置中奖概率 

$prize_arr = array( 

    '2' => array('id'=>2,'v'=>10), 

    '3' => array('id'=>3,'v'=>20), 

    '4' => array('id'=>4,'v'=>5), 

    '5' => array('id'=>5,'v'=>5), 

    '6' => array('id'=>6,'v'=>20), 

    '7' => array('id'=>7,'v'=>2), 

    '8' => array('id'=>8,'v'=>3), 

    '9' => array('id'=>9,'v'=>20), 

    '10' => array('id'=>10,'v'=>0), 

    '11' => array('id'=>11,'v'=>10), 

    '12' => array('id'=>12,'v'=>5), 

); 

 

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,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)) 

); 

 

$arr_rs = $arrs[$sum]; 

$i = array_rand($arr_rs);//随机取数组 

$arr_a = $arr_rs[$i]; 

shuffle($arr_a);//打乱顺序 

echo json_encode($arr_a);

函数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; 

} 

希望本文所述对大家的php程序设计有所帮助。

PHP 相关文章推荐
Mysql的常用命令
Oct 09 PHP
PHP函数常用用法小结
Feb 08 PHP
php学习笔记 类的声明与对象实例化
Jun 13 PHP
php登陆页的密码处理方式分享
Oct 14 PHP
PHP缓存集成库phpFastCache用法
Dec 15 PHP
php生成excel列名超过26列大于Z时的解决方法
Dec 29 PHP
php 类自动载入的方法
Jun 03 PHP
PHP实现生成唯一会员卡号
Aug 24 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
Dec 24 PHP
PHP中使用OpenSSL生成证书及加密解密
Feb 05 PHP
Laravel配置全局公共函数的方法步骤
May 09 PHP
PHP如何防止用户重复提交表单
Dec 09 PHP
php支付宝接口用法分析
Jan 04 #PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
Jan 04 #PHP
php模仿asp Application对象在线人数统计实现方法
Jan 04 #PHP
THINKPHP2.0到3.0有哪些改进之处
Jan 04 #PHP
浅谈thinkphp的实例化模型
Jan 04 #PHP
Thinkphp中的curd应用实用要点
Jan 04 #PHP
PHP+jquery实时显示网站在线人数的方法
Jan 04 #PHP
You might like
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
node.js的事件机制
2017/02/08 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python实现视频下载功能
2017/03/14 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
大学生个人简历自我评价
2013/11/16 职场文书
小区停车场管理制度
2014/01/27 职场文书
综合实践活动方案
2014/02/14 职场文书
农村改厕实施方案
2014/03/22 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
二年级作文之动物作文
2019/11/13 职场文书