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



相关文章
|
6月前
|
机器人 程序员 C++
Scratch3.0——助力新进程序员理解程序(十一、自制积木)
Scratch3.0——助力新进程序员理解程序(十一、自制积木)
95 0
|
算法 前端开发 JavaScript
【五子棋实战】第1章 项目架构与开发思路
五子棋是一种古老而受欢迎的棋类游戏,本博客将介绍如何使用前端和算法接口来制作一个五子棋游戏。 此次实战项目包含项目的所有代码、教学的系列博客,分别放在公众号、CSDN,以便广大读者能够更好地学习、实践与二开。
264 0
|
1月前
|
前端开发 Java
表白墙/留言墙 —— 初级SpringBoot项目,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
文章通过一个表白墙/留言墙的初级SpringBoot项目实例,详细讲解了如何进行前后端开发,包括定义前后端交互接口、创建SpringBoot项目、编写前端页面、后端代码逻辑及实体类封装的全过程。
78 3
表白墙/留言墙 —— 初级SpringBoot项目,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
|
5月前
|
前端开发 JavaScript
前端复刻经典小游戏之飞机大战(一)
前端复刻经典小游戏之飞机大战(一)
61 1
|
5月前
|
前端开发 JavaScript 测试技术
前端复刻经典小游戏之飞机大战(二)
前端复刻经典小游戏之飞机大战(二)
89 0
|
5月前
|
前端开发 JavaScript 安全
前端复刻经典小游戏之飞机大战(三)
前端复刻经典小游戏之飞机大战(三)
58 0
|
开发框架 移动开发 自然语言处理
uniapp制作项目的思路
uniapp制作项目的思路
|
6月前
|
算法 机器人 程序员
Scratch3.0——助力新进程序员理解程序(案例五、自制积木-五角星函数)
Scratch3.0——助力新进程序员理解程序(案例五、自制积木-五角星函数)
85 0
|
6月前
|
定位技术 API 开发者
【Godot引擎开发】简单基础,外加一个小游戏DEMO
【Godot引擎开发】简单基础,外加一个小游戏DEMO
144 0
下一篇
无影云桌面