Cocos-creator制作一个的五子棋(一)人人对战

  • Post author:
  • Post category:其他



一、首先将spriteFrame为空的预制体chess加载到在15*15的棋盘上,并将其存进数组chesslist中

        chesslist:{
            default:[],
            type:[cc.node]
        },
    chessBoard:function(){
        //将chess预制体铺满棋this.chessBoard()盘,然后点击时出发点击事件显示图片
        for(var i=7;i>-8;i--)
     {
        for(var j=-7;j<8;j++)
        {
        //创建一个新的棋盘,将225个空棋子放入
        var newCode=cc.instantiate(this.chessman)
        cc.find("Canvas/back").addChild(newCode)
        newCode.setPosition(cc.v2(60*j,60*i))
        //鼠标监听事件,每次下棋时进行一次判断
        var self=this

        
        newCode.on(cc.Node.EventType.TOUCH_END,function(event)
        {
            self.judgeOver()
                                
        });   
                                                  
        this.chesslist.push(newCode)
        }
     }  
    
    },


二、在每个棋子上添加点击事件,并且实现黑字白字反复下子(将这个函数放在一个新的脚本中并且挂在在预制体中)


在这里插入图片描述

    trans:function(){

        //落子的实现
          var test=this
          if(gamestate=='white' && this.getComponent(cc.Sprite).spriteFrame==null) //判断是否有棋子
          {
            this.getComponent(cc.Sprite).spriteFrame=this.whiteSpriteFrame  //将透明棋子变成白字
            gamestate='black'   //每次点击时对棋子状态进行改变
            cc.log(gamestate)
            color=this.whiteSpriteFrame
            chessbox.push(test)    //棋子下棋后入栈

            
          }
        else if(this.gamestate='black' && this.getComponent(cc.Sprite).spriteFrame==null)
          {
            this.getComponent(cc.Sprite).spriteFrame=this.blackSpriteFrame //将透明棋子变成黑字
            gamestate='white'   
            cc.log(gamestate)
            color=this.blackSpriteFrame
            chessbox.push(test)   //棋子下棋后入栈

          }
        else  alert("这里有棋子")
       // this.getComponent(cc.Sprite).spriteFrame=this.blackSpriteFrame

       //将棋子放进数组
    },


