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

標籤：支援   機率   value   cat   tps   var   javascrip   自己的   遍曆   

翻牌記憶遊戲源碼

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中的一個。

reload 方法，該方法強迫瀏覽器重新整理當前頁面。
文法：location.reload([bForceGet])參數： bForceGet， 選擇性參數， 預設為 false，從用戶端緩衝裡取當前頁。 true, 則以GET 方式，從服務端取最新的頁面, 相當於用戶端點擊 F5("重新整理")

 

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