検索
ホームページphp教程php手册分享jQuery+PHP实现的掷色子抽奖实例

本文我们来分享一个由jQuery+PHP开发的掷色子抽奖实例,开发者可以将本实例稍作修改即可运用到网站中的抽奖活动场景中。

本文以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽奖活动场景中。

 

 jQuery+PHP掷色子抽奖

 

HTML

首先我们需要准备两粒色子和奖品素材,这些作者已经打包上传了,请大家放心下载。我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信息,#prize则是用来放置奖品的。

<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="/static/imghwm/default1.png"  data-src="images/0.gif"  class="lazy"   alt="开始"></li> 
        <li id="d_1"><img src="/static/imghwm/default1.png"  data-src="images/1.gif"  class="lazy"   alt="现金100元"></li> 
        <li id="d_2"><img src="/static/imghwm/default1.png"  data-src="images/2.gif"  class="lazy"   alt="泰迪熊宝宝"></li> 
        <li id="d_3"><img src="/static/imghwm/default1.png"  data-src="images/7.gif"  class="lazy"   alt="谢谢参与"></li> 
        <li id="d_4"><img src="/static/imghwm/default1.png"  data-src="images/3.gif"  class="lazy"   alt="iphone 5s"></li> 
        <li id="d_5"><img src="/static/imghwm/default1.png"  data-src="images/4.gif"  class="lazy"   alt="笔记本电脑"></li> 
        <li id="d_6"><img src="/static/imghwm/default1.png"  data-src="images/7.gif"  class="lazy"   alt="谢谢参与"></li> 
        <li id="d_7"><img src="/static/imghwm/default1.png"  data-src="images/5.gif"  class="lazy"   alt="单反相机"></li> 
        <li id="d_8"><img src="/static/imghwm/default1.png"  data-src="images/6.gif"  class="lazy"   alt="轿车"></li> 
        <li id="d_9"><img src="/static/imghwm/default1.png"  data-src="images/7.gif"  class="lazy"   alt="谢谢参与"></li> 
    </ul> 
</div>

我们要用CSS技术来将页面布局合理规范化,我们将奖品围成一个矩形,共10个位置,将两粒色子定位在矩形的中央,抽奖时可以直接点击中间的色子。这些我们可以用CSS的定位技术来实现页面布局。CSS

.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(http://pic1.phprm.com/2015/01/01/dice.jpg) no-repeat; cursor:pointer} 
#dice_mask{width:200px; height:100px; background:#fff; opacity:0; position:absolute; top:0; left:0; z-index:999} 
.dice_1{background-position:-5px -4px} 
.dice_2{background-position:-5px -107px} 
.dice_3{background-position:-5px -212px} 
.dice_4{background-position:-5px -317px} 
.dice_5{background-position:-5px -427px} 
.dice_6{background-position:-5px -535px} 
.dice_t{background-position:-5px -651px} 
.dice_s{background-position:-5px -763px} 
.dice_e{background-position:-5px -876px} 
#prize{position:relative} 
#prize li{position:absolute; width:150px; height:112px; border:1px solid #d3d3d3} 
#d_0{left:0; top:0} 
#d_1{left:160px; top:0} 
#d_2{left:320px; top:0} 
#d_3{left:480px; top:0} 
#d_4{left:480px; top:128px} 
#d_5{left:480px; top:256px} 
#d_6{left:320px; top:256px} 
#d_7{left:160px; top:256px} 
#d_8{left:0; top:256px} 
#d_9{left:0; top:128px} 
.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}

jQuery

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

$(function(){ 
    $("#dice").click(function(){ 
        $("#prize li .mask").remove(); 
        $(".wrap").append("<div id=&#39;dice_mask&#39;></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+&#39;点&#39;).animate({top:&#39;-50px&#39;},&#39;1000&#39;).fadeOut(500);
            roll(0, num);//逐步运动动画 
        }); 
    }); 
});

函数diceroll()是一个色子运动动画,在本站前面的文章中已讲解过,就是通过jQuery的animate()实现的位移、延时、变化背景样式来实现的动画效果。

