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; 
    },
});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Cocos Creator是一款流行的游戏开发引擎,它拥有丰富的功能和强大的性能,适用于各种类型的游戏开发。城建游戏是一种非常受欢迎的游戏类型,它允许玩家建设和管理自己的城市。 Cocos Creator城建源码是基于Cocos Creator引擎开发的城建游戏的源代码。这个源码提供了一个完整的城市建设游戏的基础框架,包含了各种功能和模块,如建筑物的放置和升级、资源的收集和管理、任务系统、UI设计等。 通过使用这个城建源码,开发者可以快速搭建一个城建游戏的基本框架,并在此基础上进行自定义和扩展。源码提供了各种常用的城建游戏功能的实现方法和示例,开发者可以根据自己的需求进行修改和优化。 Cocos Creator城建源码的设计和实现通常遵循一些常见的游戏开发原则,如组件化设计、面向对象编程、事件驱动等。这些原则使得源码的结构清晰、可扩展性强,开发者可以根据自己的实际情况进行修改和扩展。 使用Cocos Creator城建源码可以大大加快城建游戏的开发过程,减少开发的时间和成本。同时,Cocos Creator也提供了丰富的文档和社区支持,开发者可以在开发过程中获得帮助和解决问题。 总之,Cocos Creator城建源码是一个可以帮助开发者快速搭建城建游戏的基础框架,它提供了丰富的功能和示例,开发者可以根据自己的需求进行修改和扩展。使用这个源码可以加快游戏开发的速度,并且可以通过Cocos Creator强大的性能和功能来提升游戏的质量。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hucailai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值