原生原生JS实现记忆翻牌游戏实现记忆翻牌游戏
主要为大家详细介绍了原生JS实现记忆翻牌游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴
趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现记忆翻牌游戏的具体代码,供大家参考,具体内容如下
html代码
<div id="game">
<!-- div.block*16>div.pic -->
</div>
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 () {
评论0