生成的地图如何保证成双成对
【连连看】作为一种棋牌游戏，连连看棋盘属性值都是成双成对出现的，以此来保证棋盘上所有的棋子都能够相连。所以说，制作连连看的第一步是如何生成成对的棋子。
在项目中，棋盘长和宽都设置为一样，且必须是偶数，这样做的目的是可以生成棋子池，而后再制作地图的时候，再从池子中随机拿出一个来放到地图上，这样的话，最后生成的地图上的棋子都是成对出现的。
比如，我们有一个10*10的棋盘，由于想让棋子可以从最外层勾选，所以最外层是空的，所以池子生成8*8就可以了。
如上用python来写的话，可以这样来编写:
count = 10 maps = [] tempList = [] for i in range(count - 2): for j in range(count - 2): tempList.append(j) maps.append(tempList) tempList = []
若我们输出maps的话，我们可以得到这样的信息：
这样的话，就能够保住即将生成的地图是成双成对出现的了。
连连看棋盘制作
上述保住了棋子是成双成对出现的了，但是在项目中，连连看最外层是空的，中间才是棋子，效果图示如下：
在python中，我们可以使用随机函数randint来对现有池子进行随机，而后再将池子中的棋子放到棋盘上即可，最外层可以使用-1来标识，代码可以编写如下：
from random import randint count = 10 maps = [] tempList = [] # 棋子池 for i in range(count - 2): for j in range(count - 2): tempList.append(j) # 从棋子中取出随机值 for i in range(count): tempMap = [] for j in range(count): if i == 0 or i == (count - 1) or j == 0 or j == (count - 1): tempMap.append(-1) else: ids = randint(0, len(tempList) - 1) tempMap.append(tempList[ids]) del tempList[ids] maps.append(tempMap)
代码运行后，输出maps结果如下：
渲染到地图上
上述其实我们已经制作好一个连连看地图了，但是都是存在python的列表中，数据还没有渲染给前端页面，那么要如何渲染呢？这就需要brython了，通过上述可以看到，连连看棋盘效果是这样的：
但是到目前为止，我们的效果是这样的：
2者如何相关联呢？在项目中，我们使用了一个列表来存储emoji索引，比如，需要的emoji是8个，所以我们定义一个数组，值为各种emoji：
emojiList = ["🏝️", "🐭", "🐷", "🐲", "🐶", "🍒", "🐳","🐯"]
在渲染到页面上的时候，用maps的值作为emoji的下标就可以了，代码编写如下：
from browser import html from browser import document maps = [] # 上述生成的列表 emojiList = ["🏝️", "🐭", "🐷", "🐲", "🐶", "🍒", "🐳","🐯"] tb = html.TABLE(id="tb") tb.clear() for i in range(len(maps)): tr = html.TR() for j in range(len(maps)): td = html.TD() if -1 == maps[i][j]: td.className = "blank" if -1 != maps[i][j]: ss = html.BUTTON(emojiList[maps[i][j]]) ss.className = "pressbtn" ss.id = [i, j] td <= ss tr <= td tb <= tr document <= tb
上述代码，为了有点击效果，所以增加了按钮来放到td中，为了更好的展示效果，所以我们给值为-1的格子定义的class为blank，其余的均为pressbtn。
结合一些css样式等，整个效果也已经放到了【码上掘金】中，链接如下：
总结
在连连看中，制作地图非常简单，由于brython操作table已经在之前有所赘述，所以这里直接拿来用了，没有过多的解释，若想看brython如何操作table不妨翻翻之前的文章。所谓的地图制作，在项目中是直接使用list来生成地图，而后渲染给页面仅此而已，拨开了一层纸，就觉得好像也不是很难了对吧。
快动动你的小手指来试试吧。
