Trò chơi vòng quay may mắn với PHP

Posted on June 23, 2022June 23, 2022 by admin

cách làm vòng quay may mắn bằng php

5/5 - (2 votes)

Vòng quay may mắn, lucky wheel hay còn được thường được gọi là chiếc nón kỳ diệu, là một trò chơi rất phổ biến. Hiện rất nhiều trang web viết trò chơi này để tăng thành viên thông qua các phần thưởng.

Code phổ biến dùng để viết trò chơi vòng quay may mắn đa số được sử dụng là javascript. Nếu tìm hiểu bạn sẽ thấy trong javascript cũng có rất nhiều cách viết khác nhau.

Có rất nhiều chia sẽ trên mạng về cách viết trò chơi vòng quay may mắn bằng javascript. Nhưng mình thích làm bằng PHP hơn và thế nên đã tìm thấy một chia sẽ hiếm hoi ở diễn đàn Tiếng Trung về cách làm trò chơi vòng quay may mắn bằng php nên hôm nay chia sẽ lại để ai cần thì dùng.

Nội dung bài viết

Giao diện vòng quay may mắn

Giao diện của vòng quay may mắn có 2 phần chính là đĩa và cò quay. Tuỳ vào nhu cầu thực tế khách nhau mà bạn thiết kế hình ảnh đĩa và cò quay cho phù hợp với mình. Ở đây phần đĩa sẽ được chia làm tổng cộng 12 phần khác nhau.

Sau khi chuẩn bị được 2 hình ảnh ở trên bạn tiến hành làm phần khung để đặt đĩa và cò quay bằng HTML

<div class="demo"> 
    <div id="disk"></div> 
    <div id="start"><img src="start.png" id="startbtn"></div> 
</div>

Ở phần này id #disk được sử dụng để đặt đĩa, còn phần #start dùng để đặt cò quay. Và để vị trí của cò quay và đĩa nằm đúng vị trí thì ta dùng CSS để điều chỉnh nó.

.demo{width:417px; height:417px; position:relative; margin:50px auto} 
#disk{width:417px; height:417px; background:url(disk.jpg) no-repeat} 
#start{width:163px; height:320px; position:absolute; top:46px; left:130px;} 
#start img{cursor:pointer}

Code PHP cho vòng quay may mắn

Xác định góc và tỷ lệ trúng thưởng

Chúng ta sẽ sử dụng mảng đa chiều để đặt góc và tỷ lệ trúng thưởng tương ứng với các phần trên đĩa.

$prize_arr = array( 
    '0' => array('id'=>1,'min'=>1,'max'=>29,'prize'=>'Giải nhất','v'=>1), 
    '1' => array('id'=>2,'min'=>302,'max'=>328,'prize'=>'Giải nhì','v'=>2), 
    '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'Giải ba','v'=>5), 
    '3' => array('id'=>4,'min'=>182,'max'=>208,'prize'=>'Giải tư','v'=>7), 
    '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'Giải năm','v'=>10), 
    '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'Giải sáu','v'=>25), 
    '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332), 
'max'=>array(58,118,178,238,298,358),'prize'=>'giải bảy','v'=>50) 
);

Trong mảng $prize_arr, id được sử dụng để xác định các giải thưởng khác nhau. min đại diện cho góc nhỏ nhất và max đại diện cho góc lớn nhất tương ứng với mỗi khoảng giải thưởng trong đĩa, chẳng hạn như góc nhỏ nhất trong giải nhất là 0, góc lớn nhất là 30.

Để ngăn con trỏ chỉ vào đường ngăn giữa hai giải liền kề khi xổ số, chúng ta sẽ tăng góc nhỏ nhất lên 1 đơn vị và giảm góc lớn nhất 1 đơn vị. Vì vậy bạn thấy góc ở giải nhất min là 1 và max là 29.

Giải bảy sẽ được thiết lập như là phần không trúng thưởng nên nó sẽ chiếm nhiều phần trong đĩa. Vì vậy ở đây chúng ta lại dùng mảng để thiết lập các góc min và max khác nhau.

id dùng để xác định giải thưởng thì v đại diện cho xác suất trúng thưởng. Tổng giải thưởng của 7 giải là 100% vì vậy tổng của v ở đây cộng lại phải bằng 100%. Nên con số mà bạn thấy sau v là tương ứng với phần trăm của nó. Ví dụ ở giải nhất 1 là tương đương 1% xác suất trúng thưởng…

