使用brython做个迷宫游戏-1:规划/技术栈/创建项目

简介: 使用brython做个迷宫游戏-1:规划/技术栈/创建项目

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情


概述


与其枯燥的讲述brython知识点,还不如将其带入到一个项目中;只要思路正确,面向搜索引擎也能写一个项目出来。

其实你看到这篇文章的时候,项目已经做出来,并且提交了,游戏链接为:

code.juejin.cn/pen/7154683…

所以说,关于使用brython做一个简单的迷宫游戏,这其实是一个“事后诸葛亮”的文章,哈哈。

文章开头前还是说一句,前端大佬不要笑话,运维小弟献丑了。




游戏玩法


迷宫游戏简要

所谓的迷宫游戏,无非就是生成一个地图,需要用游戏提供的操作方式,走出迷宫,假设我们有一个地图如下:

image.png

其中,我们的初始值在红点位置,我们需要正常的走到蓝点位置;其中绿色的障碍物,白色是允许移动的。


游戏预计提供2种玩法,分别是 简单模式 和 复杂模式。



简单模式


所谓的简单模式,就是生成一个地图,能够看到地图的全貌,而后让用户通过键盘等方式,操控走出迷宫,例如其中一个地图如下,我们勾画下需要走的路径:

image.png



复杂模式


所谓的复杂模式,我们想在地图上做文章,即: 增加一个视野,仅能看到红点以外范围为n的数值,当挪走的时候,视野也会跟着走。


若n为7的时候,我们得到的游戏图示为:

当游戏开始时,看到的视野

image.png

当玩家挪走到中间的时候,得到的视野为

image.png


通过这种方式,来增加游戏的难度和可玩度。



所使用的技术


做我们想做这样一个简单的迷宫游戏,我们需要的步骤为:


  • 绘制地图
  • 控制游戏红点挪动
  • 控制其红点走向/碰壁处理
  • 结束游戏

游戏的步骤如上,其中,该游戏的技术栈为:

  • 得会最简单的python语法,例如: forif...else...等。
  • brython操作table
  • brython
  • brython监听键盘事件
  • brython控制html标签的属性值,例如: idclass等。

那我们就开始了咯?



使用【码上掘金】项目


其实关于这个创建文档,掘金官方已经提供了,链接为: github.com/xitu/jcode-…

找到python就可以了。

image.png

这里带着来做一下,因为创建python项目,还挺难的。

这里,我已经创建好了一个python初始化项目,你可以直接Fork一下我的这个项目直接用即可,就不用再自己创建python项目了。

code.juejin.cn/pen/7155678…


在【码上掘金】新建一个新的代码片段


image.png

选择script右边的设置

image.png

而后以此增加一下资源

https://cdn.jsdelivr.net/npm/jcode-tools

https://cdn.jsdelivr.net/npm/brython@3/brython.min.js

https://cdn.jsdelivr.net/npm/brython@3/brython_stdlib.js

image.png


html中键入如下代码

image.png


最后再将script选择为custom, 写入扩展语言json标签,就可以写python了,例如:

image.png


而后点击运行,若出现了如下页面,就正常项目床架成功了。

image.png


总结


其实写一个如案例所述的迷宫游戏,难度不大; 关键是使用brython来写,就有点意思了。哦,对了,我在想,应该没有人用brython在公司写项目吧? 那不是一个明智的选择。好了,想学习如何使用brython写一个简单的迷宫游戏么,那就动动你的小手,先从创建项目开始吧。



相关文章
|
10月前
|
缓存 前端开发 JavaScript
componentWillMount()方法有什么用
componentWillMount() 是 React 组件生命周期中的一个方法,在组件首次渲染之前调用。可以用来进行初始化操作,如设置状态或加载数据,但不建议在此方法中执行复杂的异步操作。注意,此方法在 React 16.3 版本后已被标记为不安全,建议使用替代方法。
|
2月前
|
人工智能 Nacos 开发者
手把手教你搭建MCP服务器
Model Context Protocol(MCP)正成为AI智能体连接外部工具的主流标准。本文详解两种搭建方案,助你构建专属AI工具扩展引擎,实现工具调用的标准化与高效集成。
|
12月前
|
JavaScript C++
基于QtQuick的QCustomPlot实现
本文介绍了如何在QtQuick中实现基于QCustomPlot的图表绘制,包括效果图展示、C++和QML方面的实现代码、注意事项以及应用场景。作者提供了源码下载链接,方便读者学习和使用QCustomPlot进行QtQuick应用程序中的图表绘制。
327 4
基于QtQuick的QCustomPlot实现
|
8月前
|
JSON API 数据格式
1688 满足跨境业务需求而提供的一组 API 接口
1688跨境属性接口系列是1688开放平台为满足跨境业务需求提供的API接口,核心接口1688.item_get用于查询商品的跨境属性,帮助开发者和商家获取关键信息,更好地开展跨境贸易。公共参数包括key、secret等,支持多种返回格式,默认json。Python示例代码展示了如何调用该接口获取海关编码、税率等信息。使用步骤包括注册、构建请求、发送请求和处理响应。
|
11月前
|
开发框架 .NET 测试技术
了解 .NET 9 中的新 Microsoft.AspNetCore.OpenApi 包,并将其与 NSwag 和 Swashbuckle.AspNetCore 进行比较。
本文介绍了 `.NET 9` 中新推出的 `Microsoft.AspNetCore.OpenApi` 包,该包旨在为 `ASP.NET Core` 应用程序生成 `OpenAPI` 文档。文章对比了 `NSwag` 和 `Swashbuckle.AspNetCore` 两大现有库,探讨了新包的优势和不足,特别是在性能和功能方面。尽管新包在某些方面尚不及成熟库完善,但其对原生 `AoT` 编译的支持和未来的扩展潜力使其成为一个值得考虑的选择。文章还提供了详细的性能测试数据和优化建议,适合对 `OpenAPI` 文档生成感兴趣的开发者阅读。
566 6
了解 .NET 9 中的新 Microsoft.AspNetCore.OpenApi 包,并将其与 NSwag 和 Swashbuckle.AspNetCore 进行比较。
|
11月前
|
网络协议 Linux 网络性能优化
Linux C/C++之TCP / UDP通信
这篇文章详细介绍了Linux下C/C++语言实现TCP和UDP通信的方法,包括网络基础、通信模型、编程示例以及TCP和UDP的优缺点比较。
380 0
Linux C/C++之TCP / UDP通信
|
机器学习/深度学习 算法
深度学习中的模型优化策略
【8月更文挑战第24天】在深度学习的海洋中,模型优化犹如航行者调整帆船,以期达到最快的速度和最准的航线。本文将带你领略深度学习模型优化的魅力,从梯度下降法到高级优化器,再到超参数调整,我们将一起揭开模型性能提升的秘密。你将了解到如何通过合理选择学习率、使用动量技术、以及应用正则化方法来提高模型的泛化能力。准备好,让我们启航,探索深度学习模型优化的奥秘!
|
负载均衡 安全 Java
Spring Cloud中的服务网格实现
Spring Cloud中的服务网格实现
|
Java 数据库连接 mybatis
在Spring Boot应用中集成MyBatis与MyBatis-Plus
在Spring Boot应用中集成MyBatis与MyBatis-Plus
320 5
ADI
|
前端开发
[project]element-ui 按需加载自定义主题姿势
[project]element-ui 按需加载自定义主题姿势
ADI
478 0