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='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>

CSS部分：

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

代码如下:
.demo{width:650px; height:420px; margin:60px auto 10px auto; position:relative; }