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("刷新")