jQuery+PHP掷色子抽奖游戏实现原理与代码详解

星野

发布时间：2026-10-14 | 4人浏览过

原创

本文将详细解析如何使用 jQuery 和 PHP 开发一款以掷色子决定步数并抽取奖品的网页游戏。通过整合前端的 jQuery 动画控制与后端的 PHP 概率运算，实现可配置中奖率的互动效果。内容包含完整的 HTML/CSS 布局结构、前端交互逻辑以及后端数据处理代码。

结果或目标

本示例旨在创建一个类似大富翁玩法的网页抽奖系统。用户通过点击色子触发前端动画，向后端发起请求获取点数，随后页面根据点数逐步移动高亮显示最终获得的奖品。整个过程流畅，且后台可控中奖概率。

准备条件

在开始之前，请确保准备以下素材与环境：

图片素材：需要两粒色子的图片（dice.png，用于CSS Sprite背景切割）以及各奖品的占位图片或 GIF（如 images/0.gif 等）。
运行环境：支持 PHP 的后端服务器环境，以及引入 jQuery 库的前端浏览器环境。
文件结构：建议创建 dice.php 作为后端接口，主页面为 index.html（或 .php）。

最终效果图如下：用户看到两个色子位于中心，周围环绕矩形排列的奖品区，点击色子后产生走动动画。

真实操作顺序

第1步：构建 HTML 结构

目的：搭建页面的基础骨架，定义色子容器与奖品列表。

入口：新建 HTML 页面文件。

动作：使用 div 包裹色子和提示信息，使用 ul/li 列表展示奖品。注意为每个奖品项设置唯一的 ID，以便后续 JS 寻址。

<div class='demo'>
    <div class='wrap'>
        <div id='msg'></div>
        <div id='dice'>
            <span class='dice dice_1' id='dice1'></span>
            <span class='dice dice_6' id='dice2'></span>
        </div>
    </div>
    <ul id='prize'>
        <li id='d_0'><img src='images/0.gif' alt='开始'></li>
        <li id='d_1'><img src='images/1.gif' alt='现金100元'></li>
        <li id='d_2'><img src='images/2.gif' alt='泰迪熊宝宝'></li>
        <li id='d_3'><img src='images/7.gif' alt='谢谢参与'></li>
        <li id='d_4'><img src='images/3.gif' alt='iphone 5s'></li>
        <li id='d_5'><img src='images/4.gif' alt='笔记本电脑'></li>
        <li id='d_6'><img src='images/7.gif' alt='谢谢参与'></li>
        <li id='d_7'><img src='images/5.gif' alt='单反相机'></li>
        <li id='d_8'><img src='images/6.gif' alt='轿车'></li>
        <li id='d_9'><img src='images/7.gif' alt='谢谢参与'></li>
    </ul>
</div>

第2步：编写 CSS 样式布局

目的：通过绝对定位将奖品排成矩形框，并将色子置于中央，设置初始状态与遮罩层样式。

参数：需调整 #prize li 的 left 和 top 值以形成环形路径。

.demo { width: 650px; height: 420px; margin: 60px auto 10px auto; position: relative; }
.wrap { width: 200px; height: 100px; position: absolute; margin-left: 220px; margin-top: 140px; z-index: 1000; }
#msg { display: none; width: 50px; height: 20px; padding: 4px; background: #ffc; border: 1px solid #fc9; text-align: center; color: #f30; font-size: 18px; position: absolute; z-index: 1001; right: -20px; top: -10px; }
.dice { width: 90px; height: 90px; display: block; float: left; background: url(dice.png) no-repeat; cursor: pointer; }
/* 其他 dice_x 背景定位省略... */
#prize li { position: absolute; width: 150px; height: 112px; border: 1px solid #d3d3d3; }
/* 奖品位置定位... */
.mask { opacity: 0.6; width: 150px; height: 112px; line-height: 32px; background: #ffc; z-index: 1001; position: absolute; top: 0; left: 0; text-align: center; font-size: 16px; }

第3步：实现 jQuery 前端交互逻辑

目的：监听色子点击，发送 AJAX 请求，执行掷骰子动画，并根据返回点数驱动奖品走动。

动作：

点击色子时，移除旧的奖品遮罩，添加全局遮罩防止重复点击。
调用 diceroll() 函数模拟掷骰子视觉效果。
通过 $.getJSON 请求 dice.php，获取两个色子的点数（JSON格式数组）。
计算总点数，提示用户，并启动 roll() 函数进行奖品索引的移动。

$(function() {
    $('#dice').click(function() {
        $('#prize li .mask').remove(); // 清理旧遮罩
        $('.wrap').append('<div id="dice_mask"></div>'); // 添加遮罩防抖
        var dice1 = $('#dice1');
        var dice2 = $('#dice2');
        
        $.getJSON('dice.php', function(json) {
            var num1 = json[0];
            var num2 = json[1];
            diceroll(dice1, num1); // 掷骰子1动画
            diceroll(dice2, num2); // 掷骰子2动画
            
            var num = parseInt(num1) + parseInt(num2);
            // 显示点数提示
            $('#msg').css('top', '-10px').fadeIn(500).text(num + '点')
                     .animate({ top: '-50px' }, '1000').fadeOut(500);
            
            roll(0, num); // 开始奖品走动动画
        });
    });
});

第4步：处理掷骰子动画细节

目的：利用 animate 改变色子的背景位置和位移，模拟投掷过程。

function diceroll(dice, num) {
    dice.attr('class', 'dice'); // 重置类名
    dice.css('cursor', 'default');
    dice.animate({ left: '+2px' }, 100, function () {
        dice.addClass('dice_t'); // 翻滚中状态
    }).delay(200).animate({ top: '-2px' }, 100, function () {
        dice.removeClass('dice_t').addClass('dice_s');
    }).delay(200).animate({ opacity: 'show' }, 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');
    });
}

