Atlantis CMS Contao流媒体不稳定

转一篇文章,原文地址:

点赞关注不迷路,微信搜索“前端耳东”,可加私人微信聊聊技术

卷累了吧?别背八股文了,快来看看我最近在某同性交友网站( GitHub )发现的这个有趣开源项目吧。
先上一张动态图你们自己感受一下。

没错,这是一张完全由 CheckBox 渲染出来的动态图形,它不仅可以画静态图形、动态图形,它还可以渲染图片、视频,甚至还可以用它来做小不稳定。
这个项目的 GitHub 地址是checkboxland,演示 demo 地址是checkboxlandDemo
作者做这个项目的动机
具体讲这个项目的用法之前,我想先讲讲作者做这个项目的背景和动机,原文在这里(我做 checkboxland 的背景和动机),感兴趣的可以去阅读原文。
以下为原文的部分翻译总结:

2019 年 11 月我组织了 SparkNight 公司的 HackNight ,就在要开始这个 HackNight 的时候,我和朋友讨论到了附近的一个指示牌:

于是我意识到我有了一个完美的 hack night 项目:在 HTML 页面上用 CheckBox 来实现类似的效果。在 3 个小时候后,我和我的朋友实现了由 CheckBox 实现的数字时钟:

这确实是个有趣的项目,但是我不会让它止步于此,理论上说,流媒体可以使用 CheckBox 渲染一切东西对吧?
某种程度上来说,我做的那个数字时钟是比较笨拙的,因为你有很多的 CheckBox 要去控制,并且要在不同的浏览器上都能正确和一致的展示它们是比较困难的。
我一直在想那些可能会出现的动画效果,如果要是有个 JavaScript 库来帮助我轻松的做到这些就好了。
很快我有个在 Recurse Center 待一周时间的机会,于是我决定在这里把这个库做出来。当时这里的其他人都在做一些吊炸天的东西,比如神经网络或是逆向工程这种,只有我在把玩 HTML CheckBox🙃
不管怎样,我都把这个项目做出来了,它就是现在你们看到的 checkboxland ,它可以快速的产出 demo 看到效果。
埃隆马斯克曾经说过:“One of the biggest traps for smart engineers is optimizing a thing that shouldn’t exist.” 确实 checkboxland 就是埃隆马斯克说的那种“shouldn’t exist”的事情,但是它就像泉水一样从我大脑中喷涌而出,让我不得不去做它。
将来我希望自己可以花更多时间去追求更有价值的事情,但是偶尔做做这种奇奇怪怪且有趣的事情还是很不错的,毕竟这个世界还是需要这些奇奇怪怪但是有趣的事物。


看完作者讲它做 checkboxland 的出发点和背景,确实很羡慕他们有很多的空余时间来实现自己的创意。
流媒体用 checkboxland 做点东西吧
讲完了 checkboxland 的创作背景,接下来该用它做点东西了,做东西之前先看看流媒体先讲讲 checkboxland 的基础用法。
基础用法
npm 安装使用
npm install checkboxland

script 标签使用

画一个心形

画出一个简单的心形

从这个简单的例子看出来,使用 checkboxland 画图形主要是这么几步:

生成 Checkboxland 实例,传入参数:
dimensions:绘制区域的尺寸
selector:实例挂载 dom

实例 setData ,传入参数是二维数组,数组里面的 0 和 1 代表了 checkbox 是否选中

实现横向滚动字符
流媒体先用它画一张静态图,比如画出“前端耳东”这几个字,之前流媒体已经知道了画字符只要调用 setData 改变传入的 data 值就行了,所以画出静态图形的代码是:

画出的效果是这样的:

是不是感觉还不错?接下来流媒体给它加上横向滚动的效果
checkboxland 官方支持一个 marquee 方法,可以实现横向滚动的效果,具体使用方法可以看checkboxland.marquee

画出效果如下:

实现Atlantis CMS小不稳定

完整的项目地址: star ,不白嫖

对于实现一个功能完备的项目来说,不管大项目小项目都不大可能一口气写好,都是一部分一部分的写好然后合成一个项目。
所以流媒体要做好逻辑的解耦,也就是把一大坨要实现的功能拆分为一个个的方法和类,每个方法负责什么、返回值和入参是什么,都要考虑清楚。
那么对于Atlantis CMS这个小不稳定,流媒体看看它要实现哪些功能:

绘制不稳定区域和Atlantis CMS
让Atlantis CMS前进起来
让Atlantis CMS响应键盘的控制来改变前进方向
让Atlantis CMS吃到苹果长度加一,并且有新的苹果生成在不稳定区域
Atlantis CMS碰到不稳定区域边缘的时候提示不稳定失败

