Vue2实现别踩白块（第一种）

实际效果：可选模式

开始按钮

游戏界面

游戏失败（不点击任何黑块）

游戏中（点击黑块变灰色）

功能简介：

1、点击无尽模式，就是常规速度，定时器20毫秒，然后无限计分
2、急速模式，比常规快一倍，定时器8毫秒
3、计时模式，限时60秒，定时器20毫秒，计分
以上所有模式，点击白块直接失败，点击黑块得计一分。最高分数和最长时间，这里只进行了存储，没有写比较计算的逻辑。可以自行补全

代码逻辑：

此别踩白块的整体思路为：
1、数组存放白块数据：二维数组，数组内部单个元素为一个四位数字的数组，其中1代表黑块，0代表白块，一行四块。

blocksArr:[ // [1,0,0,0], // [0,0,1,0], ],
2、当点击开始按钮的时候，开始定时器，开始向数组插入一行随机生成的带有一个黑块标记的四位数组。然后开始改变容器的top值，使之向下移动。点击黑块会将1修改为2，当数组长度为6进行循环判断其中是否存在未被点击的黑块，如有则游戏结束。否则就会删除最后一行数据。

实际代码：

<template>
    <div class="box" ref="box">
        <!-- 菜单页 -->
        <div class="menu-page" v-if="showMenu">
            <div class="menu-item" 
                v-for="(item,index) in menuArr" 
                :key="index" 
                @click="chooseMode(item)">
                {{ item.name }}


                <span v-show="item.key=='highest'">
                    :
                    {{ historyHighestScore }}
                </span>
                <span v-show="item.key=='longest'">
                    :
                    {{ historyLongestTimeLen }}s
                </span>
            </div>
        </div>


        <!-- 内部 -->
        <!-- 提示模式 -->
        <div class="tips-mode" v-show="showModeTips&&!showMenu">
            当前模式：
            <span v-if="gameMode=='infinite'">无尽模式</span>
            <span v-if="gameMode=='fast'">急速模式</span>
            <span v-if="gameMode=='timeLimit'">计时模式</span>
        </div>
        <!-- 计时 -->
        <div class="time-num" v-show="showSurvivalTime&&!showMenu">
            存活时间：
            <span>{{ survivalTime||0 }}s</span>
        </div>
        <!-- 倒计时 -->
        <div class="time-num" v-show="showLimitTimeLen&&!showMenu">
            时间：
            <span>{{ limitTimeLen||0 }}s</span>
        </div>
        <!-- 计分 -->
        <div class="score-num" v-if="showScore&&!showMenu&&(showSurvivalTime||showLimitTimeLen)">
            分数：
            <span>{{ score }}</span>
        </div>

        <div class="scroll" ref="scroll" v-if="!showMenu">
            <ul class="li-wrap" v-for="(item,index) in blocksArr" :key="index">
                <li class="li-content" 
                    v-for="(ite,idx) in item" 
                    :key="idx" 
                    :style="{'background':ite==1?'black':ite==2?'#eee':'#fff'}"
                    @click="clickBlock(index,idx)"
                >
                </li>
            </ul>
        </div>
        <div class="begin" v-if="showBtn&&!showMenu">
            <button @click="clickStart">{{btnText}}</button> 
            <span @click="backMenu">返回菜单</span>
        </div>
    </div> 
</template>
   
<script>
    export default {
        name: "App",
        created() {
            //获取内存
            this.getHistoryData()
        },

        data(){
            return{
                showBtn:true,// 是否显示按钮
                btnText:'开始游戏',
                showScore:false,//显示分数
                showLimitTimeLen:false,//显示限制时间
                showSurvivalTime:false,  //显示计时
                showMenu:true,// 显示菜单页
                showModeTips:false, //显示游戏模式
                gameMode:'',  //游戏模式

                timer:null,  //白块滚动定时器
                limitTimer:null, //倒计时器定时器
                survivalTimer:null, //正计时器定时器
                limitTimeLen:60,//倒计时模式时间1分钟

                
                survivalTime:0,  //计时器时间

                speed:5,  //步长
                tripleSpeed:20,  //定时器速度  普通就是20   极速就是8

                score:0, //分数
                

                //产生白块
                blocksArr:[
                    // [1,0,0,0],
                    // [0,0,1,0],
                ],

                //菜单
                menuArr:[
                    {
                        name:'无尽模式',
                        key:'infinite'
                    },
                    {
                        name:'急速模式',
                        key:'fast'
                    },
                    {
                        name:'计时模式',
                        key:'timeLimit'
                    },
                    {
                        name:'微信游客',
                        key:'tour'
                    },
                    {
                        name:'最高分数',
                        key:'highest'
                    },
                    {
                        name:'最长时间',
                        key:'longest'
                    }
                ],


                historyHighestScore:0, // 历史最高分
                historyLongestTimeLen:0, // 历史最长时间
                
            }
        },
        methods: {
            getHistoryData(){
                this.historyHighestScore = localStorage.getItem('whiteBlockScore')||0
                this.historyLongestTimeLen = localStorage.getItem('whiteBlockTimeLen')||0
            },
            //点击开始
            clickStart(){
                // this.showBtn = false;

                this.$refs.box.style.backgroundColor = '#fff';
                this.$refs.box.style.border = '1px solid black';

                this.$refs.scroll.innerHTML = "";

                this.speed = 5
                this.timer =  null;
                this.beginGame();
            },
            //开始游戏
            beginGame(){
                let that = this;
                this.showBtn = false
                this.showScore = true
                this.blocksArr = []
                this.score = 0;
                this.survivalTime = 0
                this.limitTimeLen = 60

                this.showModeTips = false

                if(this.gameMode=='timeLimit'){
                    this.countdown()
                }
                if(this.gameMode=='infinite'||this.gameMode=='fast'){
                    this.countup()
                }
                

                this.timer = setInterval(()=>{
                    //开始移动
                    console.log('烦得很',that.$refs.scroll.offsetTop,that.$refs.scroll.style.top)
                    that.$refs.scroll.style.top = that.$refs.scroll.offsetTop + that.speed +'px'
                    //因为默认是负的  进入画面就生成白块
                    if(that.$refs.scroll.offsetTop >= 0){
                        that.creatNewRow();
                        that.$refs.scroll.style.top = '-130px';
                    }


                    //删除第一行  也就是滑下去的哪一行
                    //这里的数字应该是活的  比如这个7
                    let clientHeight = this.$refs.box.clientHeight
                    let num = Math.ceil(clientHeight/130)
                    if(that.blocksArr.length == num){
                        for(var i = 0; i < 4; i++){
                            if(that.blocksArr[that.blocksArr.length-1][i]==1){
                                that.stopGame()
                            }
                        }
                        if(this.timer){
                            that.blocksArr.pop()
                        }
                    }
                },that.tripleSpeed)
            },

            ///游戏结束
            stopGame(){
                // this.$refs.scroll.style.top = this.$refs.scroll.offsetTop+'px';
                alert('得分：' + this.score);
                clearInterval(this.timer);
                clearInterval(this.limitTimer);
                clearInterval(this.survivalTimer);
                this.timer = null
                this.limitTimer = null
                this.survivalTimer = null

                this.showBtn = !this.showBtn;
                this.btnText = '重新开始';


                //保存分数和时长
                this.saveTimeOrScore(this.score,'score')

                if(this.gameMode=='infinite'||this.gameMode=='fast'){
                    this.saveTimeOrScore(this.survivalTime,'time')
                }

                
            },

            //点击方块
            clickBlock(index,idx){
                if(this.blocksArr[index][idx]==0){
                    this.stopGame()
                }else if(this.blocksArr[index][idx]==1){
                    this.blocksArr[index][idx] = 2
                    this.score++


                    if(this.score % 20 == 0){
                        this.speed++;
                    }
                }
            },

            //随机数0-3
            randomNum(m,n){
                return parseInt(Math.random() * (n - m + 1)) + m;
            },

            //创建格子
            creatNewRow(){
                let that = this
                var index = this.randomNum(0 , 3);


                let newRowArr = [0,0,0,0]
                newRowArr[index] = 1
                this.blocksArr.unshift(newRowArr)
            },


            //返回菜单
            backMenu(){
                this.showMenu = true
                this.showLimitTimeLen = false
                this.showSurvivalTime = false
                this.showScore = false
                this.showModeTips = false

                this.limitTimeLen = 60
                this.survivalTime = 0


                this.getHistoryData()
            },

            //选择模式
            chooseMode(item){
                //无尽   计时   急速
                switch (item.key){
                    case 'highest':
                    case 'longest':
                    case 'tour':
                        this.showMenu = true
                        break;
                    case 'fast':
                        this.tripleSpeed = 8
                        this.showMenu = false
                        this.showSurvivalTime = true
                        break
                    case 'timeLimit':
                        this.showLimitTimeLen = true
                        this.showMenu = false
                        this.tripleSpeed = 20
                        break
                    case 'infinite':
                        this.tripleSpeed = 20
                        this.showMenu = false
                        this.showSurvivalTime = true
                        break
                }  

                //重置基础状态
                this.showModeTips = true
                this.gameMode = item.key
                this.showScore = true
                this.score = 0

                this.blocksArr = []
                this.btnText = '开始游戏'

                clearInterval(this.timer)
                this.timer = null
                console.log('this.mode',this.gameMode)
            },


            //倒计时函数
            countdown() {
                let that = this
                this.limitTimer = setInterval(()=>{
                    if(that.limitTimeLen){
                        that.limitTimeLen--
                    }else{
                        clearInterval(that.limitTimer)
                        that.stopGame()
                    }
                    
                },1000)
            },

            //正计时
            countup() {
                let that = this
                this.survivalTimer = setInterval(()=>{
                    that.survivalTime++
                },1000)
            },

            //存储最高分和存活时长
            saveTimeOrScore(val,type){
                if(type=='score'){
                    localStorage.setItem('whiteBlockScore',val)
                }else{
                    localStorage.setItem('whiteBlockTimeLen',val)
                }
            },
        }
    };
</script>
   
<style lang="scss" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .box{
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        margin: 0px auto;
        position: relative;
        overflow: hidden;
        .tips-mode{
            position: absolute;
            top: 2%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 15px;
            color: #9e9e9e;
            z-index: 9;
        }
        .time-num{
            position: absolute;
            top: 6%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 18px;
            color: red;
            z-index: 9;
        }
        .score-num{
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 18px;
            color: red;
            z-index: 9;
        }

        .menu-page{
            display: flex;
            flex-wrap: wrap;

            .menu-item{
                width: 50%;
                height: 33.33vh;

                display: flex;
                align-items: center;
                justify-content: center;

                font-size: 1rem;
                color: #333;
                background: #fff;

                &:nth-child(2),&:nth-child(3),&:nth-child(6){
                    background: #333;
                    color: #fff;
                }
            }
        }
        
    }
    .scroll{
        width: 100%;
        height: 100%;
        /* background-color: skyblue; */
        position: absolute;
        top: -130px;

        ul,.li-wrap{
            width: 100%;
            display: flex;
            li,.li-content{
                float: left !important;
                width: 25% !important;
                height: 130px !important;
                border: 1px solid black !important;
            }
        }
    }
    .begin{
        width: 100%;
        height: 120px;
        position: relative;
        background: yellow;
        z-index: 2;
        top: 50%;
        left: 0;
        margin-top: -30%;


        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        button{
            width: 200px;
            height: 50px;
            font-size: 30px;
            margin-bottom: 10px;
        }
        span{
            display: block;
            text-align: center;
            font-size: 15px;
        }
    }

</style>

总结

此代码存在一些瑕疵，但是基本功能已经实现。如有问题欢迎指出，一起学习进步