游戏截图

游戏逻辑

游戏规则：在被分成16个方格的小方块下面有被随机打乱分配的8对图片，使用鼠标点击方格将图片翻转，若连续两次翻转的图片相同，则该组图片翻转成功，若连续两次翻转的图片不一样，则两张图片会在0.3秒后自动翻转回方格，当8对图片全部被翻转成功则游戏胜利。
主要逻辑：

定义一个数组，将其用Array.sort()方法进行乱序处理
根据得到的乱序数组将图片进行洗牌，分配到不同的方块下隐藏
根据以上得到的图片排列逻辑，将图片元素渲染进页面
监听鼠标点击事件，并通过事件委托判断鼠标点击的单位是否为已经反转过得单位
根据两张连续被翻转牌的id判断是否相同，从而判断是否反转成功，若id相同则成功，若id不相同则不成功
当被成功反转牌的个数等于方块的总个数时，游戏成功

自定义更改：想要更改游戏规格时，可以在对象初始化时将level参数调大，我准备的最大规格为level=3，想要更大规格同时也要准备同样多的图片，否则游戏中会出现多组相同的图片

代码详解

html页面结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原生JS翻牌小游戏复刻1</title><link rel="stylesheet" href="style.css">
</head>
<body><div id="game"></div><script src="index.js"></script>
</body>
</html>

css外部样式

* {margin: 0;padding: 0;
}#game {width: 600px;height: 600px;margin: 60px auto;
}.block {float: left;box-sizing: border-box;width: 25%;height: 25%;border: 2px solid #ddd;background-color: #f0f0f0;
}.block:hover {background-color: #2b84d0;
}.pic {width: 100%;height: 100%;background-repeat: no-repeat;background-position: center center;transform: scaleX(0);transition: transform .2s;
}.block.on .pic {transform: scaleX(1);
}

javascript页面行为

var game = {el: '',//父元素level: 0,//当前游戏级别blocks: 0,//“牌”的总数gameWidth: 600,//游戏区域宽度，单位pxgameHeight: 600,//游戏区域的高度，单位pxdataArr: [],//数据数组，存放牌的信息judgeArr: [],//判断数组，存放被翻转牌的信息turnNum: 0,//翻转牌的总数picNum: 20,//牌的总数maxLevel: 3,//最高游戏级别init: function(options) {this.initData(options);this.render();this.handle();},initData: function(options) {this.options = options;this.el = options.el;this.level = options.level > this.maxLevel ? this.maxLevel : options.level;this.blocks = (this.level * 2) * (this.level * 2);this.getdataArr();},getdataArr: function() {/*** 获取数据数组*///1,利用Array.sort乱序var randomArr = this.randomArr();//得到随机数组var halfBlocks = this.blocks / 2;//得到排数的一半var dataArr = [];for(var i = 0; i < halfBlocks; i ++) {var num = randomArr[i];var info = {url: './images/' + num + '.png',id: num}dataArr.push(info,info);}this.dataArr = this.shuffle(dataArr);},randomArr: function() {/*** 回去数字数组* 数组中的每一项为0到count数字*/var picNum = this.picNum;var arr = [];for(var i = 0; i < picNum; i ++) {arr.push(i + 1);}return this.shuffle(arr);},shuffle: function(arr) {/*** 洗牌，数组乱序方法*///1,利用Array.sort方法进行数组乱序return arr.sort(function() {return 0.5 - Math.random();})},render: function() {/*** 渲染元素*///var template = '';var blocks = this.blocks;var gameWidth = this.gameWidth;var gameHeight = this.gameHeight;var level = this.level;var blockWidth = gameWidth / (level * 2);var blockHeight = gameHeight / (level * 2);var dataArr = this.dataArr;for(var i = 0; i < blocks; i ++) {var info = dataArr[i];var oBlock = document.createElement('div');var oPic = document.createElement('div');oPic.style.backgroundImage = 'url(' + info.url + ')';oBlock.style.width = blockWidth + 'px';oBlock.style.height = blockHeight + 'px';oBlock.picid = info.id;oPic.setAttribute('class','pic');oBlock.setAttribute('class','block');oBlock.appendChild(oPic);this.el.appendChild(oBlock);}},handle: function() {/*** 监听父元素的点击事件* 通过事件委托判断点击的元素是否为未翻转的牌*/var self = this;this.el.onclick = function(e) {var dom = e.target;var isBlock = dom.classList.contains('block');if(isBlock) {self.handleBlock(dom);}}},handleBlock: function(dom) {/*** 点击未翻转成功的牌时* 如果点击了两张牌，咋判断是否为同一张牌*/var picId = dom.picid;var judgeArr = this.judgeArr;var judgeLength = judgeArr.push({id: picId,dom: dom});dom.classList.add('on');if(judgeLength === 2) {this.judgePic();}this.judgeWin();},judgePic: function() {/*** 判断被翻转牌的图片是否相同* 若两个元素的id相同，则翻转成功* 若不同，则不成功，将牌再次翻转*/var judgeArr = this.judgeArr;var isSamePic = judgeArr[0].id === judgeArr[1].id;if(isSamePic) {this.turnNum += 2;} else {var picDom1 = judgeArr[0].dom;var picDom2 = judgeArr[1].dom;setTimeout(function() {picDom1.classList.remove('on');picDom2.classList.remove('on');},800)}judgeArr.length = 0;},judgeWin: function() {/*** 判断游戏是否胜利* 如果翻转成功牌的个数等于牌的总个数，则胜利*/if(this.turnNum === this.blocks) {setTimeout(function() {alert('胜利');},300)}}
}game.init({el: document.getElementById('game'),level: 2
})

原生JS记忆翻牌小游戏相关推荐

【unity3D】unity记忆翻牌小游戏教程（简单详细）
游戏开发的学习记录⑨ 项目:记忆翻牌小游戏 unity版本:unity2020.3.30f1c1 目录项目:记忆翻牌小游戏 unity版本:unity2020.3.30f1c1 一.游戏内容说明二 ...
如何用html5制作抽奖游戏,原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: 开始点名停止幸运的的你 2.css样式设置页面代码如下: css代码不仅仅 ...
原生js 实现2048小游戏
2048小游戏首先2048小游戏离不开16个格子,我们通过html和css创建好对应的标签和样式, 然后开始js逻辑 <div id="box">//一个盒子里面16 ...
原生js做h5小游戏之打砖块
前言首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...
原生JS实现2048小游戏
前几天玩了一款2048微信小程序,结果脑子一抽,想到了为什么不能自己用JS写一个于是,下面这个玩意儿就诞生了... 实现思路大概是这样的,首先使用table表格完成页面布局,其次使用JS实现数字动态 ...
原生js完成拼图小游戏
废话不说,看代码,图片可以自己找,我这直接引用了百度的了 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/x ...
python小游戏记忆翻牌小游戏设计与实现
文章目录 0 项目简介 1 游戏介绍 2 实现效果 3 开发工具 3.1 环境配置 3.2 Pygame介绍 4 具体实现居中显示 5 最后 0 项目简介
原生JS制作抽奖小游戏
<div class="box"><div id="grid1" class="grid">电信优惠卷</di ...
python小游戏毕设记忆翻牌小游戏设计与实现 (源码)
文章目录 0 项目简介 1 游戏介绍 2 实现效果 3 开发工具 3.1 环境配置 3.2 Pygame介绍 4 具体实现居中显示 5 最后 0 项目简介
html5猜数字游戏代码,js猜数字小游戏的简单实现代码
复制代码代码如下: 简易计算机 //获取随机数 function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.ran ...

原生JS记忆翻牌小游戏