本文实例为大家分享了JS实现记忆翻牌游戏的具体代码，供大家参考，具体内容如下

html代码

css代码

* {

padding: 0;

margin: 0;

}

#game {

width: 600px;

height: 600px;

margin: 0 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)

}

js代码

var game = {

el: '',

level: 0,

blocks: 0,

gameWidth: 600,

gameHeight: 600,

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 () {

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);

}

console.log(dataArr);

this.dataArr = this.shuffle(dataArr);

},

randomArr: function () {

var picNum = this.picNum;

var arr = [];

for(var i = 0; i < picNum; i ++) {

arr.push(i + 1);

}

console.log(arr);

return this.shuffle(arr);

},

shuffle: function (arr) {

return arr.sort(function () {

return 0.5 - Math.random();

})

var length = arr.length - 1;

for(var i = length ; i >= 0; i --) {

var randomIndex = Math.floor(Math.random() * (i + 1));

var temp = arr[randomIndex];

arr[randomIndex] = arr[i];

arr[i] = temp;

}

return arr;

},

render: function () {

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 () {

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

})

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2020-07-29