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