Cocos Creator 案例源碼分享二（黑白疊代）

最近閑來無聊，想學習Cocos Creator遊戲程式設計，并把自己在學習過程中的一些案例分享出來，後面會陸續推出一些小遊戲的，由于本人第一次接觸Cocos Creator 和JavaScript，代碼多有疏漏歡迎留言指正。

遊戲畫面展示：

遊戲源碼共享：

https://download.csdn.net/download/hucailai/20166220

遊戲引擎版本：2.3.3

// 學習交流：QQ群：624554876
cc.Class({
    extends: cc.Component,

    properties: {
        RootNode: {
            type: cc.Node,
            default:null,
        },

        smallNode: {
            type: cc.Node,
            default:null,
        },

        Success: {
            type: cc.Label,
            default:null,
        },
    },



    onLoad () {
        this.cellWidth = 50;
        this.cellHeight = this.cellWidth;
        this.lineWidth = 2;
        this.cellCnt = 9;  //9*9格子
        this.frameWidth = 20;
        this.baseX = -(this.cellCnt * this.cellWidth +  (this.cellCnt + 1) * this.lineWidth )/2;
        this.baseY = -(this.cellCnt * this.cellHeight +  (this.cellCnt + 1) * this.lineWidth )/2;

        this.sCellWidth = 25;
        this.sCellHeight = this.sCellWidth;
        this.sLineWidth = 1;
        this.sCellCnt = 9;  //9*9格子
        this.sFrameWidth = 10;
        this.sBaseX = -(this.sCellCnt * this.sCellWidth +  (this.sCellCnt + 1) * this.sLineWidth )/2;
        this.sBaseY = -(this.sCellCnt * this.sCellHeight +  (this.sCellCnt + 1) * this.sLineWidth )/2;

        this.node.on(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
        this.array= new Array()
        this.desArray = new Array()
        this.heap = new Array()

        this.level = 1  // 遊戲難度
    },

    initArray(){
        for (i = 0; i < this.cellHeight; i++){
            this.array[i] = new Array()
            for (j = 0; j < this.cellWidth; j++){
                this.array[i][j] = false
            }
        }
    },

    initDestArray(){
        for (i = 0; i < this.cellHeight; i++){
            this.desArray[i] = new Array()
            for (j = 0; j < this.cellWidth; j++){
                this.desArray[i][j] = false
            }
        }

        for (i = 0; i < 2+this.level*4; i++){
            x = this.random(0, this.cellCnt)
            y = this.random(0, this.cellCnt)
            cc.log("i=" + x + " j=" + y)
            this.onClickArray(this.desArray, true, x, y)
        }

        cc.log("desArray:" + this.desArray)
    },

    onDestroy: function () {
        this.node.off(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
    },

    onMouseDown: function (event) {
        let mouseType = event.getButton();
        if (mouseType === cc.Event.EventMouse.BUTTON_LEFT) {
            // 滑鼠左鍵按下
            let mousePoint = event.getLocation();
            let localPoint = this.RootNode.convertToNodeSpace(mousePoint);

            let j = Math.floor((localPoint.x - this.baseX - this.lineWidth) / (this.cellWidth + this.lineWidth))
            let i = Math.floor((localPoint.y - this.baseY - this.lineWidth) / (this.cellHeight + this.lineWidth))

            if (!(i < 0 || j < 0 || i >= this.cellCnt || j >= this.cellCnt)){
                this.onClick(i, j)
            }
        } 
    },

    onClickArray(array, small, i, j){
        array[i][j] = !array[i][j]
        this.fillCell(i, j, small, array[i][j])

        if ((j+1) < this.cellCnt){
            array[i][j+1] = !array[i][j+1]
            this.fillCell(i, j+1, small, array[i][j+1])
        }

        if ((j-1) >= 0){
            array[i][j-1] = !array[i][j-1]
            this.fillCell(i, j-1, small, array[i][j-1])
        }

        if ((i+1) < this.cellCnt){
            array[i+1][j] = !array[i+1][j]
            this.fillCell(i+1, j, small, array[i+1][j])
        }

        if ((i-1) >= 0){
            array[i-1][j] = !array[i-1][j]
            this.fillCell(i-1, j, small, array[i-1][j])
        }
    },

    onClick(i, j){ // 單擊了i行，j列
        this.Success.node.active = false
        this.onClickArray(this.array, false, i, j)

        // 放到堆棧中以便回退
        pos=[i,j]
        this.heap.push(pos)

        // 檢測是否完成，并重新開始
        if(this.checkFinished()){
            this.Success.node.active = true
            this.restart()
        }
    },

    onBack(){
        // 回退算法就是重複點選上次的位置
        if (this.heap.length > 0){
            var pos = this.heap.pop(pos)
            this.onClickArray(this.array, false, pos[0], pos[1])
        }
    },  
    
    onLevel(sender, level){
        cc.log("Level：" + level)
        if (level == this.level){
            return
        }
        this.level = level

        this.restart()
    },

    drawBackCells(graphics, cellWidth,cellHeight, cellCnt, 
                    lineWidth, frameWidth, baseX, baseY){
        graphics.fillColor = cc.color(255, 255, 255, 255);

        nodeWidth = cellCnt * cellWidth + 
                    (cellCnt + 1) * lineWidth + 
                    2 * frameWidth;
        graphics.fillRect(-nodeWidth/2,-nodeWidth/2,nodeWidth,nodeWidth)

        // 繪制9*9的格子
        graphics.fillColor = cc.color(0, 0, 0, 255);
        for (i =0; i <= cellCnt; i++){
            graphics.fillRect(baseX, baseY + (cellHeight+lineWidth) * i, 
                              cellCnt * cellWidth +  (cellCnt + 1) * lineWidth, 
                              lineWidth)
            graphics.fillRect(baseX + (cellWidth+lineWidth) * i, baseY , 
                              lineWidth,
                              cellCnt * cellHeight +  (cellCnt + 1) * lineWidth)                        
        }
     },

    fillCell(i, j, bSmall, bBlack) {
        graphics = this.graphics
        cellWidth = this.cellWidth
        cellHeight = this.cellHeight
        x = this.baseX + this.lineWidth + j * (this.cellWidth + this.lineWidth)
        y = this.baseY + this.lineWidth + i * (this.cellHeight + this.lineWidth)
        if (bSmall) {
            graphics = this.smallgraphics
            cellWidth = this.sCellWidth
            cellHeight = this.sCellHeight
            x = this.sBaseX + this.sLineWidth + j * (this.sCellWidth + this.sLineWidth)
            y = this.sBaseY + this.sLineWidth + i * (this.sCellHeight + this.sLineWidth)
        }

        graphics.fillColor = cc.color(255, 255, 255, 255);
        if (bBlack){
            graphics.fillColor = cc.color(0, 0, 0, 255);
        }
        
        graphics.fillRect(x, y, cellWidth, cellHeight) 
    },

    checkFinished(){
        for (i = 0; i < this.cellHeight; i++){
            for (j = 0; j < this.cellWidth; j++){
                if (this.array[i][j] != this.desArray[i][j])
                    return false
            }
        }
        cc.log("Finished")
        return true
    },

    restart(){
        this.drawBackCells(this.graphics, this.cellWidth, this.cellHeight, this.cellCnt, 
            this.lineWidth, this.frameWidth, this.baseX, this.baseY);
        this.drawBackCells(this.smallgraphics,  this.sCellWidth, this.sCellHeight, this.sCellCnt, 
                this.sLineWidth, this.sFrameWidth, this.sBaseX, this.sBaseY);
        this.initArray()
        this.initDestArray()
        this.heap.length = 0
    },

    start () {
        this.Success.node.active = false
        this.graphics = this.RootNode.addComponent(cc.Graphics);
        this.drawBackCells(this.graphics, this.cellWidth, this.cellHeight, this.cellCnt, 
                      this.lineWidth, this.frameWidth, this.baseX, this.baseY);
        
        this.smallgraphics = this.smallNode.addComponent(cc.Graphics);
        this.drawBackCells(this.smallgraphics,  this.sCellWidth, this.sCellHeight, this.sCellCnt, 
                        this.sLineWidth, this.sFrameWidth, this.sBaseX, this.sBaseY);

        this.initArray()
        this.initDestArray()
    },

    random : function (lower, upper) {
        return Math.floor(Math.random() * (upper - lower)) + lower; 
    },
});