Effet d'animation du jeu de lancer de dés implémenté à l'aide de jQuery

Principe d'implémentation : une fois le dé lancé, le déplacement du dé est modifié via la fonction animate() de jQuery, un effet de retard est ajouté au milieu et l'arrière-plan du dé est modifié. Enfin, l'animation s'arrête lorsque. il atteint un point généré aléatoirement et s'affiche. Le nombre de points obtenus. En fait, le processus d'animation consiste à ajouter plusieurs images d'images différentes (les mêmes que les images des vidéos d'animation Flash). Plus il y a d'images, meilleur est l'effet. Ensuite, l'effet d'animation est formé après l'exécution image par image.
1. Préparation
Nous devons préparer le matériel de dés. Dans cet exemple, j'utilise le matériel de dés obtenu sur Internet. Ce que nous devons faire est de traiter 6 images de dés (1. -6 points), et les images avec des effets de transition intermédiaires (traitement du flou de mouvement) sont placées sur la même image, enregistrées sous dice.png et utilisées comme images d'arrière-plan de dés.
Chargez la bibliothèque jQuery, c'est nécessaire.

Copier le code Le code est le suivant :

Ajoutez ensuite le code suivant au corps de la page HTML, où #dice est utilisé pour placer les dés et #result est utilisé pour afficher l'invite information.

Copier le code Le code est le suivant :

Veuillez cliquer directement sur le dé ci-dessus !

2. Code CSS
Nous utilisons l'arrière-plan pour charger l'image dice.png dans .dice. Ensuite, nous avons utilisé plusieurs styles pour positionner différentes figures de sous-points de couleur et des images d'effets de transition via différentes valeurs de position d'arrière-plan. J'ai effectué un simple processus de flou sur l'image avec effet de transition. Vous pouvez également utiliser CSS3 pour traiter l'effet de flou de l'image. Notez que #dice_mask est utilisé pour empêcher les clics répétés, ce qui sera mentionné plus tard.

Copier le code Le code est le suivant :

.wrap{width:90px height:90px; :120px auto 30px auto; position:relative} 
.dice{width:90px; height:90px; background:url(dice.png) no-repeat;} 
.dice_1{background-position:-5px - 4px} 
.dice_2{background-position:-5px -107px} 
.dice_3{background-position:-5px -212px} 
.dice_4{background-position:-5px -317px} 
 .dice_5{ background-position:-5px -427px} 
.dice_6{background-position:-5px -535px} 
.dice_t{background-position:-5px -651px} 
.dice_s{background- position:- 5px -763px} 
.dice_e{background-position:-5px -876px} 
p#result{text-align:center; font-size:16px} 
p#result span{font -poids : gras ; couleur :#f30 ; marge :6px} 
#dice_mask{width :90px ; arrière-plan :#fff ; position :absolue ; 0; z -index:999} 

3. Code jQuery
Lorsque vous cliquez sur les dés, prédéfinissez d'abord le style des dés (effacez le style après la dernière animation), changez la couleur Utilisez un #dice_mask transparent pour couvrir les dés afin d'éviter les clics répétés et générez un nombre aléatoire de 1 à 6. Utilisez ensuite la fonction animate() pour modifier le déplacement des dés et changer la classe des dés pour créer un Une image d'arrière-plan flou de transition apparaît, suivie d'un léger retard. delay(), puis entrez dans l'animation d'image suivante. À la fin de l'animation, le style de classe du dé est positionné sur dice_x. Continuez à cliquer pour lancer le dé.

Copier le code Le code est le suivant :

$(function(){ 
    var dice = $("#dice"); 
    dice.click(function(){ 
        dice.attr("class","dice"); //清除上次动画后的点数 
        dice.css("cursor","default");        $(".wrap").append("< ;/div>");//加遮罩 
        var num = Math.floor(Math.random()*6 1);//产生随机数1-6 
        dice.animate({left: ' 2px'}, 100,function(){ 
            dice.addClass("dice_t"); 
        }).delay(200).animate({top:'-2px'},100,function() { 
            dice.removeClass("dice_t").addClass("dice_s");        }).delay(200).animate({opacity: 'show'},600,function(){ 
 dice.removeClass("dice_s").addClass("dice_e"); 
        }).delay(100).animate({left:'-2px',top:'2px'},100,function(){ 
            dice.removeClass("dice_e").addClass("dice_" num);            $("#result").html("您掷得点数是" num "            dice.css('cursor','pointer'); 
            $("#dice_mask").remove();//移除遮罩 
        }); 
 }); 
});

关于防止重复点击的办法很多，jQuery提供了one()，live()，bind()，on()等等这些函数在该实例中都行不通，所以我想了个办法，当点击色子后开始动画时，用一个和色子大小一样的透明遮罩层将色子遮住，使得在动画运行中不可连续重复点击色子，当这样色子就可以重新被点击了。
以上掷色子的动画效果就是模拟了flash的帧动画，通过时间轴来播放逐帧运行， Le système jQuery est doté de flash et il est doté d'un flash. Il s'agit d'un système d'exploitation de fichiers jQuery、HTML、CSS、PHP、MySQL的综合性技术文章及实例代码，讲解掷色子抽奖游戏，可以控制掷出色子点数的概率，也是一个趣味游戏。

Étiquettes associées：

jquery

source：php.cn

Article précédent：Méthode pour encapsuler les classes et plug-ins jQuery dans les modules Seajs_Seajs Article suivant：Comment obtenir le type et la version du navigateur avec javascript (obtenir la version du navigateur avec js)_Connaissances de base

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur