JavaScript小游戏--翻牌记忆游戏

Posted 乘客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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中的一个。

reload 方法,该方法强迫浏览器刷新当前页面。
语法:location.reload([bForceGet])参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。 true, 则以GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新")

 



以上是关于JavaScript小游戏--翻牌记忆游戏的主要内容,如果未能解决你的问题,请参考以下文章

Python游戏开发,pygame模块,Python实现记忆翻牌小游戏

Javascript/JQuery 翻牌游戏

js之翻牌游戏中的一个深刻感悟

Web前端---HTML+CSS+JS实现记忆纸牌游戏

挑战记忆力-Web前端实现记忆纸牌游戏(JS+CSS)

挑战记忆力-Web前端实现记忆纸牌游戏(JS+CSS)