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

简介: 使用brython做个迷宫游戏-2:制作地图

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

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

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




brython如何操作table


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


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

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

image.png


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

image.png

如上代码,相信很多学习过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创建了一个表格,而后遍历titlesitem将其追加到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) 出来,图示如下:

image.png


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

image.png



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

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

image.png

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

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



使用brython渲染表格


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

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

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

image.png


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

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

image.png


渲染出来的效果如下:

image.png



总结


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


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


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








相关文章
|
机器学习/深度学习 自然语言处理 算法
在Python中进行自然语言处理(NLP)的文本预处理
在Python中进行自然语言处理(NLP)的文本预处理
317 1
|
计算机视觉 Python
OpenCV完成面部情绪识别
OpenCV完成面部情绪识别
343 0
|
5月前
|
机器学习/深度学习 人工智能 算法
破解生成式AI认知边界:框架思维引擎如何重塑产业智能化未来
该内容深入解析了核心技术架构,涵盖思维链强化系统(DTT)、认知框架建模体系和实时纠偏算法体系。DTT通过多级问题拆解、混合精度推理及分布式验证,大幅提升复杂问题处理能力;认知框架结合知识图谱与逻辑推理,实现精准医疗诊断等应用;实时纠偏算法则通过多级验证机制保障事实与逻辑准确性。整体架构分应用层、框架层和基础层,支持高效、可信的跨领域适配。技术创新体现在混合计算加速、持续学习机制等方面,显著优于传统模型,在事实准确性、逻辑连续性及响应速度上优势明显。
215 28
|
9月前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
vr&ar 开发者 C++
游戏开发丨基于Panda3D的迷宫小球游戏
游戏开发丨基于Panda3D的迷宫小球游戏
424 4
|
机器人 数据中心
几个AC/DC电源模块的工业应用场景案例
几个AC/DC电源模块的工业应用场景案例
几个AC/DC电源模块的工业应用场景案例
|
11月前
|
机器学习/深度学习 自然语言处理 运维
探索深度学习在图像识别中的最新进展
探索深度学习在图像识别中的最新进展
|
存储 NoSQL Linux
【MongoDB】下载安装、指令操作
【MongoDB】下载安装、指令操作
455 1
|
负载均衡 NoSQL 应用服务中间件
搭建高可用及负载均衡的Redis
【7月更文挑战第10天】
601 1
|
12月前
|
存储 人工智能 安全
Gartner预测2025年IT支出将大幅增加
Gartner预测2025年IT支出将大幅增加