function diceroll(dice,num){ 
    dice.attr("class","dice");//清除上次动画后的点数 
    dice.css(&#39;cursor&#39;,&#39;default&#39;); 
    dice.animate({left: &#39;+2px&#39;}, 100,function(){ 
        dice.addClass("dice_t"); 
    }).delay(200).animate({top:&#39;-2px&#39;},100,function(){ 
        dice.removeClass("dice_t").addClass("dice_s"); 
    }).delay(200).animate({opacity: &#39;show&#39;},600,function(){ 
        dice.removeClass("dice_s").addClass("dice_e"); 
    }).delay(100).animate({left:&#39;-2px&#39;,top:&#39;2px&#39;},100,function(){ 
        dice.removeClass("dice_e").addClass("dice_"+num); 
        dice.css(&#39;cursor&#39;,&#39;pointer&#39;); 
    }); 
}

 函数roll()至关重要,通过setInterval()设置一个间隔动画,每隔0.5秒时间执行一次。参数i代表初始位置,参数step代表需要执行 的步数,在本例中就是色子的点数,即需要走的步数。我们根据i给当前奖品加上.mask,当i的值与step相等时,停止动画,并且移除色子的遮罩(防止 重复点击)。

function roll(i,step){ 
    var time = setInterval(function(){ 
        if(i>9){ 
            var t = i - 10; 
            $("#d_"+t).append("<div class=&#39;mask&#39;></div>"); 
            $("#d_"+(t-1)+" .mask").remove(); 
        } 
        $("#d_"+i).append("<div class=&#39;mask&#39;></div>"); 
        $("#d_"+(i-1)+" .mask").remove(); 
        if(i==step){ 
             clearInterval(time); //如果到达指定位置则停止 
             $("#dice_mask").remove();//移除遮罩 
        } 
        i++;//继续前进 
    },500); 
}

PHP 

dice.php需要做的事情有:根据配置好的奖品概率,得到总点数,根据总点数进行两粒色子的点数分配,最后返回给前端页面两粒色子的点数。

//设置中奖概率 
$prize_arr = array( 
    &#39;2&#39; => array(&#39;id&#39;=>2,&#39;v&#39;=>10), 
    &#39;3&#39; => array(&#39;id&#39;=>3,&#39;v&#39;=>20), 
    &#39;4&#39; => array(&#39;id&#39;=>4,&#39;v&#39;=>5), 
    &#39;5&#39; => array(&#39;id&#39;=>5,&#39;v&#39;=>5), 
    &#39;6&#39; => array(&#39;id&#39;=>6,&#39;v&#39;=>20), 
    &#39;7&#39; => array(&#39;id&#39;=>7,&#39;v&#39;=>2), 
    &#39;8&#39; => array(&#39;id&#39;=>8,&#39;v&#39;=>3), 
    &#39;9&#39; => array(&#39;id&#39;=>9,&#39;v&#39;=>20), 
    &#39;10&#39; => array(&#39;id&#39;=>10,&#39;v&#39;=>0), 
    &#39;11&#39; => array(&#39;id&#39;=>11,&#39;v&#39;=>10), 
    &#39;12&#39; => array(&#39;id&#39;=>12,&#39;v&#39;=>5), 
); 
foreach ($prize_arr as $key => $val) { 
    $arr[$val[&#39;id&#39;]] = $val[&#39;v&#39;]; 
} 
$sum = getRand($arr); //根据概率获取奖项id,得到总点数 
//分配色子点数 
$arrs = array( 
    &#39;2&#39; => array(array(1,1)), 
    &#39;3&#39; => array(array(1,2)), 
    &#39;4&#39; => array(array(1,3),array(2,2)), 
    &#39;5&#39; => array(array(1,4),array(2,3)), 
    &#39;6&#39; => array(array(1,5),array(2,4),array(3,3)), 
    &#39;7&#39; => array(array(1,6),array(2,7),array(3,4)), 
    &#39;8&#39; => array(array(2,6),array(3,5),array(4,4)), 
    &#39;9&#39; => array(array(3,6),array(4,5)), 
    &#39;10&#39; => array(array(4,6),array(5,5)), 
    &#39;11&#39; => array(array(5,6)), 
    &#39;12&#39; => 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);

函数getRand()用来计算概率

//计算概率 
function getRand($proArr) { 
    $result = &#39;&#39;; 
    //概率数组的总概率精度 
    $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; 
}

教程链接:

随意转载~但请保留教程地址★

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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ヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。