Tính xác suất trúng thưởng

Sau khi biết góc và tỷ lệ phần trăm trúng thưởng chúng ta viết hàm tính xác suất trúng thưởng.


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; 
}

Hàm getRand () sẽ tính toán id đủ điều kiện theo phần trăm được đặt trong mảng.

foreach ($prize_arr as $key => $val) { 
    $arr[$val['id']] = $val['v']; 
} 
 
$rid = getRand($arr);  
 
$res = $prize_arr[$rid-1];  
$min = $res['min']; 
$max = $res['max']; 
if($res['id']==7){  
    $i = mt_rand(0,5); 
    $result['angle'] = mt_rand($min[$i],$max[$i]); 
}else{ 
    $result['angle'] = mt_rand($min,$max);
} 
$result['prize'] = $res['prize']; 
 
echo json_encode($result);

Trong đoạn code này chúng ta sẽ gọi hàm getRand() để lấy kết quả thu được sau khi đã tính xác suất. Rồi tiếp tục sẽ xác định giá trị góc nhỏ nhất và lớn nhất của giải thưởng và sau đó trả kết quả về dưới dạng json.

Dùng jQuery để làm quay vòng quay may mắn

Có nhiều cách để làm xoay hình ảnh như sử dụng canvas html5, tuy nhiên để đạt được độ tương thích với hầu hết các trình duyệt và linh động thì jQueryRotate sẽ là lựa chọn tốt nhất.

Sự dụng jQueryRotate.js, hình ảnh có thể xoay được ở bất cứ góc độ nào, có thể ràng buộc hoạt động liên quan tới con trỏ chuột, hiệu ứng hoạt hình trong khi xoay.

Để sử dụng được thư viện jQueryRotate.js bạn nhớ thêm vào trước nó thư viện jQuery nếu không nó sẽ không hoạt động. Và để đĩa có thể quay được thì bạn cần đoạn code như dưới đây.

$(function(){ 
    $("#disk").rotate({ 
        bind:{ 
            click:function(){//Sự kiện nhấp chuột 
                 var a = Math.floor(Math.random() * 360); //tạo số ngẫu nhiên 
                 $(this).rotate({ 
                         duration:3000,//tốc độ quay 
                         angle: 0,  //góc bắt đầu 
                        animateTo:3600+a, //góc quay 
                        easing: $.easing.easeOutSine, //phần hiệu ứng mở rộng
                        callback: function(){ //callback 
                            alert('Trúng rồi！'); 
                        } 
                 }); 
            } 
        } 
    }); 
});

Để kết quả hiển thị ra ở phía người dùng sau khi quay chúng ta sẽ có một số điều chỉnh.

$(function(){ 
     $("#startbtn").click(function(){ 
        lottery(); 
    }); 
}); 
function lottery(){ 
    $.ajax({ 
        type: 'POST', 
        url: 'data.php', 
        dataType: 'json', 
        cache: false, 
        error: function(){ 
            alert('Có lỗi！'); 
            return false; 
        }, 
        success:function(json){ 
            $("#startbtn").unbind('click').css("cursor","default"); 
            var a = json.angle; //góc 
            var p = json.prize; //giải thưởng 
            $("#disk").rotate({ 
                duration:3000, //thời gian xoay 
                angle: 0, 
                animateTo:1800+a, //góc quay 
                easing: $.easing.easeOutSine, 
                callback: function(){ 
                    var con = confirm('Chúc mừng，bạn trúng'+p+'\nBạn muốn quay tiếp không？'); 
                    if(con){ 
                        lottery(); 
                    }else{ 
                        return false; 
                    } 
                } 
            }); 
        } 
    }); 
}

Trong đoạn code này, khi người dùng bấm vào nút quay thì một yêu cầu sẽ được gửi tới file data.php để chúng sẽ xử lý và trả kết quả về dưới dạng json. Sau khi có kết quả trả về thì jquery sẽ làm cho đĩa quay và xuất ra kết quả sau khi dừng.

Ở bài làm vòng quay may mắn này mình đã điều chỉnh từ quay cò quay thành quay đĩa so với bài gốc bằng tiếng Trung. Nếu bạn nào thích thì có thể xem bài hướng dẫn bằng tiếng Trung tại đây.

Trong bài tới mình sẽ chia sẽ cách làm vòng quay may mắn bằng laravel với code này và có đầy đủ phân quyền.