游戏截图
游戏逻辑
游戏规则:在被分成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,//游戏区域宽度,单位px
gameHeight: 600,//游戏区域的高度,单位px
dataArr: [],//数据数组,存放牌的信息
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
})