brython | 笨办法写个连连看-1.核心功能实现

简介: brython | 笨办法写个连连看-1.核心功能实现

前端大佬们不要笑话,运维小弟献丑了。


前段时间在码上掘金看见大佬用【文言文】写了一个连连看,于是乎突发奇想,能不能用brython也实现一个连连看呢? 顺便复习下python基础,于是乎,你们就看到了这个码上掘金项目 和 这篇文章了,但是不得不说,brython是真的没啥人用。

code.juejin.cn/pen/7159814…



关于【码上掘金】如何编写brython


这个在以前文章中就有讲述过初始化brython,本地和码上掘金的都有,这里不再啰嗦,如果有需要的话,可以翻看以下文章:


或者直接Fork下小弟初始化后的项目: code.juejin.cn/pen/7155678…



连连看定义的规则


连连看作为一个类似于棋牌游戏,其最终目的是将棋盘上的对象都清除掉。其规则简单来说,可以定义如下:


  • 一次只能选择2个点进行相连。
  • 相连的2点内容需要一致。
  • 2点之间的路径不能超过3条直线。
  • 2点连接成功后,则对其消除。

最终,将棋盘上的对象全部清除后,则赢得胜利。


查看规则后,我们知晓,第1点 、 第2点 以及 最后一点,都不是很复杂,第三点才是连连看的核心点,那么接下来,我们分析下第三点。


所谓的不超过3条直线,例如,我们想让蓝色框框的点相连


image.png


我们可以通过3条线相连,具体如下:

image.png


如下这样,是不行的。

image.png


因为想让蓝色的点相连,至少需要4条线,即:

image.png



笨办法判断2点是否相连


你可能在别的文章中看到,连连看判断是否能够相连,有几种方法,比如: 2点事垂直的或者是平行的、2点可以通过单拐实现、2点必须通过双拐实现。


本篇文章不会介绍如上方法,我们采取一个最笨办法,即:判断2点的延长线是否相交。


若相交了,则代表可以相连,这种情况一般出现在2点为直线或者是单拐的情况,若不相交,我们则需要判断下是否能够双拐实现。具体的,我们可以看如下案例:


相交的点

例如,我们想判断蓝色的点是否能够相连

image.png


我们将点位延长一下,只要是空格,都可以延长

image.png

延长后,我们找到了交点,则判断为可以相连。

再比如,平行的2个点

假设想对蓝色的2个点进行相连

image.png


将2个点都延长一下,我们发现了交点,则可以相连。

image.png


不相交的点

不想交的点,来判断能否相连,是最复杂的。但是使用相交法则,也有方法,例如如下2个点想连接,但是延长线后没有交点。

image.png


我们将2个点都给延长一下,发现并没有交点

image.png

在没有交点的情况下,我们可以尝试找下平行点是否相连,例如,这2个平行点可以相连


image.png


若平衡点都不相连的话,则无法进行连接,例如:

image.png

因为这2个点的相交点无法直接连接,且相交延长线的平行点也无法正常连接,即:

image.png

所以这2个点无法连接。



连连看核心编码实现


上述段落,我们已经分析了,2点能否相连,但是没有用代码实现,本段落,我们使用代码来模拟一下2点能否相连。

再次之前,我们需要模拟出如下的二维数组,来标定2点是否相连。

image.png



为此,我们使用python定义的列表如下:

maps = [
  [0,3,0,0,0,0,0],
  [0,9,0,0,0,0,0],
  [3,9,0,0,0,0,0],
  [5,0,0,0,5,6,0],
  [0,0,0,0,0,0,0],
  [0,0,8,9,7,0,0],
  [7,0,6,4,0,0,0]
]

其中0,代表空格,其他点位则是一一对应的。


收集点位信息,这里展示收集向上坐标的代码:

