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

이 기사의 예에서는 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 프로그래밍 설계에 도움이 되기를 바랍니다.