第5步：实现奖品走动（Roll）逻辑

目的：使用定时器逐个高亮奖品格子，直到走完总步数。

重要参数：i为当前索引，step为总步数。当 i == step 时清除定时器。

function roll(i, step) {
    var time = setInterval(function () {
        if (i > 9) { // 处理越界循环逻辑
            var t = i - 10;
            $('#d_' + t).append('<div class="mask"></div>');
            $('#d_' + (t - 1) + ' .mask').remove();
        }
        $('#d_' + i).append('<div class="mask"></div>'); // 当前格加遮罩
        $('#d_' + (i - 1) + ' .mask').remove(); // 移除上一格遮罩

        if (i == step) {
            clearInterval(time); // 停止动画
            $('#dice_mask').remove(); // 移除防抖遮罩
        }
        i++;
    }, 500);
}

第6步：编写 PHP 后端概率算法

目的：根据预设的中奖概率返回一个“总点数”，并将该点数拆解为两个色子的具体点数返回给前端。

操作流程：

定义概率表：设置不同总点数（2-12）对应的权重。v 值代表权重，值越大中奖率越高。
随机选点：调用 getRand() 函数，根据权重累加随机抽取一个总点数 $sum。
拆分点数：建立映射表 $arrs，将总点数拆分为合法的色子组合（如总和6可拆为1+5, 2+4, 3+3），随机选取一组并打乱顺序，避免第一粒色子总是较小。
输出JSON：echo 编码后的数组。

<?php
// 概率配置：key为总点数，v为权重
$prize_arr = array(
    '2' => array('id'=>2,'v'=>10),
    '3' => array('id'=>3,'v'=>20),
    '4' => array('id'=>4,'v'=>5),
    '5' => array('id'=>5,'v'=>5),
    '6' => array('id'=>6,'v'=>20),
    '7' => array('id'=>7,'v'=>2),
    '8' => array('id'=>8,'v'=>3),
    '9' => array('id'=>9,'v'=>20),
    '10' => array('id'=>10,'v'=>0), // 权重0代表不中奖或特定处理
    '11' => array('id'=>11,'v'=>10),
    '12' => array('id'=>12,'v'=>5),
);

// 整理为线性概率数组
foreach ($prize_arr as $key => $val) {
    $arr[$val['id']] = $val['v'];
}

$sum = getRand($arr); // 获取随机总点数

// 点数拆分映射表
$arrs = array(
    '2' => array(array(1,1)),
    '3' => array(array(1,2)),
    '4' => array(array(1,3),array(2,2)),
    '5' => array(array(1,4),array(2,3)),
    '6' => array(array(1,5),array(2,4),array(3,3)),
    '7' => array(array(1,6),array(2,5),array(3,4)), // 修正原文可能的错误组合
    '8' => array(array(2,6),array(3,5),array(4,4)),
    '9' => array(array(3,6),array(4,5)),
    '10' => array(array(4,6),array(5,5)),
    '11' => array(array(5,6)),
    '12' => array(array(6,6))
);

$arr_rs = $arrs[$sum];
$i = array_rand($arr_rs);
$arr_a = $arr_rs[$i];
shuffle($arr_a); // 打乱两个色子的顺序
echo json_encode($arr_a);

// 概率计算函数
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;
}
?>

完成判断

当你在浏览器中打开页面，点击中间的色子区域：

色子会有滚动的视觉动画。
页面上方会显示具体的点数（例如“8点”）。
周围的奖品格子会依次亮起黄色遮罩，每0.5秒跳一格，直到走完8步后停止。
若再次点击，遮罩存在且新请求不会干扰，直到动画结束移除遮罩。

简要总结

这个实例结合了 jQuery 的 DOM 操作能力与 CSS 的定位技巧，实现了流畅的游戏交互体验。核心在于后端的 getRand 算法控制了游戏的公平性与商业逻辑（奖品分布），而前端的 roll 函数则负责将抽象的数字转化为直观的视觉反馈。开发者可根据实际需求调整 $prize_arr 中的权重来优化活动转化率。以上就是 jQuery+PHP 实现的掷色子抽奖游戏详细内容的完整介绍，更多关于前端动画设计与 PHP 概率算法的资料请关注本站其它相关文章！