Le développement de la plateforme publique WeChat atteint des œufs d'or

Briser les œufs d'or est largement utilisé dans les célébrations, les promotions commerciales, les divertissements télévisés et d'autres occasions. Son plaisir et son suspense peuvent rapidement activer l'atmosphère de la scène. De même, nous pouvons également appliquer Golden Egg Smashing aux sites Web WEB pour réaliser des activités en ligne. Cet article utilisera jQuery et PHP pour expliquer comment implémenter un programme WEB de destruction d'œufs d'or.

Préparation

Nous devons préparer des accessoires (matériaux), c'est-à-dire des images associées, y compris des images d'œufs d'or, des images d'œufs écrasés, des images de fleurs écrasées et des images de marteaux.

HTML

Ce que nous voulons montrer sur notre page est une plateforme de cassage d'œufs d'or. Il y a trois œufs d'or numérotés 1, 2 et 3 sur la plateforme, ainsi qu'un marteau. Nous construisons le code html suivant :

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

Dans le code ci-dessus, .hammer place le marteau, et .resultTip est utilisé pour afficher le résultat après avoir fracassé l'œuf, c'est-à-dire s'il y a Gagner le prix, placez 3 œufs d'or dans chacun des trois li. Nous utilisons CSS pour décorer l'effet.

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

En suivant le code ci-dessus, nous pouvons voir une scène complète de cassage d'œufs d'or sur la page. Notez que nous utilisons If. vous avez installé des images png, si vos clients utilisent toujours IE6, vous devrez peut-être traiter la transparence des images png, ce que cet article ne fera pas.

jQuery

Ensuite, nous utiliserons le code jQuery pour mettre en œuvre l'ensemble du processus consistant à briser des œufs d'or, à casser des œufs et à afficher les résultats gagnants. Bien entendu, l’ancienne règle est que pour par exemple les programmes implémentés avec jQuery, vous devez d’abord charger le fichier de la bibliothèque jQuery.

Tout d'abord, lorsque la souris glisse vers l'œuf d'or, le marteau utilisé pour briser l'œuf d'or ne sera que sur le côté supérieur droit de l'œuf d'or, et vous pouvez utiliser position() pour le positionner. .

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

Ensuite, cliquez sur l'œuf d'or, qui consiste à balancer le marteau pour frapper l'œuf d'or. Nous masquons d'abord les chiffres dans les œufs d'or en cliquant, puis appelons la fonction personnalisée eggClick().

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

Enfin, dans la fonction personnalisée eggClick(), nous utilisons la méthode $.getJSON de jQuery pour envoyer une requête ajax au data.php d'arrière-plan, Le programme php en arrière-plan gérera la distribution des prix et renverra les résultats gagnants. Nous utilisons animate() pour réaliser l'animation de l'écrasement du marteau et obtenir un effet d'animation simple en modifiant les positions supérieure et gauche du marteau. Après que le marteau ait frappé, le style de l'œuf d'or change en .curr, tandis que les fleurs dorées éclaboussent. puis le résultat gagnant. resultTip montre que si vous gagnez ou non, cela dépend de votre chance et de la probabilité de gagner fixée par les récompenses d'arrière-plan. Regardons le code de la fonction de casse-œufs d'or 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("很遗憾,您没能中奖!"); 
                    } 
                });     
            } 
        ); 
    }); 
}

Afin d'intégrer le programme de casse-œufs d'or dans votre site Web plus en réalité, vous pouvez Des mesures telles que vérifier le statut de membre avant de casser des œufs, limiter le nombre d'œufs brisés, laisser des informations de contact après avoir brisé des œufs et gagné des prix, etc. dépendront des besoins du site Web.

PHP

data.php traite la requête ajax envoyée par le front-end Nous utilisons l'algorithme de probabilité pour afficher les résultats gagnants au format json en fonction de la probabilité de gain définie. <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; 
}

En définissant la probabilité, nous pouvons voir que le hit Les chances de toucher la tablette sont de 3 % et les chances de la manquer sont de 50 %.

Pour plus d'articles liés au développement de la plateforme publique WeChat et à la destruction des œufs d'or, veuillez faire attention au site Web PHP chinois !