本文实例为大家分享了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,