砸蛋游戏

html

<img src="img/chuizi.png" class="chuizi"/>
<div id="resultTip" class="redborder"></div>
<div id="eggs">
<div class="egg" isbreak="false"></div>
<div class="egg" isbreak="false"></div>
<div class="egg" isbreak="false"></div>
</div>

 

js

$(function() {
var num = Math.floor(Math.random()*3+1);//生成一个向下取整的随机数
var icount=0;//记录点击次数

$(".egg").mouseover(function() {
var eggleft = $(this).offset().left;//获取金蛋距左的位置
$(".chuizi").css("left", eggleft + 120);//修改锤子的位置
});

$(".egg").click(function() {
$(this).css("background-image", "url(img/egg_2.png)");
icount++;
if(icount>3)
{
$('#resultTip').text("蛋砸完了");
return;
}

if($(this).attr("isbreak") == "false") //判断鸡蛋是否已被砸
{
$(this).attr("isbreak", "true");//被砸后，修改状态
var i=$(this).index()+1;//金蛋的索引
if(i==num)
{
$('#resultTip').text("中奖了");
}else
{
$('#resultTip').text("未中奖了");
}
}
});
});