Die Entwicklung der öffentlichen WeChat-Plattform stößt auf goldene Eier

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(){//中奖结果动画 
                    if(res.msg==1){//返回结果 
                        $("#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'=>'数码相机','v'=>5), 
    '2' => array('id'=>3,'prize'=>'音箱设备','v'=>10), 
    '3' => array('id'=>4,'prize'=>'4G优盘','v'=>12), 
    '4' => array('id'=>5,'prize'=>'Q币10元','v'=>20), 
    '5' => array('id'=>6,'prize'=>'下次没准就能中哦','v'=>50), ); 
 
foreach ($prize_arr as $key => $val) { 
    $arr[$val['id']] = $val['v']; 
} 
 
$rid = getRand($arr); //根据概率获取奖项id $res['msg'] = ($rid==6)?0:1; //如果为0则没中 $res['prize'] = $prize_arr[$rid-1]['prize']; //中奖项 echo json_encode($res); 
 
//计算概率 function getRand($proArr) { 
    $result = ''; 
 
    //概率数组的总概率精度 
    $proSum = array_sum($proArr); 
 
    //概率数组循环 
    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!