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

这一节来讲地图初始化实现。

连连看地图初始化有非常多实现方式，大概会有下面几种：

1. 每一格的位置随机取图片放上去
2. 随机取图片放到随机的位置上去
3. 把图片铺满地图。随机打乱位置

我们採用第三种方式。

要注意的是。为了保证最后全部的图片都被消掉，那么全部的图片都要是偶数个。我们採用逐格绘制。每次放两张同样的图片，铺满地图以后，随机打乱。

初始例如以下：

然后随机打乱就能够了，注意仅仅随机打乱非零的位置。

代码里面怎样实现呢。非常easy。

定义一个二维数组。地图每一格相应一个值。 其值为0表示是一个空格，其它数字就是图片的id。
数组初始化都是0。然后遍历一遍，四个边框还是零，里面的位置按图片id，成对赋值。

我把地图数组赋值和图片绘制分成两部分，先初始化地图数组。然后再画棋盘。看代码：

void GameScene::initMap()
{// 这里x用来控制地图数组的每格的值，y用来控制两次反转。即每两个格标记同一个值int x = 1;int y = 0;// 数组下标从0開始。这里从1開始遍历，那么最外面一圈就是0不变for (int i = 1; i < xCount - 1; i++) {for (int j = 1; j < yCount - 1; j++) {// 地图数组赋值mMap[i][j] = x;// y控制反转。x控制每格值添加。增大到图片总数后从再1開始递增if (y == 1) {x++;y = 0;if ( x == iconCount) {x = 1;}}else{y = 1;}}}change();drawMap();}

上面的 change（）函数就是随机打乱地图数组，drawMap（）函数就是绘制棋盘，讲地图数组相应的图标绘制出来。

接下来看下change（）函数：

// 随机改变一下棋局位置
void GameScene::change()
{// 随机种子srand((unsigned int)time(NULL));// 暂时变量，用来交换两个位置的数据int tempX, tempY, tempM;// 遍历地图数组，随机交换位置for (int x = 1; x < xCount - 1 ; x++)for (int y = 1; y < yCount - 1; y++) {tempX = 1 + (int)(CCRANDOM_0_1() * (xCount - 2));tempY = 1 + (int)(CCRANDOM_0_1() * (yCount - 2));tempM = mMap[x][y];mMap[x][y] = mMap[tempX][tempY];mMap[tempX][tempY] = tempM;}
}

非常easy是吧，不说了。

接着看drawMap（）函数：

void GameScene::drawMap()
{// 绘制棋盘上精灵for (int x = 0; x < xCount; x++) {for (int y = 0; y < yCount; y++) {if (mMap[x][y] > 0) {char iconName[64] = {0};// 格式化图片名sprintf(iconName, "%d.png", mMap[x][y]);auto position = indextoScreen(x, y);// 全部图片已经加到帧缓存，这里直接用名字取一帧。创建一个精灵auto icon = Sprite::createWithSpriteFrame(SpriteFrameCache::getInstance()->getSpriteFrameByName(iconName));
//                icon->setAnchorPoint(Vec2(0, 0));icon->setPosition(position);// 设置一个tag，方便兴许识别点击的是那个图标int tag = (yCount - 2) * ( x - 1 ) + y;// 这是Z序和tag值，Z序设置大一些确保图标在其它精灵的前面addChild(icon, 100, tag);}}}
}

代码都加了非常多凝视。应该非常好理解。只是里面有一行凝视掉的代码，是设置锚点的。精灵的默认锚点是（0.5。0.5），也就是中心位置。可是我一開始想把它设为左下角，这样地图铺起来就比較直观。

做到后来做点击连线的时候发现从中间连线会非常麻烦，所以就把这行凝视掉了，直接用默认锚点。

这样做的话，后面的屏幕坐标和地图数组坐标转换就要做一下处理了。后面再讲。

好了。到这里地图就绘制完毕了。