俄罗斯方块消消乐

俄罗斯方块消消乐

年前接到一个需求,要求写一个小游戏。问过盆友,说需要用cocos,但是我没学过,想这用用js试试在这里插入图片描述

界面展示

下面展示一些 内联代码片

   <div class="large-screen" ref="bigBox">
            <div  v-for="(item,index) in boxList" :key="index" >
                <div class="item-view"   v-for="(v,i) in item" :key="i" :style="{
                    width:PageWidth/10 + 'px',
                    height:PageWidth/10 + 'px',
                    background: v.state == 0 ? '#3f4466' : colorList[v.state - 1],
                    lineHeight:PageWidth/10 + 'px', 
                    color:'#fff'
                }" >
                <!-- <span style="color: #fff;font-size: 24px;" >{{v.state}}</span> -->
                    
                </div>
                
                </div>
    </div>
    <div class="small-screen">
        <div @click="changeShowList" style="width: calc((100vw - 40px) / 6 ); height: 100px; background-color: bisque; display: flex;justify-content: center;align-items: center;">
            <div @touchstart="handleTouchStartzhadan" @touchmove="handleTouchMovezhadan" @touchend="handleTouchEndzhadan" style="position: absolute;width: 80px;height: 80px; border-radius: 50%;line-height: 80px;text-align: center;background-color: #272121;" :style="{...zhadanPosition}">
                <span style="font-size: 28px;color: #fff;">炸弹</span>
            </div>
            
         </div>
        <div ref="samllBox"  @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" style="position: absolute;" :style="{...view1Position}">
 
                <div v-for="(item,index1) in elementList[showList[0]]" :key="index1" >
                    <div class="small-view" v-for="(itemView,index2) in item"  :key="index2"
                    :style="{
                        backgroundColor:itemView == 0 ? '' : colorList[showList[0]],
                        width: selectNum === 1 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
                        height: selectNum === 1 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
                        borderRadius: selectNum === 1 ? 8 : 4,
                
                }"></div>
            
            </div>
            
        </div>
        <div @touchstart="handleTouchStart2" @touchmove="handleTouchMove" @touchend="handleTouchEnd" style="position: absolute;" :style="{...view2Position}">
            <div v-for="(item,index1) in elementList[showList[1]]" :key="index1" >
                <div class="small-view" v-for="(itemView,index2) in item"  :key="index2"
                :style="{
                    backgroundColor:itemView == 0 ? '' : colorList[showList[1]],
                    width: selectNum === 2 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
                    height: selectNum === 2 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
                    borderRadius: selectNum === 2 ? 8 : 4,
            
            }"></div>
        
        </div>
        </div>
        <div @touchstart="handleTouchStart3" @touchmove="handleTouchMove" @touchend="handleTouchEnd" style="position: absolute;" :style="{...view3Position}">
            <div v-for="(item,index1) in elementList[showList[2]]" :key="index1" >
                <div class="small-view" v-for="(itemView,index2) in item"  :key="index2"
                :style="{
                    backgroundColor:itemView == 0 ? '' : colorList[showList[2]],
                    width: selectNum === 3 ? PageWidth / 10 + 'px' :  PageWidth / 20 + 'px',
                    height:selectNum === 3 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
                    borderRadius: selectNum === 3 ? 8 : 4,
            
            }"></div>
        
        </div>
        </div>


        <div @click="changeShowList" style="width: calc((100vw - 40px) / 6 ); height: 100px; background-color: bisque; display: flex;justify-content: center;align-items: center;">
           <span style="font-size: 28px; color: #888888;">换一换</span>
        </div>
        
    </div>

功能逻辑

下面展示一些 内联代码片

