JavaScript小游戲--翻牌記憶游戲

翻牌記憶游戲源碼

1.有8張圖片，每張圖片要放兩次，生成如下數組，長為16，[0,1,2,3,4,5,6,7,0,1,2,3,4,5,6,7] 其中兩兩相同的代表兩張相同的圖片，0對應文件夾image下的0.jpg，其余類似。

var randArr = [];
            for(var j = 0; j < 2;j++){
                for (var i = 0; i < m; i++) {
                    randArr.push(i);
                }
            }

2.將上面的數組傳入random（），將數組內容打亂，即將圖片打亂（隨機交換位置）。

function random(data){
            //隨機打亂數組
               for(var i = data.length-1; i >=0; i--){
                var randomIndex = Math.floor(Math.random()*(i+1)); 
                var itemAtIndex = data[randomIndex]; 
                data[randomIndex] = data[i]; 
                data[i] = itemAtIndex;
            }
        } 

16個位置，概率問題，第一個位置，16選1，第二個位置15選1...最后一個1選1.所以i值要由大變小

3.為了將圖片在屏幕上顯示，應創建一個二維數組，然后將打亂后的圖片數組傳入。

注意：JS是不允許多維數組的，所謂的二維數組是數組嵌套。如var test = [["0","0"],["1","1"],["2","2"]]，對於理解程序中的map（）嵌套比較重要。

function arrs(n,data){
            //生成坐標“二維”數組
            var arr = [];
            for (var i = 0; i < n; i++){
                arr[i] = [];
                for(var j = 0; j < n; j++){
                    arr[i].push(j);
                }
            }
            //把打亂的數組放入“二維”數組里
            var i = 0;
            var res = arr.map(function(ba){         
              return ba.map(function(bb){             
                   i++
                   return data[i-1]         
               });
            });
            img(res)
        }

3.1 對其中map（）遍歷的說明

其有返回值，可以return 

arr[].map(function(value,index,array){

　　//do something

　　return XXX

})

參數：value數組中的當前項，必須；index當前項的索引,array原始數組，后兩個可選；

map的回調函數中支持return返回值，return的是XXX，相當於把數組中的這一項變為XXX（並不影響原來的數組，只是相當於把原數組克隆一份，把克隆的這一份的數組中的對應項改變了）

var ary = [12,23,24,42,1];  
var res = ary.map(function (item,index,input) {  
    return item*10;  
})  
console.log(res);//-->[120,230,240,420,10];  原數組拷貝了一份，並進行了修改
console.log(ary);//-->[12,23,24,42,1]；  原數組並未發生變化

3.2  map（）的在該游戲中的應用

var res = arr.map(function(ba){         
              return ba.map(function(bb){             
                   i++;
                   return data[i-1];
               });
            });

arr（）是“二維”數組，這就是map（）嵌套的原因，若為4X4的數組[[xx,xx,xx,xx],[xx,xx,xx,xx],[xx,xx,xx,xx],[xx,xx,xx,xx]]黃色陰影部分執行第二個map（），返回后產生一個新的數組[YY,YY,YY,YY],依次執行，4個嵌套的數組執行完后，又產生一個新的數組[[YY,YY,YY,YY],[YY,YY,YY,YY],[YY,YY,YY,YY],[YY,YY,YY,YY]]，賦給res。

至此，每張圖片都有了自己的坐標。

4.將圖片顯示

function img(resdata){
            //根據坐標顯示圖片
            var newImg = [];
            for(var i = 0; i < resdata.length; i++){
                for(var j = 0; j < resdata[i].length;j++){
                     newImg.push(  resdata[i][j]);
                }
            }
            for (var i = 0; i < newImg.length; i++) {
                var str = "<li value="+newImg[i]+">"+ i +"</li>";
                $("#grid").append(str);
                $('li:eq('+ i +')').html("<div class='pai'><div class='back' ><img src='./image/" + newImg[i] + ".jpg' width='100%'></div><div class='front'><img src='./image/all.jpg' width='100%'></div></div>");
            };
        }

理解了數組嵌套，resdata.length才不會理解出錯。

:eq() 選擇器選取帶有指定 index 值的元素。

給pai（牌）的背面和正面加上圖片，數組中的0,1,2,3,4,5,6,7對應文件夾下的0.jpg，1.jpg等.

