基于JQuery+PHP编写砸金蛋中奖程序


Posted in PHP onSeptember 08, 2015

首先给大家展示效果图:

基于JQuery+PHP编写砸金蛋中奖程序

查看演示 下载源码

准备工作

我们需要准备道具(素材),即相关图片,包括金蛋图片、蛋砸碎后的图片、砸碎后的碎花图片、以及锤子图片。

HTML

我们页面上要展现的是一个砸金蛋的台子,台上放了编号为1,2,3的三个金蛋,以及一把锤子。我们构建以下html代码:

<div class="egg"> 
 <ul class="eggList"> 
 <p class="hammer" id="hammer">锤子</p> 
 <p class="resultTip" id="resultTip"><b id="result"></b></p> 
 <li><span>1</span><sup></sup></li> 
 <li><span>2</span><sup></sup></li> 
 <li><span>3</span><sup></sup></li> 
 </ul> 
</div>

上述代码中,.hammer放置锤子,.resultTip用于砸蛋后显示的结果,即有没有中奖,三个li分别放置3个金蛋,我们用CSS来装饰下效果。

CSS

.egg{width:660px; height:400px; margin:50px auto 20px auto;} 
.egg ul li{z-index:999;} 
.eggList{padding-top:110px;position:relative;width:660px;} 
.eggList li{float:left;background:url(images/egg_1.png) no-repeat bottom;width:158px; 
height:187px;cursor:pointer;position:relative;margin-left:35px;} 
.eggList li span{position:absolute; width:30px; height:60px; left:68px; top:64px; color:#ff0; 
 font-size:42px; font-weight:bold} 
.eggList li.curr{background:url(images/egg_2.png) no-repeat bottom;cursor:default;z-index:300;} 
.eggList li.curr sup{position:absolute;background:url(images/img-4.png) no-repeat;width:232px; 
height:181px;top:-36px;left:-34px;z-index:800;} 
.hammer{background:url(images/img-6.png) no-repeat;width:74px;height:87px;position:absolute; 
text-indent:-9999px;z-index:150;left:168px;top:100px;} 
.resultTip{position:absolute; background:#ffc ;width:148px;padding:6px;z-index:500;top:200px; 
left:10px; color:#f60; text-align:center;overflow:hidden;display:none;z-index:500;} 
.resultTip b{font-size:14px;line-height:24px;}

按照上面的代码我们可以在页面中看到一个完整的砸金蛋场景,注意我们使用了png图片,如果你的客户仍在使用ie6的话,你可能需要对png图片的透明做处理,本文不做处理。

jQuery

接下来,我们要用jQuery代码来实现砸金蛋、碎蛋、展示中奖结果的整个过程。当然,老规矩,对于才用jQuery实现的实例程序,你必须先载入jQuery库文件。

首先,当鼠标滑向金蛋时,用于砸金蛋的锤子会仅靠金蛋右上方,可以使用position()来定位。

$(".eggList li").hover(function() { 
 var posL = $(this).position().left + $(this).width(); 
 $("#hammer").show().css('left', posL); 
})

然后,点击金蛋,即挥动锤子砸向金蛋的过程。我们在click中先把金蛋中的编号数字隐藏,然后调用自定义函数eggClick()。

$(".eggList li").click(function() { 
 $(this).children("span").hide(); 
 eggClick($(this)); 
});

最后,在自定义函数eggClick()中,我们使用jQuery的$.getJSON方法向后台data.php发送一个ajax请求,后台php程序会处理奖项分配并把中奖结果返回。我们使用animate()来实现砸锤子的动画,通过改变锤子的top和left位子来实现简单的动画效果,锤子砸下去后,金蛋样式变为.curr,同时金花四溅,然后中奖结果.resultTip展示,有没有中奖要看你的运气和后台奖项设置的中奖几率了。来看砸金蛋函数eggClick()的代码:

function eggClick(obj) { 
 var _this = obj; 
 $.getJSON("data.php",function(res){//ajax请求 
 _this.unbind('click'); //解除click 
 $(".hammer").css({"top":_this.position().top-55,"left":_this.position().left+185}); 
 $(".hammer").animate({//锤子动画 
 "top":_this.position().top-25, 
 "left":_this.position().left+125 
 },30,function(){ 
 _this.addClass("curr"); //蛋碎效果 
 _this.find("sup").show(); //金花四溅 
 $(".hammer").hide();//隐藏锤子 
 $('.resultTip').css({display:'block',top:'100px',left:_this.position(). 
 left+45,opacity:0}) 
 .animate({top: '50px',opacity:1},300,function(){//中奖结果动画 
  if(res.msg==1){//返回结果 
  $("#result").html("恭喜,您中得"+res.prize+"!"); 
  }else{ 
  $("#result").html("很遗憾,您没能中奖!"); 
  } 
 }); 
 } 
 ); 
 }); 
}

为了将砸金蛋程序更真实的结合到你的网站中,你可以在砸蛋前验证会员身份,限制砸蛋次数、砸蛋中奖后留下联系方式等等措施,具体看网站需求了。

PHP

data.php处理前端发送的ajax请求,我们才用概率算法,根据设置好的中奖概率,将中奖结果以json的格式输出。关于概率计算的例子可以参照:PHP+jQuery实现翻板抽奖

$prize_arr = array( 
 '0' => array('id'=>1,'prize'=>'平板电脑','v'=>3), 
 '1' => array('id'=>2,'prize'=>'数码相机','v'=>5), 
 '2' => array('id'=>3,'prize'=>'音箱设备','v'=>10), 
 '3' => array('id'=>4,'prize'=>'4G优盘','v'=>12), 
 '4' => array('id'=>5,'prize'=>'Q币10元','v'=>20), 
 '5' => array('id'=>6,'prize'=>'下次没准就能中哦','v'=>50), 
); 
foreach ($prize_arr as $key => $val) { 
 $arr[$val['id']] = $val['v']; 
} 
$rid = getRand($arr); //根据概率获取奖项id 
$res['msg'] = ($rid==6)?0:1; //如果为0则没中 
$res['prize'] = $prize_arr[$rid-1]['prize']; //中奖项 
echo json_encode($res); 
//计算概率 
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; 
}

