찾다
백엔드 개발PHP 튜토리얼基于JQuery+PHP编写砸金蛋中奖程序_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으로 문의하세요.
과대 광고 : 오늘 PHP의 역할을 평가합니다과대 광고 : 오늘 PHP의 역할을 평가합니다Apr 12, 2025 am 12:17 AM

PHP는 현대적인 프로그래밍, 특히 웹 개발 분야에서 강력하고 널리 사용되는 도구로 남아 있습니다. 1) PHP는 사용하기 쉽고 데이터베이스와 완벽하게 통합되며 많은 개발자에게 가장 먼저 선택됩니다. 2) 동적 컨텐츠 생성 및 객체 지향 프로그래밍을 지원하여 웹 사이트를 신속하게 작성하고 유지 관리하는 데 적합합니다. 3) 데이터베이스 쿼리를 캐싱하고 최적화함으로써 PHP의 성능을 향상시킬 수 있으며, 광범위한 커뮤니티와 풍부한 생태계는 오늘날의 기술 스택에 여전히 중요합니다.

PHP의 약한 참고 자료는 무엇이며 언제 유용합니까?PHP의 약한 참고 자료는 무엇이며 언제 유용합니까?Apr 12, 2025 am 12:13 AM

PHP에서는 약한 참조가 약한 회의 클래스를 통해 구현되며 쓰레기 수집가가 물체를 되 찾는 것을 방해하지 않습니다. 약한 참조는 캐싱 시스템 및 이벤트 리스너와 같은 시나리오에 적합합니다. 물체의 생존을 보장 할 수 없으며 쓰레기 수집이 지연 될 수 있음에 주목해야합니다.

PHP의 __invoke 마법 방법을 설명하십시오.PHP의 __invoke 마법 방법을 설명하십시오.Apr 12, 2025 am 12:07 AM

\ _ \ _ 호출 메소드를 사용하면 객체를 함수처럼 호출 할 수 있습니다. 1. 객체를 호출 할 수 있도록 메소드를 호출하는 \ _ \ _ 정의하십시오. 2. $ obj (...) 구문을 사용할 때 PHP는 \ _ \ _ invoke 메소드를 실행합니다. 3. 로깅 및 계산기, 코드 유연성 및 가독성 향상과 같은 시나리오에 적합합니다.

동시성에 대해 PHP 8.1의 섬유를 설명하십시오.동시성에 대해 PHP 8.1의 섬유를 설명하십시오.Apr 12, 2025 am 12:05 AM

섬유는 PHP8.1에 도입되어 동시 처리 기능을 향상시켰다. 1) 섬유는 코 루틴과 유사한 가벼운 동시성 모델입니다. 2) 개발자는 작업의 실행 흐름을 수동으로 제어 할 수 있으며 I/O 집약적 작업을 처리하는 데 적합합니다. 3) 섬유를 사용하면보다 효율적이고 반응이 좋은 코드를 작성할 수 있습니다.

PHP 커뮤니티 : 자원, 지원 및 개발PHP 커뮤니티 : 자원, 지원 및 개발Apr 12, 2025 am 12:04 AM

PHP 커뮤니티는 개발자 성장을 돕기 위해 풍부한 자원과 지원을 제공합니다. 1) 자료에는 공식 문서, 튜토리얼, 블로그 및 Laravel 및 Symfony와 같은 오픈 소스 프로젝트가 포함됩니다. 2) 지원은 StackoverFlow, Reddit 및 Slack 채널을 통해 얻을 수 있습니다. 3) RFC에 따라 개발 동향을 배울 수 있습니다. 4) 적극적인 참여, 코드에 대한 기여 및 학습 공유를 통해 커뮤니티에 통합 될 수 있습니다.

PHP vs. Python : 차이점 이해PHP vs. Python : 차이점 이해Apr 11, 2025 am 12:15 AM

PHP와 Python은 각각 고유 한 장점이 있으며 선택은 프로젝트 요구 사항을 기반으로해야합니다. 1.PHP는 간단한 구문과 높은 실행 효율로 웹 개발에 적합합니다. 2. Python은 간결한 구문 및 풍부한 라이브러리를 갖춘 데이터 과학 및 기계 학습에 적합합니다.

PHP : 죽어 가거나 단순히 적응하고 있습니까?PHP : 죽어 가거나 단순히 적응하고 있습니까?Apr 11, 2025 am 12:13 AM

PHP는 죽지 않고 끊임없이 적응하고 진화합니다. 1) PHP는 1994 년부터 새로운 기술 트렌드에 적응하기 위해 여러 버전 반복을 겪었습니다. 2) 현재 전자 상거래, 컨텐츠 관리 시스템 및 기타 분야에서 널리 사용됩니다. 3) PHP8은 성능과 현대화를 개선하기 위해 JIT 컴파일러 및 기타 기능을 소개합니다. 4) Opcache를 사용하고 PSR-12 표준을 따라 성능 및 코드 품질을 최적화하십시오.

PHP의 미래 : 적응 및 혁신PHP의 미래 : 적응 및 혁신Apr 11, 2025 am 12:01 AM

PHP의 미래는 새로운 기술 트렌드에 적응하고 혁신적인 기능을 도입함으로써 달성 될 것입니다. 1) 클라우드 컴퓨팅, 컨테이너화 및 마이크로 서비스 아키텍처에 적응, Docker 및 Kubernetes 지원; 2) 성능 및 데이터 처리 효율을 향상시키기 위해 JIT 컴파일러 및 열거 유형을 도입합니다. 3) 지속적으로 성능을 최적화하고 모범 사례를 홍보합니다.

See all articles

핫 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를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구