我的博客：http://blog.csdn.net/dawn_moon

网上看到非常多人写的连连看，都没有画连线的实现。事实上要话连线挺简单的。cocos2d-x 提供了一个非常方便的绘图形的类。DrawNode。这个类封装了非常多画线条，多边形的方法。非常方便，非常好用。非常强大。

DrawNode的使用非常easy，我使用一个成员变量来保存这个DrawNode，由于会一直反复使用。

mDraw = DrawNode::create();

addChild(mDraw, 1000);

它的使用跟精灵一样，create出来以后，add到当前层。

void GameScene::drawLine()

{

    // 画线

    if (mPath.size() >= 2) {

        Vec2 *vecs = new Vec2[mPath.size()];

        for (int i = 0 ; i < mPath.size(); i++) {

            vecs[i] = indextoScreen(mPath.at(i).x, mPath.at(i).y);

        }

        // 随机给线条一个颜色

        auto color = CCRANDOM_0_1();

        // 循环画线段，仅仅有线段能够设置线条宽度

        for (int i = 0 ; i < mPath.size(); i++) {

            if ( i > 0) {

                mDraw->drawSegment(vecs[i-1], vecs[i], 5, Color4F(color, color, color, 1));

            }

        }

        // 连通的两个图标相应的地图数组置0

        Vec2 p1 = mPath.front();

        mMap[(int)p1.x][(int)p1.y] = 0;

        Vec2 p2 = mPath.back();

        mMap[(int)p2.x][(int)p2.y] = 0;

        // 删掉线段的顶点数组

        delete []vecs;

        // 清除连通的图标。同一时候清除路径点

        scheduleOnce(SEL_SCHEDULE(&GameScene::clearMatched), 0.2);

    }

}

前面讲了。我们将两个图标连通的路径关键点存在了一个容器mPath里面。至少会有2个点，最多4个点。

然后我们用DrawNode里面的drawSegment（）函数来画连线。

这个函数是画线段的，就是两个点一条线，为什么要用这个函数。DrawNode里面另一个函数能够用来画多角形，原型例如以下：

void drawPoly(const Vec2 *poli, unsigned int numberOfPoints, bool closePolygon, const Color4F &color);

这个函数參数有个bool closePolygon，能够用来画闭合或开放多角形，简直一步到位了。可是它不能设置线条粗细，画出来的线条非常细，默认的宽度，不太合适。

然后我採用了画线段的函数。将路径里面的点，循环取出来。两个点画一个线段。原型：

void drawSegment(const Vec2 &from, const Vec2 &to, float radius, const Color4F &color);

第一个參数。開始顶点，第二參数，目的顶点，第三个參数。线条宽度。第四个參数。线条颜色。

画完连线以后呢，将两个图标的数组置0，表示这里应该是消除掉了，是空格。

然后删除掉顶点数组，然后调清理图标的函数。

这个连连看的基本功能就完毕了。

后面还有倒计时。自己主动提示两个功能。那么一个完整的连连看就完毕了。