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

網(wǎng)上看到非常多人寫(xiě)的連連看，都沒(méi)有畫(huà)連線的實(shí)現(xiàn)。事實(shí)上要話連線挺簡(jiǎn)單的。cocos2d-x 提供了一個(gè)非常方便的繪圖形的類(lèi)。DrawNode。這個(gè)類(lèi)封裝了非常多畫(huà)線條，多邊形的方法。非常方便，非常好用。非常強(qiáng)大。

DrawNode的使用非常easy，我使用一個(gè)成員變量來(lái)保存這個(gè)DrawNode，由于會(huì)一直反復(fù)使用。

mDraw = DrawNode::create(); addChild(mDraw, 1000);

它的使用跟精靈一樣，create出來(lái)以后，add到當(dāng)前層。

void GameScene::drawLine() {// 畫(huà)線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);}// 隨機(jī)給線條一個(gè)顏色auto color = CCRANDOM_0_1();// 循環(huán)畫(huà)線段，僅僅有線段能夠設(shè)置線條寬度for (int i = 0 ; i < mPath.size(); i++) {if ( i > 0) {mDraw->drawSegment(vecs[i-1], vecs[i], 5, Color4F(color, color, color, 1));}}// 連通的兩個(gè)圖標(biāo)相應(yīng)的地圖數(shù)組置0Vec2 p1 = mPath.front();mMap[(int)p1.x][(int)p1.y] = 0;Vec2 p2 = mPath.back();mMap[(int)p2.x][(int)p2.y] = 0;// 刪掉線段的頂點(diǎn)數(shù)組delete []vecs;// 清除連通的圖標(biāo)。同一時(shí)候清除路徑點(diǎn)scheduleOnce(SEL_SCHEDULE(&GameScene::clearMatched), 0.2);}}

前面講了。我們將兩個(gè)圖標(biāo)連通的路徑關(guān)鍵點(diǎn)存在了一個(gè)容器mPath里面。至少會(huì)有2個(gè)點(diǎn)，最多4個(gè)點(diǎn)。

然后我們用DrawNode里面的drawSegment（）函數(shù)來(lái)畫(huà)連線。

這個(gè)函數(shù)是畫(huà)線段的，就是兩個(gè)點(diǎn)一條線，為什么要用這個(gè)函數(shù)。DrawNode里面另一個(gè)函數(shù)能夠用來(lái)畫(huà)多角形，原型例如以下：

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

這個(gè)函數(shù)參數(shù)有個(gè)bool closePolygon，能夠用來(lái)畫(huà)閉合或開(kāi)放多角形，簡(jiǎn)直一步到位了。可是它不能設(shè)置線條粗細(xì)，畫(huà)出來(lái)的線條非常細(xì)，默認(rèn)的寬度，不太合適。

然后我採(cǎi)用了畫(huà)線段的函數(shù)。將路徑里面的點(diǎn)，循環(huán)取出來(lái)。兩個(gè)點(diǎn)畫(huà)一個(gè)線段。原型：

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

第一個(gè)參數(shù)。開(kāi)始頂點(diǎn)，第二參數(shù)，目的頂點(diǎn)，第三個(gè)參數(shù)。線條寬度。第四個(gè)參數(shù)。線條顏色。

畫(huà)完連線以后呢，將兩個(gè)圖標(biāo)的數(shù)組置0，表示這里應(yīng)該是消除掉了，是空格。

然后刪除掉頂點(diǎn)數(shù)組，然后調(diào)清理圖標(biāo)的函數(shù)。

這個(gè)連連看的基本功能就完畢了。

后面還有倒計(jì)時(shí)。自己主動(dòng)提示兩個(gè)功能。那么一個(gè)完整的連連看就完畢了。

轉(zhuǎn)載于:https://www.cnblogs.com/mfrbuaa/p/5176252.html

總結(jié)

以上是生活随笔為你收集整理的cocos2d-x3.6 连连看连通画线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。