백엔드 개발 PHP 튜토리얼 基于JQuery+PHP编写砸金蛋中奖程序_PHP

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

May 28, 2016 pm 03:05 PM
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)&#63;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来试试你的运气吧。

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

CakePHP 프로젝트 구성 CakePHP 프로젝트 구성 Sep 10, 2024 pm 05:25 PM

이번 장에서는 CakePHP의 환경 변수, 일반 구성, 데이터베이스 구성, 이메일 구성에 대해 알아봅니다.

Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Dec 24, 2024 pm 04:42 PM

PHP 8.4는 상당한 양의 기능 중단 및 제거를 통해 몇 가지 새로운 기능, 보안 개선 및 성능 개선을 제공합니다. 이 가이드에서는 Ubuntu, Debian 또는 해당 파생 제품에서 PHP 8.4를 설치하거나 PHP 8.4로 업그레이드하는 방법을 설명합니다.

CakePHP 날짜 및 시간 CakePHP 날짜 및 시간 Sep 10, 2024 pm 05:27 PM

cakephp4에서 날짜와 시간을 다루기 위해 사용 가능한 FrozenTime 클래스를 활용하겠습니다.

CakePHP 파일 업로드 CakePHP 파일 업로드 Sep 10, 2024 pm 05:27 PM

파일 업로드 작업을 위해 양식 도우미를 사용할 것입니다. 다음은 파일 업로드의 예입니다.

CakePHP 라우팅 CakePHP 라우팅 Sep 10, 2024 pm 05:25 PM

이번 장에서는 라우팅과 관련된 다음과 같은 주제를 학습하겠습니다.

CakePHP 토론 CakePHP 토론 Sep 10, 2024 pm 05:28 PM

CakePHP는 PHP용 오픈 소스 프레임워크입니다. 이는 애플리케이션을 훨씬 쉽게 개발, 배포 및 유지 관리할 수 있도록 하기 위한 것입니다. CakePHP는 강력하고 이해하기 쉬운 MVC와 유사한 아키텍처를 기반으로 합니다. 모델, 뷰 및 컨트롤러 gu

PHP 개발을 위해 Visual Studio Code(VS Code)를 설정하는 방법 PHP 개발을 위해 Visual Studio Code(VS Code)를 설정하는 방법 Dec 20, 2024 am 11:31 AM

VS Code라고도 알려진 Visual Studio Code는 모든 주요 운영 체제에서 사용할 수 있는 무료 소스 코드 편집기 또는 통합 개발 환경(IDE)입니다. 다양한 프로그래밍 언어에 대한 대규모 확장 모음을 통해 VS Code는

CakePHP 유효성 검사기 만들기 CakePHP 유효성 검사기 만들기 Sep 10, 2024 pm 05:26 PM

컨트롤러에 다음 두 줄을 추가하면 유효성 검사기를 만들 수 있습니다.

See all articles