最開始的randArr[](代表文件夾下圖片的數組) -> data[]（隨機打亂后的數組）-> res[給每個圖片一個坐標]-> newImg[]（顯示圖片）

 把“二維”數組變為一維數組newImg[]，所以newImg.length為16.而newImg[i]是0-7中的一個。

5、添加點擊事件

需要幾個變量：

index獲得正點擊的圖片的索引（.index（）方法），beforeIndex = index;       beforeIndex代表之前點過的圖片的索引。

backIndex獲得正點擊的圖片的值（.attr（）方法），如0,1,2...   before = backIndex;     before代表之前點過的圖片的值。

5.1    before === null && beforeIndex === null說明之前沒有點過圖片

顯示點擊的圖片，把當前點的圖片的索引和圖片值，存儲到before，beforeIndex中，以便與之后的點擊進行對比（確定是否連續點擊了兩張相同的圖片）。

5.2   之前已經點擊過圖片了before，beforeIndex中有值，不為空

又點擊了一張圖片，顯示這張圖片

5.2.1   index == beforeIndex   連續點擊的圖片對應同一個索引，說明兩次點擊了同一個坐標位置，不做任何反應，return false；

5.2.2   前后兩次點的不是同一個位置，但連續點擊的圖片值相同（before == backIndex），說明點擊的兩張圖片內容相同，都是0.jpg或者...

則把這兩張圖片都顯示一定的時間（setTimeout）后將整個牌（包括正面和反面）一起隱藏[隱藏后背景變白]（.hide()方法），count++直到湊夠8次。

before = null;  beforeIndex = null;  成功找到兩張相同的圖片后，將這兩個變量清空，重新尋找其它相同圖片；

5.2.3  前后兩次點的不是同一個位置，圖片的內容也不相同，則將兩張圖片顯示，再置於底層[不同於隱藏]（.css("z-index","-1")），最后顯示的是位於上層的圖片；

        function dian(){
                var  count = 0;
                var before = null;
                var beforeIndex = null;
                $('body').on('click','li',function(){ //規定只能添加到li子元素上的事件
                    var index = $(this).index();  //相對於同胞元素的索引。對應的是哪個li

                    var backIndex = $(this).attr("value");    //value存的是圖片，圖片是隨機的，用於后面判斷是否連續點擊了位置不同的兩張相同的圖片。
                    if(before === null && beforeIndex === null){  //before代表前面點得那一個，都為空，說明之前沒點過
                        before = backIndex;  //開始點得是第一個
                        beforeIndex = index;
                        $('li:eq('+ index +') .back').css('z-index','2')  //把那個li上的圖片顯示
                    }else{//否則，之前已經點過圖片了
                        $('li:eq('+ index +') .back').css('z-index','2')//把點得那張顯示
                        if(index == beforeIndex){ //如果點還是之前那個li是之前點過的，返回false
                            return false;
                        }
                        if(before == backIndex){  //
                            $('li:eq('+ beforeIndex +') .back').css('z-index','2')
                            setTimeout("$('li:eq("+ index +") .back').css('z-index','2')",1000)
                            $('li:eq('+ beforeIndex +') .pai').hide() 
                            $('li:eq('+ index +') .pai').hide()   //前后點的不是同一張，但圖片[即value值]一樣，則隱藏，會變白
                            count++
                            before = null;    //置空，確定其它圖片是否連續點的兩張都一樣。
                            beforeIndex = null;
                        }else{//兩次點的圖片不是同一張，value值也不同，則之前點的和現在點的都放在后面
                            
                            $('li:eq('+ index+') .back').css('z-index','2');
                             setTimeout('$("li:eq('+ beforeIndex +') .back").css("z-index","-1"); $("li:eq('+ index+') .back").css("z-index","-1")',500);//把圖片置於后面，前面的顯示
                            before = null;
                            beforeIndex = null;
                        }
                         
                    }
                    if(count == 8){
                        alert('success!');
                    }
                });
        }

        // 刷新頁面
        function refresh(){
            window.location.reload();
        }

reload 方法，該方法強迫瀏覽器刷新當前頁面。
語法：location.reload([bForceGet])參數： bForceGet， 可選參數， 默認為 false，從客戶端緩存里取當前頁。 true, 則以GET 方式，從服務端取最新的頁面, 相當於客戶端點擊 F5("刷新")