brython | 笨办法写个连连看-3.地图制作

theme: nico

之前看【码上掘金】，有位老哥用文言文写了一个【连连看】，正巧那时候在学习brython，就想着，能不能用brython也来写一个【连连看】，于是乎，你们就看到了这个项目了。

https://code.juejin.cn/pen/7159814244257497096

如果还不了解brython是什么？ 可以参考下这篇文章：

brython | 初始化项目：https://juejin.cn/post/7153640242145296421

如果还没了解本系列之前的章节，可以参考下如下文章：

brython | 笨办法写个连连看-1.核心功能实现：https://juejin.cn/post/7163275811594698759

brython | 笨办法写个连连看-2. 监听鼠标事件：https://juejin.cn/post/7167024129814560804

生成的地图如何保证成双成对

【连连看】作为一种棋牌游戏，连连看棋盘属性值都是成双成对出现的，以此来保证棋盘上所有的棋子都能够相连。所以说，制作连连看的第一步是如何生成成对的棋子。

在项目中，棋盘长和宽都设置为一样，且必须是偶数，这样做的目的是可以生成棋子池，而后再制作地图的时候，再从池子中随机拿出一个来放到地图上，这样的话，最后生成的地图上的棋子都是成对出现的。

比如，我们有一个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样式等，整个效果也已经放到了【码上掘金】中，链接如下：

https://code.juejin.cn/pen/7170673552591421471

总结

在连连看中，制作地图非常简单，由于brython操作table已经在之前有所赘述，所以这里直接拿来用了，没有过多的解释，若想看brython如何操作table不妨翻翻之前的文章。所谓的地图制作，在项目中是直接使用list来生成地图，而后渲染给页面仅此而已，拨开了一层纸，就觉得好像也不是很难了对吧。

快动动你的小手指来试试吧。

本文正在参加「金石计划 . 瓜分6万现金大奖」