<script>
new Vue({
  el: '#app',
  data: {
         // 定义行
         row: 10,
         // 定义列
         col:10,
         boxList: [],
         PageWidth:'',

         smallView:{
            width:this.PageWidth/10 + 'px',
            height:this.PageWidth/10 + 'px',
            borderRadius: '8px'
         },
         //小方块
         elementList:[
         [[1,1,1]],
		 [[2,2,2],[2,0,2]],
		 [[3,3,0],[0,3,3]],
		 [[0,4,0],[4,4,4]],
         [[5],[5],[5]],
         [[6,6,6],[0,0,6],[0,0,6]],
        ],
         view1Position:{},
         view2Position:{},
         view3Position:{},
         activePosition:{},
        //  方块颜色
         colorList:['#df2b85','#ffba1b','#3d7acd','#e473df','#fa3c92','#99ef4d','rgba(0,0,0,.5)'],
         selectView:'',
         showList:[1,2,3],
         selectNum:'',
         zhadanPosition:{}
    
  },
  methods: {
                handleTouchStart(event) {
                    // 触摸开始时的处理逻辑
                    this.selectNum = 1
                    this.activePosition = 'view1Position'
                    this.changePosition('view1Position',event.changedTouches[0].pageX + 'px',event.changedTouches[0].pageY + 'px')
                },
                handleTouchStart2(event){
                    this.selectNum = 2
                    this.activePosition = 'view2Position'
                    this.changePosition('view2Position',event.changedTouches[0].pageX + 'px',event.changedTouches[0].pageY + 'px')
                },
                handleTouchStart3(event){
                    this.selectNum = 3
                    this.activePosition = 'view3Position'
                    this.changePosition('view3Position',event.changedTouches[0].pageX + 'px',event.changedTouches[0].pageY + 'px')
                },
                // 提取公共的初始化
                changePosition(type, left, top){
                    this[type]={
                        left,
                        top
                    }
                },
                handleTouchStartzhadan(event){
                   this.zhadanPosition = {
                       left:event.changedTouches[0].pageX  + 'px',
                        top:event.changedTouches[0].pageY  + 'px'
                   }
                },
                handleTouchMovezhadan(event){
                    if(event.changedTouches[0].pageX < 20) return
                    if(event.changedTouches[0].pageY < 20) return
                    if(event.changedTouches[0].pageX + 60 > this.PageWidth) return

                    this.zhadanPosition = {
                       left:event.changedTouches[0].pageX  + 'px',
                        top:event.changedTouches[0].pageY  + 'px'
                   }
                },
                handleTouchEndzhadan(event){
                     console.log('baozha');
                    let boxWidth = this.PageWidth / 10;
                    let x1 = Number((event.changedTouches[0].pageX / boxWidth).toFixed(0));
                    let y1 = Number((event.changedTouches[0].pageY / boxWidth).toFixed(0)) ;
                   console.log(y1,x1);
                    if(x1 > this.col - 1){
                        console.log('超出了',x1);
                        x1 = this.col - 1
                        return
                    }
                    if(y1 > this.row - 1){
                        y1 = this.row - 1
                        console.log('超出了',x1);
                        return
                    }
                        try {
                        this.boxList[y1 - 1  < 0 ? 0 : y1 - 1 ][x1 > this.col - 1 ? this.col - 1 : x1 - 1 < 0 ? 0 : x1 - 1 ].state = 0
                        this.boxList[y1 - 1  < 0 ? 0 : y1 - 1 ][x1 > this.col - 1 ? this.col - 1 : x1 ].state = 0
                        this.boxList[y1 - 1  < 0 ? 0 : y1 - 1 ][x1 + 1 > this.col - 1 ? this.col - 1 : x1 + 1 ].state = 0

                        this.boxList[y1 < 0 ? 0 : y1][x1 + 1 > this.col - 1 ? this.col - 1 :  x1 - 1 < 0 ? 0 : x1 - 1 ].state = 0
                        this.boxList[y1 < 0 ? 0 : y1][x1 + 1 > this.col - 1 ? this.col - 1 : x1 ].state = 0
                        this.boxList[y1 < 0 ? 0 : y1][x1 + 1 > this.col - 1 ? this.col - 1 : x1 + 1 ].state = 0
                        this.boxList[y1 < 0 ? 0 : y1][x1 - 1 > 0 ? x1 - 1 : 0 ].state = 0

                        this.boxList[y1 + 1  < 0 ? 0 : y1 + 1 ][x1 > this.col - 1 ? this.col - 1 : x1 - 1 < 0 ? 0 : x1 - 1 ].state = 0
                        this.boxList[y1 + 1  < 0 ? 0 : y1 + 1 ][x1 > this.col - 1 ? this.col - 1 : x1 ].state = 0
                        this.boxList[y1 + 1  < 0 ? 0 : y1 + 1 ][x1 + 1 > this.col - 1 ? this.col - 1 : x1 + 1 ].state = 0
                        this.zhadanPosition = {}
                        } catch (error) {
                            
                        }
                   
                        
                    
                   
                    
                },
                handleTouchMove(event) {
                    if(event.changedTouches[0].pageX < 20) return
                    if(event.changedTouches[0].pageY < 20) return
                    const b = this.$refs['samllBox'].getBoundingClientRect()
                  
                    let list = []
                        list = this.elementList[this.showList[this.selectNum - 1]]
                        
                        console.log('宽度',(this.PageWidth / 10) * list[0].length,'个数',list[0].length,'宽度b',b.width);
                    if(event.changedTouches[0].pageX - 20 > this.PageWidth - (this.PageWidth / 10) * list[0].length)  return
                    this[this.activePosition]={
                        left:event.changedTouches[0].pageX + 'px',
                        top:event.changedTouches[0].pageY + 'px',
                        borderRadius: '8px'
                    }
                    this.isBackground(event.changedTouches[0].pageX.toFixed(2), event.changedTouches[0].pageY.toFixed(2));
                  
                    
                },
                handleTouchEnd(event) {
                    // 触摸结束时的处理逻辑
                    // console.log('Touch end', event);
                    //竖直方向方块是否有方块
                    this.isBox(event.changedTouches[0].pageX.toFixed(2), event.changedTouches[0].pageY.toFixed(2));
                    this.activePosition = {display:'none'};
                },
                // 阴影
                isBackground(x, y) {
                     //获取竖直方块宽、高
                    let boxWidth = this.PageWidth / 10;
                    //求余数
                    const Xnum = x > this.PageWidth ? this.PageWidth : x
                    let x1 = (Xnum / boxWidth).toFixed(0);
                    let y1 = (y / boxWidth).toFixed(0);
                    let list = []
                        list = this.elementList[this.showList[this.selectNum - 1]]
                      try {
                        for (let index = 0; index < this.row; index++) {
                            for (let j = 0; j < this.col; j++){
                                if(this.boxList[index][j].state == 99){
                                    console.log('清除');
                                    this.boxList[index][j].state = 0
                                }
                            }
                       }
                        for (let i = 0; i < list.length; i++){
                            for (let j = 0; j < list[i].length; j++){
                                if(this.boxList[y1*1 + i][x1 * 1  + j].state == 0 && list[i][j] != 0){
                                    this.boxList[y1*1 + i][x1 * 1  + j].state = 99
                                } 
                                 
                            }
                        }
                      } catch (error) {
                        
                      }
                     
                       
                       
                       
                },
                //判断当前坐标是否有方块
                isBox(x, y) {
                    //获取竖直方块宽、高
                    let boxWidth = this.PageWidth / 10;
                    let boxHeight = this.PageWidth / 10;
                    let list = []
                        list = this.elementList[this.showList[this.selectNum - 1]]
                    let x1
                   
                    // const b = this.$refs['samllBox'].getBoundingClientRect()
                    if(y > (this.PageWidth + 20 - (boxWidth * list.length))){
                        const gread =   this.PageWidth / 5

                        this.view1Position = {
                            left: gread + this.PageWidth / 10 /3 + 'px',
                        }
                        this.view2Position = {
                            left:  2 * gread +  this.PageWidth / 10 / 3 + 'px',
                        }
                        this.view3Position = {
                            left:  3 * gread + this.PageWidth / 10 /3  + 'px',
                        }
                        this.selectNum = ''
                        return 
                    }
                    if(x >  this.PageWidth - (this.PageWidth / 10) * list[0].length){
                        console.log('大于了');
                        x1 = ((this.PageWidth - (this.PageWidth / 10) * list[0].length) / boxWidth).toFixed(0) 
                       
                    }else{
                        console.log('没有大于',x,this.PageWidth,x > this.PageWidth);
                        x1 = (x / boxWidth).toFixed(0) ;
                    }
                    let y1 = (y / boxWidth).toFixed(0);
                    console.log('x1',x1,'y1',y1);

                  
                    // 元素宽度 y1行 
                    // 元素高度 x1列
                   
                    console.log('选择的是',list);
                       if(list.length != 0){
                        console.log('进来了,最高度是',list.length);
                        for (let i = 0; i < list.length; i++){
                            for (let j = 0; j < list[i].length; j++){

                                // 判断下方格子是否被占用
                                if(this.boxList[y1*1 + i][x1 * 1  + j].state != 0 && this.boxList[y1*1 + i][x1 * 1  + j].state != 99 && list[i][j] != 0){
                                    console.log('我被占用了:',this.boxList[y1*1 + i][x1 * 1  + j].state);
                                    const gread =   this.PageWidth / 5

                        this.view1Position = {
                            left: gread + this.PageWidth / 10 /3 + 'px',
                        }
                        this.view2Position = {
                            left:  2 * gread +  this.PageWidth / 10 / 3 + 'px',
                        }
                        this.view3Position = {
                            left:  3 * gread + this.PageWidth / 10 /3  + 'px',
                        }
                        this.selectNum = ''
                                    return;
                                }
                                
                            }
                        }
                        for (let i = 0; i < list.length; i++){
                            for (let j = 0; j < list[i].length; j++){
                                // 判断下方格子是否被占用
                                    this.boxList[y1*1 + i][x1 * 1  + j].state = list[i][j] == 0 ? this.boxList[y1*1 + i][x1 * 1  + j].state : list[i][j]
                                    this.showList.splice(this.selectNum - 1,1,'')
                                    console.log('haha***',i,j);
                            }
                        }
                        // 判断是否成为一行
                        for (let i = 0; i < this.row; i++){
                            if(!this.boxList[i].some(v=>v.state == 0)){
                                console.log('消除第',i,'行');
                                this.boxList[i].map(v=>v.state = 0)
                            } 
                        }
                        // 判断是否成为一列
                        for (let i = 0; i < this.row; i++){
                             let state = true
                            for (let j = 0; j < this.col; j++){
                              if(this.boxList[j][i].state == 0){
                                state = false
                                continue
                              }
                            }
                            if(state){
                                console.log('消除第',i,'列');
                                for (let k = 0; k < this.row; k++){
                                    this.boxList[k][i].state = 0
                                    console.log('k',k);
                                }
                            }
                        }

                         
                         if(this.showList[0] == '' && this.showList[1] == '' && this.showList[2] == ''){
                            this.changeShowList()
                         }
                       }

                },
              // 更换元素
              changeShowList(){
                console.log('12121');
                  // 需要展示的元素
                  this.selectNum = ''
                  this.showList = []
                    for (let i = 0; i < 3; i++) {
                        const randomNum = Math.floor(Math.random() * 6)
                        this.showList.push(randomNum)
                    }
                    console.log('this.showList',this.showList);
                    const gread =   this.PageWidth / 5
                        this.view1Position = {
                            left: gread + this.PageWidth / 30 + 'px',
                        }
                        this.view2Position = {
                            left:  2 * gread +  this.PageWidth / 30 + 'px',
                        }
                        this.view3Position = {
                            left:  3 * gread + this.PageWidth / 30  + 'px',
                        }
              }

          

            },
  mounted: function () {
                var that = this;
                setTimeout(() => {
                    that.PageWidth = document.documentElement.clientWidth - 40;
                    console.log('宽度为:' , that.PageWidth / 10);
                    
                    let list = []
                    for (let i = 0; i < 10; i++) {
                             const rowList = [];
                             for (let j = 0; j < 10; j++) {
                                rowList.push({
                                id: i * 10 + j,
                                positionX: j * that.PageWidth / 10,
                                positionY: j * that.PageWidth / 10,
                                position: j,
                                state: 0
                            })
                        }
                        console.log('rowList',rowList);
                        list.push(rowList);
                    }
                    //  const gread =   that.PageWidth / 5

                    //     this.view1Position = {
                    //         left: gread + that.PageWidth / 10 /3 + 'px',
                    //     }
                    //     this.view2Position = {
                    //         left:  2 * gread +  that.PageWidth / 10 / 3 + 'px',
                    //     }
                    //     this.view3Position = {
                    //         left:  3 * gread + that.PageWidth / 10 /3  + 'px',
                    //     }
                    that.boxList = list;
                    
                    that.changeShowList()
                 

                }, 500)
            }
})
</script>
</body>
</html>
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值