Das Zerschlagen goldener Eier wird h?ufig bei Feiern, Werbeaktionen, Fernsehunterhaltung und anderen Anl?ssen eingesetzt. Sein Spa? und seine Spannung k?nnen die Atmosph?re der Szene schnell aktivieren. Ebenso k?nnen wir Golden Egg Smashing auch auf WEB-Websites anwenden, um Online-Aktivit?ten durchzuführen. In diesem Artikel wird mithilfe von jQuery und PHP erl?utert, wie ein WEB-Programm zum Zerschlagen von goldenen Eiern implementiert wird.

Vorbereitung

Wir müssen Requisiten (Materialien) vorbereiten, also zugeh?rige Bilder, einschlie?lich Bilder von goldenen Eiern, Bilder von zerschlagenen Eiern, Bilder von zerschlagenen Blumen und Bilder von H?mmern.

HTML

Was wir auf unserer Seite zeigen m?chten, ist eine goldene Eier-Brechplattform. Auf der Plattform befinden sich drei goldene Eier mit den Nummern 1, 2 und 3 sowie ein Hammer. Wir erstellen den folgenden 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>

Im obigen Code platziert .hammer den Hammer und .resultTip wird verwendet, um das Ergebnis nach dem Zerschlagen anzuzeigen Das Ei, das hei?t, ob es einen Preis gibt, platziere 3 goldene Eier in jedem der drei Li's. Wir verwenden CSS, um den Effekt zu dekorieren.

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

Gem?? dem obigen Code k?nnen wir auf der von uns verwendeten Seite eine vollst?ndige Szene zum Brechen goldener Eier sehen Wenn Ihre Kunden noch IE6 verwenden, müssen Sie sich m?glicherweise mit der Transparenz des PNG-Bildes befassen, die in diesem Artikel nicht behandelt wird.

jQuery

Als n?chstes werden wir jQuery-Code verwenden, um den gesamten Prozess des Zerschlagens goldener Eier, des Zerbrechens von Eiern und der Anzeige der Gewinnerergebnisse zu implementieren. Die alte Regel besagt natürlich, dass man zum Beispiel bei mit jQuery implementierten Programmen zuerst die jQuery-Bibliotheksdatei laden muss.

Wenn die Maus zum goldenen Ei gleitet, befindet sich der Hammer, der zum Zerschlagen des goldenen Eies verwendet wird, zun?chst nur auf der oberen rechten Seite des goldenen Eies und Sie k?nnen position() verwenden, um es zu positionieren .

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

Klicken Sie dann auf das goldene Ei. Dabei wird der Hammer geschwungen, um das goldene Ei zu treffen. Wir verstecken zun?chst die Zahl im goldenen Ei in Click und rufen dann die benutzerdefinierte Funktion eggClick() auf.

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

Schlie?lich verwenden wir in der benutzerdefinierten Funktion eggClick() die $.getJSON-Methode von jQuery, um eine Ajax-Anfrage an den Hintergrund data.php zu senden. Das PHP-Hintergrundprogramm übernimmt die Preisverteilung und gibt die Gewinnergebnisse zurück. Wir verwenden animate(), um die Animation des Hammerschlags zu realisieren und einen einfachen Animationseffekt zu erzielen, indem wir die obere und linke Position des Hammers ?ndern. Nach dem Hammerschlag ?ndert sich der goldene Eierstil in .curr, w?hrend goldene Blumen spritzen. und dann zeigt das Gewinnergebnis resultTip, dass es von Ihrem Glück und der durch die Hintergrundauszeichnungen festgelegten Gewinnwahrscheinlichkeit abh?ngt, ob Sie gewinnen oder nicht. Schauen wir uns den Code der Golden-Egg-Breaking-Funktion 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("很遺憾,您沒能中獎!"); 
                    } 
                });     
            } 
        ); 
    }); 
}

an, um das Golden-Egg-Breaking-Programm besser in Ihre Website zu integrieren Realistisch gesehen k?nnen Ma?nahmen wie die überprüfung des Mitgliedsstatus vor dem Zerschlagen von Eiern, die Begrenzung der Anzahl der zerschlagenen Eier, das Hinterlassen von Kontaktinformationen nach dem Gewinn eines Preises durch das Zerschlagen von Eiern usw. von den Anforderungen der Website abh?ngen.

PHP

data.php verarbeitet die vom Frontend gesendete Ajax-Anfrage. Wir verwenden den Wahrscheinlichkeitsalgorithmus, um die Gewinnergebnisse im JSON-Format entsprechend der festgelegten Gewinnwahrscheinlichkeit auszugeben. <code class="php"> <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; 
}

Durch Festlegen der Wahrscheinlichkeit k?nnen wir erkennen, dass der Treffer vorliegt Die Wahrscheinlichkeit, das Tablet zu treffen, liegt bei 3 %, die Wahrscheinlichkeit, es zu verfehlen, bei 50 %.

Weitere Artikel zur Entwicklung der ?ffentlichen WeChat-Plattform und zum Zerschlagen goldener Eier finden Sie auf der chinesischen PHP-Website!