jQuery PHP_php 기술로 구현한 주사위 복권 게임의 예-PHP 튜토리얼-php.cn

jQuery PHP_php 기술로 구현한 주사위 복권 게임의 예

WBOY

풀어 주다： 2016-05-16 20:26:39

원래의

1165명이 탐색했습니다.

이 기사의 예에서는 jQuery PHP로 구현된 주사위 복권 게임의 세부 단계를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이 게임은 Monopoly 게임을 기반으로 하며, 주사위를 던져서 복권 효과를 설계합니다. 물론 개발자는 이 예를 약간 수정하여 적용할 수 있습니다. 웹 사이트의 복권 시나리오. 렌더링은 다음과 같습니다.

전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.

HTML 부분:

우선 주사위 2개와 경품 자료를 준비해야 합니다. 해당 작가님들께서 이미 패키지로 올려놓으셨으니 편하게 다운받으시기 바랍니다. html 페이지에 다음과 같은 html 구조 코드를 작성하겠습니다. .wrap은 주사위와 프롬프트 정보를 배치하는 데 사용되며 #prize는 상품을 배치하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

~ ~ ~ ~

CSS 부분:

페이지 레이아웃을 합리적으로 표준화하려면 CSS 기술을 사용해야 합니다. 총 10개의 위치가 있는 직사각형으로 상품을 둘러싸고, 두 개의 주사위를 직사각형 중앙에 배치하는 동안 중간 주사위를 직접 클릭할 수 있습니다. 무승부. CSS 위치 지정 기술을 사용하여 페이지 레이아웃을 구현할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

.demo{너비:650px; 높이:420px; 여백:60px 자동 10px 자동; 위치:상대적; } 

.wrap{너비:200px; 높이:100px; 위치:절대; 여백-왼쪽:220px; 여백 상단:140px; z-색인:1000;} 

#msg{display:none;너비:50px; 높이:20px; 패딩:4px; 배경:#ffc; 테두리:1px 솔리드 #fc9;  

텍스트 정렬:가운데; 색상:#f30; 글꼴 크기:18px; 위치:절대; Z-색인:1001; 오른쪽:-20px; 상단:-10px} 

.dice{너비:90px; 높이:90px; 표시:블록; 부동:왼쪽; 배경:url(dice.png) 반복 없음; 커서:포인터} 

#dice_mask{너비:200px; 높이:100px; 배경:#fff; 불투명도:0; 위치:절대; 상단:0; 왼쪽:0; z-색인:999} 

.dice_1{배경 위치:-5px -4px} 

.dice_2{배경 위치:-5px -107px} 

.dice_3{배경 위치:-5px -212px} 

.dice_4{배경 위치:-5px -317px} 

.dice_5{배경 위치:-5px -427px} 

.dice_6{배경 위치:-5px -535px} 

.dice_t{배경 위치:-5px -651px} 

.dice_s{배경 위치:-5px -763px} 

.dice_e{배경 위치:-5px -876px} 

#상{위치:상대적} 

#상 li{위치:절대; 너비:150px; 높이:112px; 테두리:1px 솔리드 #d3d3d3} 

#d_0{왼쪽:0; 상단:0} 

#d_1{왼쪽:160px; 상단:0} 

#d_2{왼쪽:320px; 상단:0} 

#d_3{왼쪽:480px; 상단:0} 

#d_4{왼쪽:480px; 상단:128px} 

#d_5{왼쪽:480px; 상단:256px} 

#d_6{왼쪽:320px; 상단:256px} 

#d_7{왼쪽:160px; 상단:256px} 

#d_8{왼쪽:0; 상단:256px} 

#d_9{왼쪽:0; 상단:128px} 

.mask{불투명도: 0.6; 너비:150px; 높이:112px; 줄 높이:32px; 배경:#ffc;  

Z-색인:1001; 위치:절대; 상단:0; 왼쪽:0; 텍스트 정렬:가운데; 글꼴 크기:16px}

