Smashing golden eggs is widely used in celebrations, business promotions, TV entertainment and other occasions. Its fun and suspense can quickly activate the atmosphere of the scene. Similarly, we can also apply Golden Egg Smashing to WEB websites to carry out online activities. This article will use jQuery and PHP to explain how to implement a WEB golden egg smashing program.

Preparation

We need to prepare props (materials), that is, related pictures, including golden egg pictures , pictures of smashed eggs, pictures of smashed flowers, and pictures of hammers.

HTML

What we want to show on our page is a golden egg-breaking platform. There are three golden eggs numbered 1, 2, and 3 on the platform, as well as a hammer. We construct the following html code:

<p 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> </p>

In the above code, .hammer is used to place the hammer, and .resultTip is used to display the result after smashing the egg, that is, whether there is a prize or not. Place 3 golden eggs in each of the three li's. We use CSS to decorate the effect.

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;}

According to the above code we can see a complete golden egg breaking scene on the page. Note that we use png Pictures, if your customers are still using IE6, you may need to process the transparency of png pictures, which is not dealt with in this article.

jQuery

Next, we will use jQuery code to realize the entire process of smashing golden eggs, breaking eggs, and displaying the winning results. Of course, the old rule is that for example programs implemented with jQuery, you must first load the jQuery library file.

First of all, when the mouse slides towards the golden egg, the hammer used to smash the golden egg will only be on the upper right side of the golden egg, which can be positioned using position().

$(".eggList li").hover(function() { 
    var posL = $(this).position().left + $(this).width(); 
    $("#hammer").show().css('left', posL); 
})

Then, click on the golden egg, which is the process of swinging the hammer to hit the golden egg. We first hide the numbers in the golden eggs in click, and then call the custom function eggClick().

$(".eggList li").click(function() { 
    $(this).children("span").hide(); 
    eggClick($(this)); 
});

Finally, in the custom function eggClick(), we use jQuery’s $.getJSON method to send an ajax request to the background data.php, and the background php The program will handle the prize distribution and return the winning results. We use animate() to realize the animation of smashing the hammer, and achieve a simple animation effect by changing the top and left positions of the hammer. After the hammer is smashed, the golden egg style changes to .curr, while gold flowers splash, and then the winning result is achieved. resultTip shows that whether you win or not depends on your luck and the winning probability set by the background awards. Let’s look at the code of the golden egg-breaking function eggClick()

function eggClick(obj) { 
    var _this = obj; 
    $.getJSON("data.php",function(res){//ajax請求 
        _this.unbind('click'); //解除click 
        $(".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(){//中獎結(jié)果動畫 
                    if(res.msg==1){//返回結(jié)果 
                        $("#result").html("恭喜，您中得"+res.prize+"!"); 
                    }else{ 
                        $("#result").html("很遺憾,您沒能中獎!"); 
                    } 
                });     
            } 
        ); 
    }); 
}

In order to integrate the golden egg-breaking program into your website more realistically, you can Measures such as verifying membership status before making an egg, limiting the number of times you smash an egg, leaving your contact information after winning a prize, etc. It all depends on the needs of the website.

PHP

data.php processes the ajax request sent by the front end. We use the probability algorithm to output the winning results in json format according to the set winning probability. <br/><br/>

$prize_arr = array( 
    '0' => array('id'=>1,'prize'=>'平板電腦','v'=>3), 
    '1' => array('id'=>2,'prize'=>'數(shù)碼相機','v'=>5), 
    '2' => array('id'=>3,'prize'=>'音箱設(shè)備','v'=>10), 
    '3' => array('id'=>4,'prize'=>'4G優(yōu)盤','v'=>12), 
    '4' => array('id'=>5,'prize'=>'Q幣10元','v'=>20), 
    '5' => array('id'=>6,'prize'=>'下次沒準(zhǔn)就能中哦','v'=>50), ); 
 
foreach ($prize_arr as $key => $val) { 
    $arr[$val['id']] = $val['v']; 
} 
 
$rid = getRand($arr); //根據(jù)概率獲取獎項id $res['msg'] = ($rid==6)?0:1; //如果為0則沒中 $res['prize'] = $prize_arr[$rid-1]['prize']; //中獎項 echo json_encode($res); 
 
//計算概率 function getRand($proArr) { 
    $result = ''; 
 
    //概率數(shù)組的總概率精度 
    $proSum = array_sum($proArr); 
 
    //概率數(shù)組循環(huán) 
    foreach ($proArr as $key => $proCur) { 
        $randNum = mt_rand(1, $proSum); 
        if ($randNum <= $proCur) { 
            $result = $key; 
            break; 
        } else { 
            $proSum -= $proCur; 
        } 
    } 
    unset ($proArr); 
 
    return $result; 
}

By setting the probability, we can see that the chance of hitting the tablet is 3%. The chance of missing is 50%.

For more articles related to WeChat public platform development and smashing golden eggs, please pay attention to the PHP Chinese website!