使用brython做个迷宫游戏-2：制作地图

本篇是使用brython做个迷宫游戏的第二篇，第一篇我们已经讲述了迷宫的规划，具体文章如下:

使用brython做个迷宫游戏-1：规划/技术栈/创建项目： www.yuque.com/honghong-sn…

本篇文章的核心点为熟悉brython如何操作table。

brython如何操作table

我们知道，html中关于表格来说，核心标签为<table>、<tr>、<th> 以及 <td>。

话不多说，我们可以看如下案例

假设有这样一个html代码，如下:

其渲染出来的表格大概是这样的：

如上代码，相信很多学习过html的基本上都会，那么换个角度，如果使用brython来画表格，你会了么？

其实呀，在brython有，有这几个标签，分别为:

• browser.html.TABLE
• browser.html.TR
• browser.html.TH
• browser.html.TD

我们可以将其编码为:

import browser
titles = ["","数学","语文","历史"]
datas = [
  ["小李",100,20,80],
  ["小王",90,30,100]
]
# 创建一个表格
tb = browser.html.TABLE(border="1")
# 写入标题
tb <= browser.html.TR(browser.html.TH(x) for x in titles)
# 写入数据
for item in datas:
  tb <= browser.html.TR(browser.html.TD(x) for x in item)
# 将表格扔上去
browser.document <= tb

上述代码意为，我们先创建2个列表，一个为标题，一个为数据，作为元数据使用。

紧接着，使用browser.html.TABLE创建了一个表格，而后遍历titles和item将其追加到tb中，最后将tb放到页面上来。

这里有一条语句: tb <= browser.html.TR(browser.html.TH(x) for x in titles)，这个是python的语法糖，本身返回的是python迭代器，和下面语法是同样效果的:

tr = browser.html.TR()
for x in titles:
  tr += browser.html.TH(x)
tb <= tr

语法问题，不要太纠结，不重要的。

这个demo我也已经放在了【码上掘金】上，可以尝试运行下。

code.juejin.cn/pen/7156038…

迷宫地图元数据制作

为了游戏简单，我们一般使用长宽都一致的数组，障碍我们将其设置为0，可以走动我们将其设置为1。

如上定义，我们可以在表格中，模拟一个较为简单的地图 (8*8) 出来，图示如下:

最后，再将字体显示给关闭掉，我们就能得到一副简单的地图，图示如下：

其实地图元数据我们是存在python的二维数组中，展示的话，是将二维数组重定向页面上来确定的。

那我们按照这个给1:1创建一个二维数组即可，代码如下:

如上我们定义了一个简单的8*8的二维数组，其数据值和图示上一致。

如上述所述的0标记为障碍，1标记为可以走动，我们就可以在底层来检索二维数组来判断其值。

使用brython渲染表格

上述本质上已经定义了元数组，我们要渲染一下表格才行；

如上所述，我们表格中的0为障碍；1为道路，可走动，我们需要如何才能将为0的给染成绿色呢？

可以通过css样式来判断，我们可以为表格定义一些css样式，如下:

如果可以将表格为0的样式，将其class给定义为hinder，那不是可以解决这个问题了么？

所以说，现在的问题变为，如何在brython中修改class样式了，而通过官网得知，我们再其创建td的时候，若传入一个className即可定义class属性，于是乎，我们渲染表格代码如下:

渲染出来的效果如下:

总结

本篇，我们通过制作迷宫地图的案例，学习了使用brython如何操作表格，你可能很好奇，为什么browser.html库有些属性名和html一致，有些又不一致，例如: table的border属性、以及我们学习的id属性。 有些又不一样，例如: class在brython中被改为了className，这是为什么呢？ 这是因为class在python中是类的关键字。 我们表格地图写完了。

聪明的你，能使用brython修改下代码，标注上起始点(红色)和终点(蓝色)么？

有意思吧，快动动你的小手试试吧。