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

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

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

简介【游戏系列】原生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样式

*{
    margin0;
    padding0;
}
.container{
    width100%;
    height100vh;
}
.content{
    width100%;
    heightcalc(100% - 2px);
    border10px solid #909090;
    box-sizing: border-box;
    padding10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color#EEE5DE;
}
.content .flipper{
    border-radius12px;
    border1px solid #e0e0e0;
    widthcalc(100%/8 - 20px);
    heightcalc(100%/3 - 20px);
    transition0.6s;
    transform-style: preserve-3d;
    position: relative;
}
@media all and (max-device-width: 400px) {
    .content .flipper{
        widthcalc(100%/3 - 10px);
        heightcalc(100%/8 - 10px);
    }
}
.front{
    background:#FFE7AB
}
.front,.back{
    height100%;
    width100%;
    backface-visibility: hidden;
    position: absolute;
    top0;
    left0;
    text-align: center;
    font-size60px;
    border-radius12px;
}
.text{
    width90%;
    height90%;
    position: absolute;
    left5%;
    top5px;
}
.text img {
    width80%;
}
.front {
    z-index2;
}

.back {
    transformrotateY(180deg);
    background#fff;
}

.rotateY{
    transformrotateY(180deg);
}
.progress-bar{
    height2px;
    background-color#f0f0f0;
}
.progress-bar .bar{
    background-color: red;
    height100%;
    width0;
    transition: all 1s;
}

使用响应式布局,解决移动端适配问题

@media all and (max-device-width: 400px) {
    .content .flipper{
        widthcalc(100%/3 - 10px);
        heightcalc(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
    }

预览地址

很赞哦! (0)

文章评论(共0条)

{{item.createTime}} {{item.commentArea}} |({{item.commentIp}})
{{it.createTime}}{{it.commentArea}} | ({{it.commentIp}})
上一页 1 ... {{num}} ... 下一页 {{totalPage}} 跳转到: GO

站点信息

  • 建站时间:2020-03-28
  • 开发语言:JAVA
  • 文章统计:13篇
  • 文章评论:4条
  • 统计数据百度统计
  • 微博:扫描二维码,关注

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝:非常感谢您的慷慨支持~