# 收集点位向上坐标的点位信息
def collecUp(x,y):
  # 定义空列表,用于收集值
  positions = []
  # 将点位向上移一格
  x = x - 1
  # 循环判断点位是否为0,直至到表格边界处
  while (x >= 0) and (x <= len(maps)-1) and (maps[x][y] == 0):
    positions.append([x,y])
    # 将点位向上移一格
    x = x - 1
  # 返回列表
  return positions

关于其他方位,可以通过本段落的【码上掘金】链接进行查看


我们来测试一下5,4点位周围的空格区域有哪些,我们修改程序函数如下:

collecPositions(5,4)

代码执行后,结果如下:

image.png


这个demo已经写好了,且放到了【码上掘金】中。

code.juejin.cn/pen/7163216…

如上,我们已经确定了某个点的点位信息,那么如何判断2个点是否相交呢? 我们仅需将点位给收集起来,而后判断一下是否有2个点点位信息一样就可以了,这段代码相对于较为简单,这里截图如下:

image.png


我们执行后,效果如下:

image.png


这个demo我也放到了【码上掘金】了,链接如下:

code.juejin.cn/pen/7163227…

若2个点,没有相交点,则我们就要判断2个点是否有平行点 或者是 垂直点了,这里也比较简单,直接给代码吧。


代码我也放到了【码上掘金】中,链接如下:

code.juejin.cn/pen/7163230…

最后我们测试的相连的点为:

  • 值为3,点位为:(0,1) 和 (2,0)
  • 值为5,点位为:(3,0) 和 (3,4)
  • 值为7,点位为:(6,0) 和 (5,4)
  • 值为6,点位为:(6,2) 和 (3,5)

效果如下:

image.png



总结


小弟在写相关项目的时候,一直坚持的思想是面向核心编程,什么意思呢? 就拿连连看举例来说,核心思想是判断2个点是否能够相连,所以我们一开始就写demo来判断2个点是否能够相连,将这个问题解决了其他外围问题不是迎刃而解了么? 害怕的是我们将外围写的花里胡哨,然而核心功能实现不了,岂不是功亏一篑。


好了,就这样吧,怎么样,觉得连连看有意思吧? 快动动你的小手指试试吧,此外,项目代码有注释哦,可以看看咯!


相关文章
|
7月前
|
JavaScript 前端开发 算法
设计一个简单的JavaScript版“俄罗斯方块”游戏的基本逻辑流程。
```md 设计JavaScript版俄罗斯方块游戏涉及初始化环境、创建游戏容器、管理变量、加载音效。游戏循环中生成方块、键盘控制移动与旋转、碰撞锁定、行消除及分数更新。当游戏区域填满时结束游戏,显示结束画面。还包括暂停、重置等辅助功能。伪代码示例展示了核心逻辑,实际实现需考虑更多细节和用户体验增强。 ```
144 3
|
5月前
|
JavaScript
小而美的IKUN-UI组件库源码学习(前言)
小而美的IKUN-UI组件库源码学习(前言)
127 0
小而美的IKUN-UI组件库源码学习(前言)
|
7月前
|
移动开发 算法 数据可视化
🚀独立开发,做的页面不好看?我总结了一些工具与方法🚀
🚀独立开发,做的页面不好看?我总结了一些工具与方法🚀
|
7月前
|
移动开发 小程序 前端开发
【经验分享】如何实现在支付宝小程序内的骨架屏效果
【经验分享】如何实现在支付宝小程序内的骨架屏效果
88 6
|
前端开发 UED
「前端游戏开发体验」我用react实现网页游戏的全过程(包括规则设计)
用技术实现梦想,用梦想打开创意之门。游戏开发体验挺新奇的,我用react实现网页游戏的全过程(包括规则设计)。
780 1
|
7月前
|
数据可视化 算法 开发工具
微信小游戏制作工具中如何实现递归函数?
微信小游戏制作工具中如何实现递归函数?
84 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
54 1
|
C语言
C项目(贪吃蛇BUG解决及功能扩展)
C项目(贪吃蛇BUG解决及功能扩展)
136 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
53 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
56 0