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个点是否能够相连,将这个问题解决了其他外围问题不是迎刃而解了么? 害怕的是我们将外围写的花里胡哨,然而核心功能实现不了,岂不是功亏一篑。


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


相关文章
|
6月前
|
JavaScript 前端开发 算法
设计一个简单的JavaScript版“俄罗斯方块”游戏的基本逻辑流程。
```md 设计JavaScript版俄罗斯方块游戏涉及初始化环境、创建游戏容器、管理变量、加载音效。游戏循环中生成方块、键盘控制移动与旋转、碰撞锁定、行消除及分数更新。当游戏区域填满时结束游戏,显示结束画面。还包括暂停、重置等辅助功能。伪代码示例展示了核心逻辑,实际实现需考虑更多细节和用户体验增强。 ```
128 3
|
存储 前端开发 JavaScript
【五子棋实战】第5章 开发五子棋前端页面
页面设计原则   1、可配置性。比如棋盘的大小可配置,棋盘边长可配置,黑白空期的值可配置;   2、响应式。各种屏幕大小下棋盘的布局要合理;   3、面向对象。棋子、棋盘的定义都用类来封装,代码要写的好看。
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
52 1
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
51 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
54 0
|
存储 JavaScript C#
从零开始做一款Unity3D游戏<三>——编写游戏机制(一)
从零开始做一款Unity3D游戏<三>——编写游戏机制
从零开始做一款Unity3D游戏<三>——编写游戏机制(一)
游戏开发零基础入门教程(8):游戏积木之逻辑
“如果,那么”的逻辑非常的直白,如果玩家死了,那么游戏就应该结束。反之,如果玩家没有死,那么游戏就不应该结束。如果我干掉了一个敌人,那么我的得分就应该加一。如果敌人被子弹打中了,那么它就应该爆炸......
111 0
|
存储 设计模式 JavaScript
从零开始做一款Unity3D游戏<三>——编写游戏机制(二)
从零开始做一款Unity3D游戏<三>——编写游戏机制
从零开始做一款Unity3D游戏<三>——编写游戏机制(二)
|
数据可视化 Java 容器
Java实现拼图小游戏(7)—— 计步功能及菜单业务的实现
注意由于我们计步功能的步数要在重写方法中用到,所以不能将初始化语句写在方法体内,而是要写在成员位置。在其名字的时候也要做到“见名知意”,所以我们给它起名字为step
322 0
Java实现拼图小游戏(7)—— 计步功能及菜单业务的实现
|
Java API 图形学
Java实现拼图小游戏(5)—— 美化界面(含源码阅读)
先加载的图片在上方,后加载的图片在下方,所以我们要把创建背景图的代码放在我们之前创建十五个小图片的代码后面,否则会出现背景图片将我们要拼的图片覆盖的情况
469 0
Java实现拼图小游戏(5)—— 美化界面(含源码阅读)