通过设置概率,我们可以看出,砸中平板电脑的几率占3%,砸不中的几率占50%,点击演示demo来试试你的运气吧。

PHP 相关文章推荐
simplehtmldom Doc api帮助文档
Mar 26 PHP
PHP实现手机归属地查询API接口实现代码
Aug 27 PHP
PHP中文分词 自动获取关键词介绍
Nov 13 PHP
discuz加密解密函数使用方法和中文注释
Jan 21 PHP
php文件缓存类汇总
Nov 21 PHP
PHP微信红包API接口
Dec 05 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
Apr 11 PHP
php实现支持中文的文件下载功能示例
Aug 30 PHP
基于php双引号中访问数组元素报错的解决方法
Feb 01 PHP
PHP PDOStatement::execute讲解
Jan 31 PHP
Thinkphp 3.2框架使用Redis的方法详解
Oct 24 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
Jul 24 PHP
四个常见html网页乱码问题及解决办法
Sep 08 #PHP
php图片水印添加、压缩、剪切的封装类实现
Apr 18 #PHP
php验证码实现代码(3种)
Sep 07 #PHP
PHP Web木马扫描器代码分享
Sep 06 #PHP
使用php-timeit估计php函数的执行时间
Sep 06 #PHP
ThinkPHP中使用Ueditor富文本编辑器
Sep 02 #PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
Aug 31 #PHP
You might like
PHP 文件扩展名 获取函数
2009/06/03 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
微信小程序实现tab页面切换功能
2018/07/13 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
python多线程扫描端口(线程池)
2019/09/04 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
贷款委托书范本
2014/04/08 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
会计试用期自我评价
2015/03/10 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
SQL注入详解及防范方法
2021/12/06 MySQL