使用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写一个简单的迷宫游戏么,那就动动你的小手,先从创建项目开始吧。



相关文章
|
3月前
|
前端开发 Java
表白墙/留言墙 —— 初级SpringBoot项目,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
文章通过一个表白墙/留言墙的初级SpringBoot项目实例,详细讲解了如何进行前后端开发,包括定义前后端交互接口、创建SpringBoot项目、编写前端页面、后端代码逻辑及实体类封装的全过程。
111 3
表白墙/留言墙 —— 初级SpringBoot项目,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
|
3月前
|
前端开发 Java 数据库连接
表白墙/留言墙 —— 中级SpringBoot项目,MyBatis技术栈MySQL数据库开发,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
本文是一份全面的表白墙/留言墙项目教程,使用SpringBoot + MyBatis技术栈和MySQL数据库开发,涵盖了项目前后端开发、数据库配置、代码实现和运行的详细步骤。
88 0
表白墙/留言墙 —— 中级SpringBoot项目,MyBatis技术栈MySQL数据库开发,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的鲸落文化线上体验馆的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的鲸落文化线上体验馆的详细设计和实现(源码+lw+部署文档+讲解等)
|
运维 前端开发 Python
brython | 笨办法写个连连看-1.核心功能实现
brython | 笨办法写个连连看-1.核心功能实现
138 1
|
前端开发
前端学习笔记202303学习笔记第五天-了解vite项目的运行流程2
前端学习笔记202303学习笔记第五天-了解vite项目的运行流程2
76 0
|
前端开发
前端学习笔记202303学习笔记第五天-了解vite项目的运行流程1
前端学习笔记202303学习笔记第五天-了解vite项目的运行流程1
77 0
|
缓存 前端开发 JavaScript
关于我用iVX沉浸式体验了一把0代码项目创建(2)
很多朋友还是会在后台问iVX的系统架构是什么。
关于我用iVX沉浸式体验了一把0代码项目创建(2)
|
SQL Cloud Native 小程序
关于我用iVX沉浸式体验了一把0代码项目创建
简单来说:iVX = 前后端代码生成器 + 云资源(可选)。
关于我用iVX沉浸式体验了一把0代码项目创建
|
Web App开发 IDE 算法
剑池系列开发工具系统规划(三)| 学习笔记
快速学习剑池系列开发工具系统规划。
剑池系列开发工具系统规划(三)| 学习笔记
|
机器学习/深度学习 存储 编译器
剑池系列开发工具系统规划(一)| 学习笔记
快速学习剑池系列开发工具系统规划。
剑池系列开发工具系统规划(一)| 学习笔记

热门文章

最新文章

下一篇
开通oss服务