jQuery 부분:

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

复主代码代码如下:

$(함수(){ 

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

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

        $('.wrap').append('
');//加遮罩 

        var dice1 = $('#dice1'); 

        var dice2 = $('#dice2'); 

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

            var num1 = json[0]; 

            var num2 = json[1]; 

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

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

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

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

            롤(0, 숫자);//逐步运动动画 

        }); 

    }); 

});

函数diceroll()是一个color子运动动画，여기본站앞면의문서에서중간已讲解过，就是通过jQuery의animate()实现적位移、延时、变化背景样式来实现的动画效果。

复主代码代码如下:

함수 diceroll(주사위, 숫자){ 

Dice.attr('class','dice');//마지막 애니메이션 이후 포인트 지우기 

dice.css('cursor','default') 

dice.animate({왼쪽: ' 2px'}, 100,function(){ 

           dice.addClass('dice_t') 

}).delay(200).animate({top:'-2px'},100,function(){ 

          Dice.removeClass('dice_t').addClass('dice_s') 

}).delay(200).animate({불투명도: '표시'},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 값이 step과 같으면 애니메이션이 중지되고 주사위의 마스크가 제거됩니다(반복 클릭을 방지하기 위해).

코드 복사 코드는 다음과 같습니다.

함수 롤(i,step){ 

var time = setInterval(function(){ 

If(i>9){ 

            var t = i - 10;
                   $('#d_' t).append('
') 

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

           } 

            $('#d_' i).append('
') 

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

          if(i==단계){ 

                                                                                                ,,,,,,,,,,,,,,,,,,,,,,;
                  $('#dice_mask').remove();//마스크 제거 

           } 

           i ;//계속 전진하세요 

},500);
}

PHP 부분:

dice.php가 해야 할 일은 구성된 상금 확률에 따라 총점을 얻고, 총점에 따라 두 주사위의 점수를 분배하고, 마지막으로 두 주사위의 점수를 프런트엔드에 반환하는 것입니다. 페이지.

코드 복사 코드는 다음과 같습니다.

//당첨 확률 설정 

$prize_arr = 배열( 

'2' => 배열('id'=>2,'v'=>10), 

'3' => 배열('id'=>3,'v'=>20), 

'4' => 배열('id'=>4,'v'=>5), 

'5' => 배열('id'=>5,'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'=>12,'v'=>5), 

); 

foreach ($prize_arr as $key => $val) { 

$arr[$val['id']] = $val['v'] 

} 

$sum = getRand($arr); //확률에 따라 보상 ID를 얻고 총점을 얻습니다 

//주사위 포인트 할당 

$arrs = 배열(

'2' => 배열(배열(1,1)), 

'3' => 배열(배열(1,2)), 

'4' => 배열(배열(1,3),배열(2,2)), 

'5' => 배열(배열(1,4),배열(2,3)), 

'6' => 배열(배열(1,5),배열(2,4),배열(3,3)), 

'7' => 배열(배열(1,6),배열(2,7),배열(3,4)), 

'8' => 배열(배열(2,6),배열(3,5),배열(4,4)), 

'9' => 배열(배열(3,6),배열(4,5)), 

'10' => 배열(배열(4,6),배열(5,5)), 

'11' => 배열(배열(5,6)), 

'12' => 배열(배열(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() 함수가 사용됩니다

코드 복사 코드는 다음과 같습니다.

//확률 계산 

함수 getRand($proArr) { 

$결과 = '' 

//확률 배열의 전체 확률 정확도 

$proSum = array_sum($proArr) 

//확률 배열 루프 

foreach($proArr as $key => $proCur) { 

          $randNum = mt_rand(1, $proSum) 

If ($randNum <= $proCur) { 

                $result = $key 

             휴식 

         } else { 

                $proSum -= $proCur 

           } 

} 

설정 해제($proArr) 

$결과 반환 

}

이 기사가 모든 사람의 PHP 프로그래밍 설계에 도움이 되기를 바랍니다.