您现在的位置是：网站首页>博客详情博客详情

原【游戏系列】原生js实现翻转卡片消除小游戏

凡繁烦2021-05-07 16:28【前端技术】4193人已围观

简介【游戏系列】原生js+html+css实现的卡片翻转消除小游戏,类似手游“植物大战僵尸2”里的小游戏

这是一个翻牌子游戏，玩过植物大战僵尸手游的应该玩过这个小游戏

效果如下

代码实现

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
    }