使用jQuery實現的擲色子遊戲動畫效果_jquery

實現原理：當色子擲出後，透過jQuery的animate()函數改變色子位移，中間加入延時效果，並變換色子背景，最終動畫運行到隨機產生的點數時停止，並顯示擲出的點數。其實就是動畫過程加入多個不同圖片的幀（同flash動畫影片中的幀），幀數越多效果越好，然後逐幀運行後就形成了動畫效果。
一、準備工作
我們需要準備色子素材，本範例中，我採用從網路上取得到的色子素材，我們要做處理的是將6個色子圖片（1-6點），以及中間過渡效果的圖片（做運動模糊處理）放在同一張圖片上，保存為dice.png，用作色子背景圖。
載入jQuery函式庫，這是必須的。

複製程式碼 程式碼如下:

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

複製程式碼 程式碼如下:

請直接點選上面的色子！

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

複製程式碼 程式碼如下:

.wrap{width:90px; height:90px0 margin:90px; 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_6{background-position:-5px -535px}
.dice_t{background-position:-5px -651px}
.dice_s{background-000 5px -763px}
.dice_e{background-position:-5px -876px}
p#result{text-align:center; font-size:16px}
p#result span{font-weight:an{font-weight:an{font-weight:an{font-weight:an bold; color:#f30; margin:6px}
#dice_mask{width:90px; height:90px; background:#fff; opacity:0; position:absolute;
z top:0; left:0; -index:999}

三、jQuery程式碼
當一下色子時，先預置色子的樣式（清空上次動畫後的樣式），將色子用透明的#dice_mask遮住防重複點擊，並產生一個1-6的隨機數，然後通過animate()函數，改變色子位移，改變色子的class使得出現過渡模糊背景圖片，接著稍作延遲delay()，再接著進入下一個畫面動畫，最後動畫結束時，色子的class樣式定位到dice_x上，x表示點數，也就是得到了擲出色子後的點數，移除遮罩效果，又可以繼續點擊擲色子。

複製程式碼 程式碼如下:

$(function(){
    var dice = $("#dice");
    dice.click(function(){
     dice.click(function(){
     dice.click(function(){
    //清除上一次動畫後的點數
        dice.css("cursor","default");
        $(".wrap").append("");//加遮罩
        var num = Math.floor(Math.random()*6 1);//產生隨機數1-6
     '}, 100,function(){
            dice.addClass("dice_t");
        }).delay(200).mate({topp. 🎜>            dice.removeClass("dice_t").addClass("dice_s");
        }).delay(200).Y( removeClass("dice_s").addClass("dice_e");
        }).delay(100).animate({left:'-2px',top:'2px'},100,function({left:'-2px',top:'2px'},100,function({left:'-2px',top:'2px'},100,function({left){
            dice.removeClass("dice_e").addClass("dice_" num);
          
            dice.css('cursor','pointer');
           🎜> });
});

關於防止重複點擊的方法有很多，jQuery 提供了one()，live()，bind()，on()等等這些函數都在該實例中行不通，所以我想了個辦法，當點擊色子後開始動畫時，用一個和色子大小一樣的透明遮罩層將色子遮住，使得在動畫運行中不可連續重複點擊色子，當動畫運行完成後，再將遮罩層移除，這樣色子就可以重新被點擊了。

以上擲色子的動畫效果就是模擬了flash的幀動畫，透過時間軸來播放逐幀運行，而運用jQuery可以代替flash完成這樣的動畫效果，雖然效果沒有flash的炫耀。本文的擲色子動畫效果是為下期文章做鋪墊，下期文章我將結合jQuery、HTML、CSS、PHP、MySQL為大家介紹的綜合性技術文章及實例代碼，講解擲色子抽獎遊戲，可以控制擲色子的機率，也是一個左右遊戲。