Cocos creator从零开始实现俄罗斯方块(二) 绘制方块到地图,展示下一个方块

上一篇已经实现了下一个方块展示的功能,接下来就进一步的来实现更多的功能吧

绘制方块到网格中

我们现在可以随机的获取到生成的方块了,生成了还得绘制到面板(gameBG)中啊

1. 首先我们需要让当前方块和下一个模块都可见啊对于gameBG脚本能够引用并控制

这里用到了export和require来实现
定义全局模块 overall.js

//this modle store all overall variable
module.exports = {
    current_diamond:null,//current diamond
    next_diamond:null,//next diamond
    isNext:false,//if the current diamond finish
};

2. 在next和line中引用这个模块,并在next.js中初始化
   next.js

var overall=require("overall");

cc.Class({

    ...省略代码见前面...
    
    onLoad () {
       overall.current_diamonds=this.current_diamond;
       overall.next_diamond=this.next_diamond;
       overall.isNext=this.isNext;
    },

    start(){
        this.showNext(); 
    },
    update (dt) {
        if(overall.isNext===true){
            overall.isNext=false;
            overall.current_diamond=overall.next_diamond;
            this.showNext();
            overall.next_diamond=this.getDiamonds();//获取随机方块;  
        }
    },  
});

line.js

var overall=require("overall");
cc.Class({
    update (dt) {
        t+=dt;
        if(t>3){//假设3秒钟走完一个方块
            t=0;
            overall.isNext=true;
            console.log("当前:"+overall.current_diamond);
            console.log("下一个:"+overall.next_diamond);  
        }
        this.drawGrid();
    },
    //draw grid
    drawGrid:function(){
        var ctx = this.node.getComponent(cc.Graphics);
        for (let index = 0; index < 16; index++) {
            ctx.moveTo((index-8)*40,320);
            ctx.lineTo((index-8)*40,-320);
            ctx.stroke();
            ctx.moveTo(-320,(index-8)*40);
            ctx.lineTo(320,(index-8)*40);
            ctx.stroke();
        };
    },
    //show this diamond
    showDiamond:function(){
		... 待实现...
    }
});

运行效果

3. 下面就开始真正的向网格画板上面绘制了

我们的地图是16*16的那么我们在绘制的时候就需要一个数组来存储这些信息,就像下面这样

 map:[
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
        [7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
    ],//this is game map

之前我才用的是绘制矩形的方式来实现棋子,这样就有点麻烦我觉得,因为Graphics的功能不是很多,做起来比较麻烦
我打算改成代码动态的生成单色的精灵帧来实现
我用到了预制体,然后在创建的时候增加bg节点中的子节点,然后修改位置,然后在后面的帧循环中刷新颜色值就可以了
代码实现

 onLoad () {
        //加载资源的时候来创建预制体的实例
        for (let i = 0; i < overall.map.length; i++) {
            for (let j = 0; j < overall.map.length; j++) {
                console.log("u");
                var node = cc.instantiate(this.diamond);
                var color = cc.Color.BLACK;
                node.color=color.fromHEX(overall.diamonds_color[overall.map[i][j]]); 
                node.setPosition(i*40-320,-(j*40-320));
                node.name=i+""+j;
                this.node.addChild(node);
            }   
        }
    },
    update (dt) {
        //不断的根据地图数组中的数据更新节点的颜色
        for (let i = 0; i < overall.map.length; i++) {
            for (let j = 0; j < overall.map.length; j++) {
                var node = this.node.getChildByName(i+""+j);
                var color = cc.Color.BLACK;
                node.color=color.fromHEX(overall.diamonds_color[overall.map[i][j]]); 
            }   
        }
    },

(涉及的部分基础知识就不做一 一介绍了)
运行效果

到这里我们就实现了地图的绘制,下面就是游戏逻辑的实现了,地图的内容全部取决于map中储存的二维数组

实现绘制

我们现在要考虑的就是地图中二维数组的值的控制了,只要数组中的值改变地图也就会马上刷新,
我们也获取到了当前方块的信息,就需要实现游戏的逻辑了

1. 我们需要把这个当前的方块弄到地图数组中去

这样我们才可以看到我们当前的方块

代码实现:

 //我们需要绘制出当前的方块到网格中,只需要更改数组中的值就行了
    showDiamond:function(){
        //获取当前方块的位置组成
        var pos=overall.current_diamond[2];
        //遍历这个数组
        if(pos.length==4){
            for (let i = 0; i < pos.length; i++) {
                overall.map[i+6][0] = pos[i];
            }
        }else{
            for (let i = 0; i < pos.length; i++) {
                for (let j = 0; j < pos[i].length; j++) {
                    overall.map[i+6][j] = pos[i][j];
                    console.log(pos[i][j])
                }
            }
        }
    },

效果预览:

由于是边做边写的,具体的细节就不多做介绍,主要是介绍思路,分多篇来写方便按步骤解读,另外也不是一次性做出来的,每一篇记录的就是每一天的进度

如有不懂欢迎留言(基础的还是建议多查阅官方文档)

处于各种原因,学习开发被搁置了,所以后面就没有继续弄了,之前的项目也丢失了.就不再出后面的内容了,我会尽量在重新发布新的相关俄罗斯方块的实现,但是前面更新了的内容也可借鉴一下,更了解游戏引擎的运作机制.