中秋月饼拼图游戏

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

说到中秋，那肯定得吃月饼。我折腾着做一款有关月饼的拼图小游戏吧。

首先在网上先找一张比较有食欲的月饼，然后自己再用ps里面的切片工具，月饼一下子就可以切成9份。

可以看看我的游戏场景，其实就是有9个button安装九宫格的位置进行排放。每一个button都是可以点击的。

 //初始化位置
        this.buttons[1].x = -108
        this.buttons[1].y = 108

        this.buttons[2].x = 0
        this.buttons[2].y = 108

        this.buttons[3].x = 108
        this.buttons[3].y = 108

        this.buttons[4].x = -108
        this.buttons[4].y = 0

        this.buttons[5].x = 0
        this.buttons[5].y = 0

        this.buttons[6].x = 108
        this.buttons[6].y = 0

        this.buttons[7].x = -108
        this.buttons[7].y = -108

        this.buttons[8].x = 0
        this.buttons[8].y = -108

        this.nilPosX = 108
        this.nilPosY = -108

   
        var i = 1
        for(i=1;true;i++)
        {
            if(i>=200 && this.nilPosX==108 && this.nilPosY ==-108)
            {
                break;
            }

            var go = parseInt(Math.random()*(4-1+1)+1,10); 
            var newPosx
            var newPosy
            if(go==1)
            {
                newPosx = this.nilPosX+108
                newPosy = this.nilPosY
            }
            else if(go==2)
            {
                newPosx = this.nilPosX-108
                newPosy = this.nilPosY
            }
            else if(go==3)
            {
                newPosx = this.nilPosX
                newPosy = this.nilPosY+108
            }
            else if(go==4)
            {
                newPosx = this.nilPosX
                newPosy = this.nilPosY-108
            }

            if(newPosx>=-108 && newPosx<=108 && newPosy>=-108 && newPosy<=108)
            {
                this.getbuttonfrompos(newPosx,newPosy)
            }
        }

这个是按下startgame，也就是开始按钮之后执行的动作。里面的操作是将所有的拼图位置进行摆正确了，然后再经过200步的随机打乱。注意，这里必须是模拟正常移动的打乱方法。然后一开始随机乱摆拼图，那就不一定能够复原。

成功打乱之后是这样的。

//移动
    move : function (object1) {
        var x = object1.x
        var y = object1.y

        object1.x = this.nilPosX
        object1.y = this.nilPosY

        this.nilPosX = x
        this.nilPosY = y
    },

剩下的就是移动按钮了，其实就是两个button交换位置而已。

//检查是否完成
    isOK:function()
    {
        if(this.buttons[1].x == -108 && this.buttons[1].y == 108) 
        {
            if(this.buttons[2].x == 0 && this.buttons[2].y == 108)
            {
                if(this.buttons[3].x == 108 && this.buttons[3].y == 108)
                {
                    if(this.buttons[4].x == -108 && this.buttons[4].y == 0)
                    {
                        if(this.buttons[5].x == 0 && this.buttons[5].y == 0)
                        {
                            if(this.buttons[6].x == 108 && this.buttons[6].y == 0)
                            {
                                if(this.buttons[7].x == -108  && this.buttons[7].y == -108)
                                {
                                    if(this.buttons[8].x == 0 && this.buttons[8].y == -108)
                                    {
                                         cc.log("ok")   
                                         this.tongguang =true
                                    }
                                }
                            }
                        }

                    }
                }
            }
        }
    },

到最后，我们怎么知道拼图是否完成呢？这里面有一个重要的点，那就就是按钮的位置只有9个，并且是固定的，无论怎么移动都无法改变9个固定的点。我们只需要遍历一下，是否所有的拼图都在它本应该对应的那个位置就行了。

整体来说设计不算太难，大概1个下午能做完。这里用的是cococreater游戏引擎，有想要深入探讨学习的，可以关注公众号：诗一样的代码，找我一起学。