翻牌记忆游戏源码

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();  //相对于同胞元素的索引。对应的是哪个livar 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是之前点过的,返回falsereturn 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("刷新")

转载于:https://www.cnblogs.com/yujihang/p/6649234.html

JavaScript小游戏--翻牌记忆游戏相关推荐

  1. javascript小游戏_javaScript小游戏——网页版别踩白块

    一 项目简介 主要知识点:JavaScript.HTML.CSS 这是一个主要用JS实现的网页版小游戏,游戏规则很简单,通过点击不断下落的黑块来消灭它并获取分数,如果不幸黑块掉落下来或点到了白色区域那 ...

  2. 找不同颜色小游戏html源码,Javascript实现找不同色块的游戏

    游戏规则:在变化数量的颜色块里找出一个不同颜色的块点击 这里使用了JS中的构造函数来创建元素 找不同色块的游戏(构造函数) *{ margin: 0; padding: 0; } #box{ widt ...

  3. 一款使用JavaScript实现的篮球投篮游戏源代码,在浏览器里就能玩的篮球小游戏代码

    一款使用JavaScript实现的篮球投篮游戏源代码,在浏览器里就能玩的篮球小游戏代码 -根据光标的移动,沿某个方向击球 -球改变大小以使体验像3D一样 -音效让体验像真实生活! -球与轮辋碰撞并反弹 ...

  4. JavaScript网页小游戏:过河游戏

    JavaScript网页小游戏:过河游戏代码,好像是几个人都需要做船,但只能坐两人个人,应该采取什么办法让几个人都顺利过河呢?游戏玩法: 1.无论大人.小孩,每次最多只能承载两人. 2.只有爸爸.妈妈 ...

  5. html5 图片记忆游戏,30分钟完成JavaScript中的记忆游戏

    通过在30分钟内构建一个记忆游戏来学习JS,CSS和HTML! 本教程介绍了一些基本的关于HTML5,CSS3和JavaScript概念. 我们将讨论数据属性,定位,透视,转换,flexbox,事件处 ...

  6. 又是5个经典的Javascript小游戏

    又到了周末了,继续把收藏在自己博客中的Javascript小游戏拿出来和园子里的朋友们分享,希望工作之余能给大家带来点轻松的东西.不废话了,喜欢的朋友可以看看玩玩,讨厌这玩意的朋友就不用看了,免得浪费 ...

  7. JavaScript | 益智类数字棋牌小游戏,无游戏框架,浏览器直接运行JavaScript(js)小游戏【源码+解析】

    游戏界面 曾几何时想有一款自己编写的游戏,通过不断学习,终于掌握了一点JavaScript基础,捣鼓了一个益智类的数字棋牌游戏,没有使用任何游戏框架,就简单使用HTML做布局,CSS做动画,JavaS ...

  8. javascript小游戏代码_Cocos Creator下JavaScript实现相邻动物同化小游戏,附代码

    游戏玩法 游戏目标是将游戏区域的动物全部同化成同一种动物.游戏从左上角开始,从右边点击需要变成的目标动物头像,如果被同化动物周围包含了点击的动物,则所有被同化动物都变成点击选中的动物,完成一次同化,然 ...

  9. 红绿灯记忆游戏-第13届蓝桥杯Scratch选拔赛真题精选

    [导读]:超平老师计划推出Scratch蓝桥杯真题解析100讲,这是超平老师解读Scratch蓝桥真题系列的第77讲. 蓝桥杯选拔赛每一届都要举行4~5次,和省赛.国赛相比,题目要简单不少,再加上篇幅 ...

最新文章

  1. SQL内连接和左连接的区别 - 使用SQLite演示
  2. 《告别失控:软件开发团队管理必读》一一1.2 成功的程序设计经理为什么难当...
  3. JAVA网络编程Socket常见问题 【长连接专题】
  4. 改进初学者的PID-微分冲击
  5. 第19课 - 路径搜索的综合示例
  6. 码匠编程:零基础自学WEB前端,从第一份工作5K到现在13K,学习经验分享
  7. 厦门GDP超过万亿需要多少年时间?
  8. 红皮书--EOF与BOF
  9. android 日历_适用于Android的十大最佳日历应用
  10. iOS开发之结构体底层探索
  11. 简单排序---冒泡排序
  12. 中文搜索引擎技术揭密-网络蜘蛛
  13. python搭建bs架构_bs架构设计方案的.doc
  14. 计算机网络超级详细的总结(2)
  15. cocos2d-x开源游戏引擎,C++开发iphone/android/uphone/win32游戏
  16. 【图像压缩】基于余弦变换及霍夫曼编码实现jpeg压缩和解压附matlab代码
  17. Strick mode 和Trace View使用
  18. 苹果系统小技巧 篇六:Mac的10个必备小技巧,原来Windows的功能早在Mac上实现了
  19. java-计算球体积
  20. 微信小程序中好看的按钮样式(渐变色)、view的点击变色效果、按钮漂亮的圆角边框、解决hover设置失效

热门文章

  1. 【电磁场】矢量分析基础
  2. 五子棋棋谱16*16c语言,五子棋开局棋谱大全
  3. proxomx软件仓库无法使用解决
  4. 办公室实现无线网络全面覆盖的方案
  5. 中电信启动超大数据中心交换机招标
  6. 网易2017春招[编程题]赶去公司@Java
  7. dpdk mellanox网卡 多线程hang住的问题
  8. 代扣代收 VS 代付代发
  9. React AntV/G2Plot环形图Pie添加点击事件,即点击图环触发获取相关数据。
  10. 【制作ppt的软件】Focusky教程 | 视频全屏播放