使用brython做个迷宫游戏-2：制作地图
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
本篇是使用
brython做个迷宫游戏的第二篇，第一篇我们已经讲述了迷宫的规划，具体文章如下:使用brython做个迷宫游戏-1：规划/技术栈/创建项目： www.yuque.com/honghong-sn…
本篇文章的核心点为熟悉brython如何操作table。
brython如何操作table
我们知道，html中关于表格来说，核心标签为<table>、<tr>、<th> 以及 <td>。
话不多说，我们可以看如下案例
假设有这样一个html代码，如下:
其渲染出来的表格大概是这样的：
如上代码，相信很多学习过html的基本上都会，那么换个角度，如果使用brython来画表格，你会了么？
其实呀，在brython有，有这几个标签，分别为:
browser.html.TABLEbrowser.html.TRbrowser.html.THbrowser.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我也已经放在了【码上掘金】上，可以尝试运行下。
迷宫地图元数据制作
为了游戏简单，我们一般使用长宽都一致的数组，障碍我们将其设置为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修改下代码，标注上起始点(红色)和终点(蓝色)么？
有意思吧，快动动你的小手试试吧。
浙公网安备 33010602011771号