小游戏

最新推荐文章于 2022-07-21 18:13:01 发布
shenxin5636
最新推荐文章于 2022-07-21 18:13:01 发布
阅读量106
点赞数
文章标签： vue 小游戏编写
本文链接：https://blog.csdn.net/shenxin5636/article/details/101076118
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style>
        td{
            width: 80px;
            height: 100px;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>


<div id="app">

    <button @click="startGame">LisGo!!!游戏</button>
    <br>

        <span v-show="listTime>0">你还有{{listTime}}秒记忆时间</span>
        <span v-show="win">恭喜您进入下一关！！</span>
        <br>
    <table border="1" bgcolor="blue">
        <tr v-for="(row,i) in currentDate">
            <td v-for="(data,j) in row">
                <span v-if="data.showText">{{data.value}}</span>
                <button v-else @click="buttonClick(data,i,j)">点我！</button>
            </td>
        </tr>
    </table>


</div>

<script>

    const  app =  new Vue({
        el:"#app",
        data:{
            nums:2,
            source:["方","法","就","是","主","线","程","多","个","线","程","同","时","执","行","就","是","多","线","程","线","程","池","就","是","把","准","备","好","的","线","程","放","到","线","程","池","里","如","果","处","理","请","求","需","要","调","用","线","程","的","时","候","就","从","线","程","池","里","去","调","用","用","完","以","后","再","放","回","到","线","程","池","里","这","样","就","防","止","高","并","发","节","省","资","源","我","们","目","前","开","发","中","没","有","涉","及","到","过","多","线","程","其","实","我","个","人","理","解","用","多","线","程","无","非","是","为","了","提","高","代","码","的","执","行","效","率","提","高","客","户","的","体","验","解","决","高","并","发","但","是","项","目","里","如","果","多","线","程","使","用","的","多","的","话","后","期","的","代","码","维","护","这","一","块","也","不","怎","么","好","维","护","我","们","现","在","在","解","决","这","些","高","并","发","都","是","建","议","使","用","中","间","件","来","解",],
            currentDate:[],
            listTime:0,
            intervalId:0,
            lastClickText:"",
            lastClickTextIndex:[],
            timeOutId:0,
            win:false
        },
        methods:{
            buttonClick(data,i,j){
                if (this.timeOutId!=0){
                    return;
                }
                if (this.lastClickText=="") {//如果没有选中
                    this.lastClickText = data.value;  //记录当前选中的值
                    this.lastClickTextIndex.push(i,j);//记录当前选中的下标
                    data.showText = true;//让当前的值显示
                }else {//已经有一个选中了
                    if (data.value==this.lastClickText){//两次选中相等
                        data.showText = true;//展示第二次选中的文字
                        this.lastClickText = "";//清理第一次选中的数据
                        this.lastClickTextIndex  = [];
                        //判断两次是否相等
                        for (let i = 0; i <this.nums; i++) {
                            for (let j = 0; j <this.nums; j++) {
                                if (!this.currentDate[i][j].showText){
                                    return ;
                                }
                            }
                        }
                        this.win = true;

                    } else {
                        data.showText = true;//展示第二次选中的文字
                        let that  = this;
                       this.timeOutId = setTimeout(function () {
                            that.timeOut(data);
                        },1000)
                    }
                }

            },
            timeOut(data){

                data.showText = false;//当前选中的文字隐藏
                //上一次选中的文字隐藏
                this.currentDate[this.lastClickTextIndex[0]][this.lastClickTextIndex[1]].showText = false;
                //清空第一次选中的数据
                this.lastClickText = "";
                this.lastClickTextIndex  = [];
                this.timeOutId = 0 ;
            },
            startGame(){

                this.currentDate = [];
                let tempArr = [];
                //隨機取出文字
                for (let i = 0; i<this.nums*this.nums/2; i++){
                    let index= parseInt(Math.random() * this.source.length);
                    if (tempArr.indexOf(this.source[index])>0) {
                        i--;
                    }else {
                        tempArr.push(this.source[index]);
                        tempArr.push(this.source[index]);
                    }
                }
                console.log(tempArr);
                //打亂文字
                for (let i = 0; i < tempArr.length; i++) {
                    let  temp = tempArr[i];
                    let  index = parseInt(Math.random() * tempArr.length);
                    let  next = tempArr[index];
                    tempArr[i]  = next;
                    tempArr[index]  = temp;
                }

                //想currentData中封装

                let  tempArrIndex = 0;
                for (let i = 0; i <this.nums; i++) {
                    let arr =  [];
                    for (let j = 0; j <this.nums; j++) {
                        arr.push({
                            value:tempArr[tempArrIndex++],
                            showText:true

                        });

                    }
                    this.currentDate.push(arr);
                }

                console.log(this.currentDate);
                //每隔多少毫秒   去执行一次function
                let  that = this;
                this.listTime = 5;
                that.intervalId  = setInterval(function(){
                    that.lastTimeChange();
                },1000);
                //clearInterval(IntervalId);
                //
                // //过了多少毫秒    在去执行function  只执行一次
                // let id  = setTimeout(function,毫秒值);
                // clearTimeout(id);
            },
            lastTimeChange(){
                this.listTime--;
                if (this.listTime<0){
                    clearInterval(this.intervalId);
                    this.intervalId = 0;

                    //隐藏文字
                    for (let i = 0; i <this.nums; i++) {
                        for (let j = 0; j <this.nums; j++) {
                            this.currentDate[i][j].showText = false;
                        }
                    }

                }
            }
        }

    });

</script>

</body>
</html>
shenxin5636
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小游戏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/vue/dist/vue.js"></script> ...
复制链接

扫一扫