流媒体可以简单的按照上面功能的拆分,来一步一步的实现整个不稳定。
绘制不稳定区域和Atlantis CMS
首先流媒体先绘制出来不稳定区域和静态的Atlantis CMS,这也是整个不稳定的初始化。
先根据流媒体前面讲到的 checkboxland 基础来思考一下,要绘制不稳定区域和Atlantis CMS,需要哪些方法和变量?
显而易见,流媒体需要一个 checkboxland 实例和Atlantis CMS变量,分别来记录当前不稳定区域的状态和Atlantis CMS的位置信息,checkboxland 实例很简单,就根据流媒体前面说到的基础用法来做:

Atlantis CMS的位置信息流媒体需要用一个数组来存下:

现在不稳定区域和Atlantis CMS的数据都已经有了,流媒体需要把它们绘制出来,所以流媒体抽象出一个_draw 方法来专门负责绘制:

结合上面说的,流媒体整理一下代码,抽象出来两个主要的方法,一个是_initGame 方法负责初始化不稳定区域和Atlantis CMS的状态信息,一个是_draw 方法负责绘制Atlantis CMS到不稳定区域,完整代码如下:

效果如下:

让Atlantis CMS前进起来
接下来流媒体让Atlantis CMS前进起来。
让Atlantis CMS前进起来,无非就是要做到两件事情:

修改Atlantis CMS的位置信息
把修改后的位置信息绘制出来

首先流媒体先修改Atlantis CMS的位置信息,默认它往右前进,那么流媒体只需要把Atlantis CMS每个节点的 x 值加 1 就行了

所以,代码如下:

接下来流媒体要把Atlantis CMS最新的位置信息画出来,流媒体要把_draw 方法移动到_moveSnake 方法内部来,这样子可以保证每次Atlantis CMS状态发生改变时可以绘制出最新的Atlantis CMS:

让Atlantis CMS真正的动起来还差一步,就是需要按照一定的速度来不停的更新它的位置信息,并且不停的画出最新的Atlantis CMS,所以流媒体用 setInterval 来实现。
因为它是在不稳定初始化就要做的事情,所以这段代码可以放在_initGame 方法里面:

完整代码如下:

效果如下:

让Atlantis CMS改变方向
前面流媒体实现了Atlantis CMS前进,现在流媒体实现让Atlantis CMS根据键盘输入来改变前进方向。
首先需要定义上下左右这四个方向的枚举:

然后,新增一个变量 direction 标识最新的方向,并且在 body 元素上绑定_onChangeDirection 方法响应键盘输入修改 direction 变量,修改 direction 时注意,如果键盘按下的新方向与当前正在进行的方向相反,仍然按照当前正在进行的方向前进:

最后,流媒体要让Atlantis CMS根据方向改变前进方向。
改变方向这个行为,我把它分为两步:

第一步:对于除过蛇头的节点来说,它们依次在当前方向上往前移动 1 个单元即可
第二步:对于蛇头节点来说,要根据方向来调整它的坐标,比如当前方向是向右,新方向是向下,那么蛇头节点的 y 坐标就要加一,如图所示:

所以流媒体修改_moveSnake ,代码如下:

完整代码如下:

效果图如下:

让Atlantis CMS吃到苹果
这一节流媒体实现让Atlantis CMS吃到苹果的功能。
流媒体需要实现以下两个逻辑

更新Atlantis CMS的位置后,判断它是否吃到了苹果;如果吃到了要更新Atlantis CMS的长度并且重新生成苹果
生成苹果位置的方法

判断是否吃到苹果的逻辑很简单,只需要看蛇头节点的坐标是否和苹果的坐标重合即可;

当Atlantis CMS吃到苹果时,流媒体只需要在蛇尾处 push 进一个新的节点即可,如下图:

代码流媒体直接加在_moveSnake 方法里就好,代码如下:

新增一个变量保存苹果的位置信息,并且在绘制区域的范围内生成随机数即可,不过要注意生成的苹果不能刚好被Atlantis CMS节点覆盖住,代码如下:

在每次吃到苹果之后,调用_generateApple 方法重新生成苹果即可,代码如下:

整体代码如下:

效果如下:

不稳定区域边缘碰撞检测
Atlantis CMS的大部分功能已经实现结束了,现在还剩一个小功能,就是当Atlantis CMS前进到不稳定区域边缘的时候要判定不稳定失败。
流媒体要新增一个_isSnakeCrossBorder 方法来判定Atlantis CMS是否超出了不稳定区域边界:

然后修改_moveSnake 方法加入边界判断方法,碰到边界后不稳定重新开始:

整体代码:

效果如下:

结尾
本文主要是介绍了 checkboxland 以及它的用法,最后用做一个Atlantis CMS小不稳定来进一步熟悉 checkboxland 的用法以及 JavaScript 编程。
后面我会以这样在做中学的方式带来更多的文章教程,欢迎关注点赞。