三、判断胜负的函数

    judgeOver:function(){
        var action=cc.moveTo(0.25,0,0)
        var actionback=cc.moveTo(0.25,0,850)    //定义动作
        //判断列
        for(var i=0;i<11;i++)
        {
            for(var j=0;j<15;j++)
            {
               // cc.log(this.chesslist[112].getComponent(cc.Sprite).spriteFrame)
                if(this.chesslist[(i+j*15)].getComponent(cc.Sprite).spriteFrame !== null && this.chesslist[(i+1+j*15)].getComponent(cc.Sprite).spriteFrame !== null
                    && this.chesslist[(i+2+j*15)].getComponent(cc.Sprite).spriteFrame !== null && this.chesslist[(i+3+j*15)].getComponent(cc.Sprite).spriteFrame !== null
                    && this.chesslist[(i+4+j*15)].getComponent(cc.Sprite).spriteFrame !== null)
                    {
                        var Over=cc.find("Canvas/background_1")
                        
                        if(this.chesslist[(i*15+j)].getComponent(cc.Sprite).spriteFrame==this.whiteSpriteFrame)
                        {
                            //结束弹窗跳出
                            Over.runAction(action)
                            cc.find("Canvas/background_1/black_win").active=false

                        }
                        else
                        {
                            //结束弹窗跳出
                            Over.runAction(action)
                            cc.find("Canvas/background_1/white_win").active=false
                        }
                        
                    }
               // else cc.log("游戏继续")

                
            }
        }
        //判断列

        for(var i=0;i<15;i++)
        {
            for(var j=4;j<15;j++)
            {
                //判断是否有五个棋子连在一起

                if(this.chesslist[(i+j*15)].getComponent(cc.Sprite).spriteFrame!==null && this.chesslist[(i+(j-1)*15)].getComponent(cc.Sprite).spriteFrame!==null
                && this.chesslist[(i+(j-2)*15)].getComponent(cc.Sprite).spriteFrame!==null && this.chesslist[(i+(j-3)*15)].getComponent(cc.Sprite).spriteFrame!==null
                && this.chesslist[(i+(j-4)*15)].getComponent(cc.Sprite).spriteFrame!==null)
                {

                    var Over=cc.find("Canvas/background_1")
                    
                    if(this.chesslist[(i+j*15)].getComponent(cc.Sprite).spriteFrame=this.whiteSpriteFrame)
                    {
                       //结束弹窗跳出
                        Over.runAction(action)
                        cc.find("Canvas/background_1/black_win").active=false
                        
                    }
                    else
                    {
                       //结束弹窗跳出
                        Over.runAction(action)
                        cc.find("Canvas/background_1/white_win").active=false
                    }

                }
               // else cc.log("游戏继续")
            }
        }
        //判断右斜方向
        for(var i=0;i<11;i++)
        {
            for(var j=4;j<15;j++)
            {
                if(this.chesslist[(i+j*15)].getComponent(cc.Sprite).spriteFrame !== null && this.chesslist[(i+1+(j-1)*15)].getComponent(cc.Sprite).spriteFrame !== null
                && this.chesslist[(i+2+(j-2)*15)].getComponent(cc.Sprite).spriteFrame !== null && this.chesslist[(i+3+(j-3)*15)].getComponent(cc.Sprite).spriteFrame !== null
                && this.chesslist[(i+4+(j-4)*15)].getComponent(cc.Sprite).spriteFrame !== null) 
                {
                    var Over=cc.find("Canvas/background_1")
                    Over.runAction(action)
                    if(this.chesslist[(i+j*15)].getComponent(cc.Sprite).spriteFrame==this.whiteSpriteFrame)
                    {
                        //结束弹窗跳出
                        Over.runAction(action)
                        cc.find("Canvas/background_1/black_win").active=false
                    }
                    else
                    {
                        //结束弹窗跳出
                        Over.runAction(action)
                        cc.find("Canvas/background_1/white_win").active=false
                    }
                }

            }
        }
        //判断左斜方向
        for(var i=4;i<15;i++)
        {
            for(var j=4;j<15;j++)
            {
                if(this.chesslist[(i+j*15)].getComponent(cc.Sprite).spriteFrame !== null && this.chesslist[(i-1+(j-1)*15)].getComponent(cc.Sprite).spriteFrame !== null
                && this.chesslist[(i-2+(j-2)*15)].getComponent(cc.Sprite).spriteFrame !== null && this.chesslist[(i-3+(j-3)*15)].getComponent(cc.Sprite).spriteFrame !== null
                && this.chesslist[(i-4+(j-4)*15)].getComponent(cc.Sprite).spriteFrame !== null) 
                {
                    var Over=cc.find("Canvas/background_1")
                    Over.runAction(action)
                    if(this.chesslist[(i+j*15)].getComponent(cc.Sprite).spriteFrame==this.whiteSpriteFrame)
                    {
                        //结束弹窗跳出
                        Over.runAction(action)
                        cc.find("Canvas/background_1/black_win").active=false
                    }
                    else
                    {
                        //结束弹窗跳出
                        Over.runAction(action)
                        cc.find("Canvas/background_1/white_win").active=false
                    }

                }

            }
        }

    },


四、悔棋的实现,我采用的是入栈arr.push()出栈arr.pop()的方法


在这里插入图片描述
在每次点击下棋子的时候将该棋子入栈,然后点击悔棋事件的时候通过arr.pop()获取最后一次下的棋子,然后获取该棋子的position属性,然后通过计算得到该棋子是第几个棋子

下面是悔棋事件的代码:

regret_chess:function(){
        
        var chessman=chessbox.pop()
        //获取到最后一次入栈的棋子,下面是获取其属性
        cc.log(chessman)
        //var chessmany=chessbox.pop().node.position.y
        var chessmanx=chessman.node.position.y
        var chessmany=chessman.node.position.x
        var regret_chessman=(chessmany/60)+7+(7-chessmanx/60)*15
        //出栈操作,获取最后一个入栈的节点,然后获取其position属性,并将其转换成为第几颗棋子

        if(this.chesslist[regret_chessman].getComponent(cc.Sprite).spriteFrame==this.whiteSpriteFrame)
        {
            gamestate='white'
        }
        else
        {
            gamestate='black'
        }
        //判断最后一个是白棋还是黑棋,然后悔棋后仍然是该棋子下棋

        this.chesslist[regret_chessman].getComponent(cc.Sprite).spriteFrame=null
        //将该棋子变成空
    },

现在这样人人对战,判断胜利以及悔棋已经实现。第二篇会将人机对战;第三篇会连接数据库实现有积分排行等功能。源码的话完成后会贴出来。



版权声明:本文为dustnn原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。