今天微信这边开始做游戏了，感觉挺好玩儿的，我被分到了一个砸金蛋的游戏。先看下实现后的效果：
这个游戏因为不仅涉及到前台的JS等等，还要从后台获取数据，比如，设置的概率什么的，奖品数量。
ok,上源码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="Styles/egg.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<div class="egg">
<ul class="eggList">
<p class="hammer" id="hammer">锤子</p>
<p class="resultTip" id="resultTip"><b id="result"></b></p>
<li><span>1</span><sup></sup></li>
<li><span>2</span><sup></sup></li>
<li><span>3</span><sup></sup></li>
</ul>
</div>
</div>
<script type="text/javascript">
var flag = false;
function eggClick(obj) {
var _this = obj;
$.get("setSettings2.ashx", function (res) {
if (_this.hasClass("curr")) {
alert("蛋都碎了，别砸了！刷新再来.");
return false;
}
$(".hammer").css({ "top": _this.position().top - 55, "left": _this.position().left + 185 });
$(".hammer").animate({
"top": _this.position().top - 25,
"left": _this.position().left + 125
}, 30, function () {
_this.addClass("curr"); //蛋碎效果
_this.find("sup").show(); //金花四溅
$(".hammer").hide();
$('.resultTip').css({ display: 'block', top: '100px', left: _this.position().left + 45, opacity: 0 }).animate({ top: '50px', opacity: 1 }, 300, function () {
// if (res.msg == 1) {
// $("#result").html("恭喜，您中得" + res.prize + "!");
// } else {
// $("#result").html("很遗憾,您没能中奖!");
// }
$("#result").html(res);
});
}
);
});
}
$(".eggList li").click(function () {
if (flag == false) {
$(this).children("span").hide();
eggClick($(this));
flag = true;
} else {
$("#result").html("您已经砸过一次了！！！！！");
}
});
$(".eggList li").hover(function () {
var posL = $(this).position().left + $(this).width();
$("#hammer").show().css('left', posL);
});
</script>
</body>
</html>
引入的CSS：
.egg{width:660px; height:400px; margin:50px auto 20px auto;}
.egg ul li{z-index:999;}
.eggList{padding-top:110px;position:relative;width:660px;}
.eggList li{float:left;background:url(../images/egg_1.png) no-repeat bottom;width:158px;
height:187px;cursor:pointer;position:relative;margin-left:35px;}
.eggList li span{position:absolute; width:30px; height:60px; left:68px; top:64px; color:#ff0;
font-size:42px; font-weight:bold}
.eggList li.curr{background:url(../images/egg_2.png) no-repeat bottom;cursor:default;z-index:300;}
.eggList li.curr sup{position:absolute;background:url(../images/img-4.png) no-repeat;width:232px;
height:181px;top:-36px;left:-34px;z-index:800;}
.hammer{background:url(../images/img-6.png) no-repeat;width:74px;height:87px;position:absolute;
text-indent:-9999px;z-index:150;left:168px;top:100px;}
.resultTip{position:absolute; background:#ffc ;width:148px;padding:6px;z-index:500;top:200px;
left:10px; color:#f60; text-align:center;overflow:hidden;display:none;z-index:500;}
.resultTip b{font-size:14px;line-height:24px;}
images文件：
后台处理：
public class setSettings2 : IHttpHandler
{
private double Chance = 0.9;//中奖概率
public List<PriceInfo> GetDataFromDB()
{
#region 模拟读到的数据库的奖项级别
List<PriceInfo> prices = new List<PriceInfo>() {
new PriceInfo(){
GotPriceChance=float.Parse("1"),
PriceLevel=1,
PriceLevelName="一等奖",
PriceNum=100},
new PriceInfo(){ GotPriceChance=float.Parse("1"),
PriceLevel=2,
PriceLevelName="二等奖",
PriceNum=100},
new PriceInfo(){ GotPriceChance=float.Parse("1"),
PriceLevel=3,
PriceLevelName="三等奖",
PriceNum=100}
};
#endregion
return prices;
}
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string strResult = "不好意思，您没有获奖，么么哒~~~~"; //返回给用户的抽奖结果
int intTotal = 0; //获取总抽奖次数
GetDataFromDB().ForEach(item =>
{
intTotal += item.PriceNum;
});
int intResult = this.GetRandom((int)(intTotal/Chance)); //生成一个用户的随机整数
this.GetPrice(GetDataFromDB()).ForEach(item => //对奖项集合进行变量并于用户的随机整数对比
{
if (intResult == item.PriceLevel)
{
strResult = item.PriceLevelName; //奖项等级名称赋值
//抽到的奖项的数量减一——此处要修改数据库
context.Response.Write(strResult);
context.Response.End();
}
});
context.Response.Write(strResult);
}
/// <summary>
/// 判断中了几等奖
/// </summary>
/// <param name="priceInfo"></param>
/// <returns></returns>
public List<PriceInfo> GetPrice(List<PriceInfo> priceInfos)
{
List<PriceInfo> pricelist = new List<PriceInfo>();
priceInfos.ForEach(p =>
{
int j = 0;
for (int i = 0; i < p.PriceNum; i++)
{
pricelist.Add(new PriceInfo()
{
GotPriceChance = p.GotPriceChance,
PriceLevel = ++j,//level里面放置编号
PriceLevelName = p.PriceLevelName,
PriceNum = p.PriceNum
});
}
});
return pricelist;
}
/// <summary>
/// 生成指定数量内的随机数字
/// </summary>
/// <param name="maxNum"></param>
/// <returns></returns>
public int GetRandom(int maxNum)
{
Random ran = new Random();
ran.Next(1, 100);
int intResult = ran.Next(1, maxNum + 1);
return intResult;
}
public bool IsReusable
{
get
{
return false;
}
}
}
/// <summary>
/// 奖品信息
/// </summary>
public class PriceInfo
{
public float GotPriceChance { get; set; }//中奖概率:例如：50%
public int PriceLevel { get; set; }//中奖级别:例如：1
public string PriceLevelName { get; set; }//中奖级别名称：例如，一等奖
public int PriceNum { get; set; }//奖品数量 ：例如：100
}
唉，又找回了当年疯狂粘人代码的赶脚。。。