快捷導(dǎo)航

使用jQuery實(shí)現(xiàn)的擲色子游戲動(dòng)畫效果

更新時(shí)間：2014年03月14日 16:56:00 作者：

大家一定都玩過擲色子的游戲，今天我給大家分享的是如何使用jQuery來實(shí)現(xiàn)擲色子的動(dòng)畫效果，通過jQuery的animate()自定義動(dòng)畫函數(shù)并結(jié)合CSS背景圖片切換實(shí)現(xiàn)的動(dòng)畫效果

實(shí)現(xiàn)原理：當(dāng)色子擲出后，通過jQuery的animate()函數(shù)改變色子位移，中間加入延時(shí)效果，并變換色子背景，最終動(dòng)畫運(yùn)行到隨機(jī)產(chǎn)生的點(diǎn)數(shù)時(shí)停止，并顯示擲出的點(diǎn)數(shù)。其實(shí)就是動(dòng)畫過程加入多個(gè)不同圖片的幀（同flash動(dòng)畫影片中的幀），幀數(shù)越多效果越好，然后逐幀運(yùn)行后就形成了動(dòng)畫效果。
一、準(zhǔn)備工作
我們需要準(zhǔn)備色子素材，本示例中，我采用從網(wǎng)絡(luò)上獲取到的色子素材，我們要做處理的是將6個(gè)色子圖片（1-6點(diǎn)），以及中間過渡效果的圖片（做運(yùn)動(dòng)模糊處理）放在同一張圖片上，保存為dice.png，用作色子背景圖。
載入jQuery庫(kù)，這是必須的。

復(fù)制代碼代碼如下:

然后在HTML頁面的body中加入以下代碼，其中#dice是用來放置色子的，#result是用來顯示提示信息的。

復(fù)制代碼代碼如下:

<div id="dice" class="dice dice_1"></div> 
<p id="result">請(qǐng)直接點(diǎn)擊上面的色子！</p>

二、CSS代碼
我們使用background將圖片dice.png載入到.dice中。然后我們分別用了幾種樣式通過不同的background-position值來定位不同的色子點(diǎn)數(shù)圖和過渡效果圖。其中的過渡效果圖片我做了簡(jiǎn)單的模糊處理，大家也可以使用css3來處理圖片的模糊效果。注意#dice_mask是用來做防重復(fù)點(diǎn)擊的，后面會(huì)提到。

復(fù)制代碼代碼如下:

.wrap{width:90px; height:90px; margin: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-weight:bold; color:#f30; margin:6px} 
#dice_mask{width:90px; height:90px; background:#fff; opacity:0; position:absolute; 
 top:0; left:0; z-index:999} 

三、jQuery代碼
當(dāng)單擊色子時(shí)，先預(yù)置色子的樣式（清空上次動(dòng)畫后的樣式），將色子用透明的#dice_mask遮住防重復(fù)點(diǎn)擊，并產(chǎn)生一個(gè)1-6的隨機(jī)數(shù)，然后通過animate()函數(shù)，改變色子位移，改變色子的class使得出現(xiàn)過渡模糊背景圖片，接著稍作延遲delay()，再接著進(jìn)入下一個(gè)幀動(dòng)畫，最后動(dòng)畫結(jié)束時(shí)，色子的class樣式定位到dice_x上，x表示點(diǎn)數(shù)，也就是得到了擲出色子后的點(diǎn)數(shù)，移除遮罩效果，又可以繼續(xù)點(diǎn)擊擲色子。

復(fù)制代碼代碼如下:

$(function(){ 
    var dice = $("#dice"); 
    dice.click(function(){ 
        dice.attr("class","dice");//清除上次動(dòng)畫后的點(diǎn)數(shù) 
        dice.css("cursor","default"); 
        $(".wrap").append("<div id='dice_mask'></div>");//加遮罩 
        var num = Math.floor(Math.random()*6+1);//產(chǎn)生隨機(jī)數(shù)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("您擲得點(diǎn)數(shù)是<span>"+num+"</span>"); 
            dice.css('cursor','pointer'); 
            $("#dice_mask").remove();//移除遮罩 
        }); 
    }); 
});

關(guān)于防止重復(fù)點(diǎn)擊的辦法很多，jQuery提供了one()，live()，bind()，on()等等這些函數(shù)在該實(shí)例中都行不通，所以我想了個(gè)辦法，當(dāng)點(diǎn)擊色子后開始動(dòng)畫時(shí)，用一個(gè)和色子大小一樣的透明遮罩層將色子遮住，使得在動(dòng)畫運(yùn)行中不可連續(xù)重復(fù)點(diǎn)擊色子，當(dāng)動(dòng)畫運(yùn)行完成后，再將遮罩層移除，這樣色子就可以重新被點(diǎn)擊了。
以上擲色子的動(dòng)畫效果就是模擬了flash的幀動(dòng)畫，通過時(shí)間軸來播放逐幀運(yùn)行，而運(yùn)用jQuery可以代替flash完成這樣的動(dòng)畫效果，雖然效果沒有flash的炫。本文的擲色子動(dòng)畫效果是為下期文章做鋪墊，下期文章我將給大家介紹結(jié)合jQuery、HTML、CSS、PHP、MySQL的綜合性技術(shù)文章及實(shí)例代碼，講解擲色子抽獎(jiǎng)游戲，可以控制擲出色子點(diǎn)數(shù)的概率，也是一個(gè)趣味游戲。

您可能感興趣的文章: