这是一个翻牌子游戏，玩过植物大战僵尸手游的应该玩过这个小游戏
image.png
效果如下
image.png
代码实现
1.html部分
<body>
<div class="container">
<div class="progress-bar">
<div class="bar"></div>
</div>
<div class="content"></div>
</div>
</body>
2.css样式
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 100vh;
}
.content{
width: 100%;
height: calc(100% - 2px);
border: 10px solid #909090;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: #EEE5DE;
}
.content .flipper{
border-radius: 12px;
border: 1px solid #e0e0e0;
width: calc(100%/8 - 20px);
height: calc(100%/3 - 20px);
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
@media all and (max-device-width: 400px) {
.content .flipper{
width: calc(100%/3 - 10px);
height: calc(100%/8 - 10px);
}
}
.front{
background:#FFE7AB
}
.front,.back{
height: 100%;
width: 100%;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
text-align: center;
font-size: 60px;
border-radius: 12px;
}
.text{
width: 90%;
height: 90%;
position: absolute;
left: 5%;
top: 5px;
}
.text img {
width: 80%;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
background: #fff;
}
.rotateY{
transform: rotateY(180deg);
}
.progress-bar{
height: 2px;
background-color: #f0f0f0;
}
.progress-bar .bar{
background-color: red;
height: 100%;
width: 0;
transition: all 1s;
}
使用响应式布局，解决移动端适配问题
@media all and (max-device-width: 400px) {
.content .flipper{
width: calc(100%/3 - 10px);
height: calc(100%/8 - 10px);
}
}
3.js部分
在网上收集了一部分表情包
let data = [
"https://pic.qqtn.com/up/2018-5/15256841046128660.gif",
"https://pic.qqtn.com/up/2018-5/15256841043659345.gif",
"https://pic.qqtn.com/up/2018-5/15256841059452437.gif",
"https://pic.qqtn.com/up/2018-5/15256841059452437.gif",
"https://pic.qqtn.com/up/2018-5/15256841124671323.gif"
]
游戏逻辑
for(let i=0;i<12;i++){
let value = Math.floor(Math.random()*data.length);
arr[i*2]=data[value];
arr[i*2+1]=data[value];
}
let domArr = [];
let maxTime = 60;
arr = lx(arr);
let dom = document.querySelector('.content');
for(let i=0;i<arr.length;i++){
let div = document.createElement('div');
div.className='flipper'
let front = document.createElement('div');
front.className='front';
div.appendChild(front)
let back = document.createElement('div');
back.className='back';
let text = document.createElement('img');
text.className='text'
text.src=arr[i];
div.setAttribute('data-text',arr[i]);
back.appendChild(text)
div.appendChild(back);
dom.appendChild(div);
div.addEventListener('click',function(){
if(this.getAttribute('disabled') === '1'){
return;
}
this.classList.add('rotateY');
domArr.push(this);
this.setAttribute('disabled','1');
if(domArr.length >= 2){
if(domArr.length > 2){
domArr[0].classList.remove('rotateY');
domArr[0].removeAttribute('disabled');
domArr.shift();
}
//确保只保留两个
if(domArr[0].getAttribute('data-text') == domArr[1].getAttribute('data-text')){
domArr[0].style.visibility='hidden';
domArr[0].removeAttribute('disabled');
domArr[1].style.visibility='hidden';
domArr[1].removeAttribute('disabled');
domArr = [];
maxTime++;
}
}
})
}
let time = 0;
let timer = window.setInterval(()=>{
time++;
if(time>maxTime){
window.clearInterval(timer);
alert('游戏结束')
}else{
document.querySelector('.progress-bar .bar').style.width=(time/maxTime)*100+'%';
}
},1000)
function lx(a){
var newList = [];
let length = a.length;
for(let i=0;i<length;i++){
var num = Math.floor(Math.random()*(a.length-1));
newList.push(a[num]);
a.splice(num,1)
}
return newList
}
网友评论