就 CheckBox 还能玩这么多花活儿？

[zzzzzzggggggg]

转一篇文章，原文地址： https://zhuanlan.zhihu.com/p/427999386

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

卷累了吧？别背八股文了，快来看看我最近在某同性交友网站（ 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 画图形主要是这么几步：

1. 生成 Checkboxland 实例，传入参数：
   • dimensions：绘制区域的尺寸
   • selector：实例挂载 dom
2. 实例 setData ，传入参数是二维数组，数组里面的 0 和 1 代表了 checkbox 是否选中

实现横向滚动字符

我们先用它画一张静态图，比如画出“前端耳东”这几个字，之前我们已经知道了画字符只要调用 setData 改变传入的 data 值就行了，所以画出静态图形的代码是：

画出的效果是这样的：

是不是感觉还不错？接下来我们给它加上横向滚动的效果

checkboxland 官方支持一个 marquee 方法，可以实现横向滚动的效果，具体使用方法可以看checkboxland.marquee

画出效果如下：

实现贪吃蛇小游戏

完整的项目地址：https://github.com/erdong-fe/checkboxland-demos，欢迎 star ，不白嫖

对于实现一个功能完备的项目来说，不管大项目小项目都不大可能一口气写好，都是一部分一部分的写好然后合成一个项目。

所以我们要做好逻辑的解耦，也就是把一大坨要实现的功能拆分为一个个的方法和类，每个方法负责什么、返回值和入参是什么，都要考虑清楚。

那么对于贪吃蛇这个小游戏，我们看看它要实现哪些功能：

1. 绘制游戏区域和贪吃蛇
2. 让贪吃蛇前进起来
3. 让贪吃蛇响应键盘的控制来改变前进方向
4. 让贪吃蛇吃到苹果长度加一，并且有新的苹果生成在游戏区域
5. 贪吃蛇碰到游戏区域边缘的时候提示游戏失败

我们可以简单的按照上面功能的拆分，来一步一步的实现整个游戏。

绘制游戏区域和贪吃蛇

首先我们先绘制出来游戏区域和静态的贪吃蛇，这也是整个游戏的初始化。

先根据我们前面讲到的 checkboxland 基础来思考一下，要绘制游戏区域和贪吃蛇，需要哪些方法和变量？

显而易见，我们需要一个 checkboxland 实例和贪吃蛇变量，分别来记录当前游戏区域的状态和贪吃蛇的位置信息，checkboxland 实例很简单，就根据我们前面说到的基础用法来做：

贪吃蛇的位置信息我们需要用一个数组来存下：

现在游戏区域和贪吃蛇的数据都已经有了，我们需要把它们绘制出来，所以我们抽象出一个_draw 方法来专门负责绘制：

结合上面说的，我们整理一下代码，抽象出来两个主要的方法，一个是_initGame 方法负责初始化游戏区域和贪吃蛇的状态信息，一个是_draw 方法负责绘制贪吃蛇到游戏区域，完整代码如下：

效果如下：

让贪吃蛇前进起来

接下来我们让贪吃蛇前进起来。

让贪吃蛇前进起来，无非就是要做到两件事情：

1. 修改贪吃蛇的位置信息
2. 把修改后的位置信息绘制出来

首先我们先修改贪吃蛇的位置信息，默认它往右前进，那么我们只需要把贪吃蛇每个节点的 x 值加 1 就行了

所以，代码如下：

接下来我们要把贪吃蛇最新的位置信息画出来，我们要把_draw 方法移动到_moveSnake 方法内部来，这样子可以保证每次贪吃蛇状态发生改变时可以绘制出最新的贪吃蛇：

让贪吃蛇真正的动起来还差一步，就是需要按照一定的速度来不停的更新它的位置信息，并且不停的画出最新的贪吃蛇，所以我们用 setInterval 来实现。

因为它是在游戏初始化就要做的事情，所以这段代码可以放在_initGame 方法里面：

完整代码如下：

效果如下：

让贪吃蛇改变方向

前面我们实现了贪吃蛇前进，现在我们实现让贪吃蛇根据键盘输入来改变前进方向。

首先需要定义上下左右这四个方向的枚举：

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

最后，我们要让贪吃蛇根据方向改变前进方向。

改变方向这个行为，我把它分为两步：

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

所以我们修改_moveSnake ，代码如下：

完整代码如下：

效果图如下：

让贪吃蛇吃到苹果

这一节我们实现让贪吃蛇吃到苹果的功能。

我们需要实现以下两个逻辑

1. 更新贪吃蛇的位置后，判断它是否吃到了苹果；如果吃到了要更新贪吃蛇的长度并且重新生成苹果
2. 生成苹果位置的方法

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

当贪吃蛇吃到苹果时，我们只需要在蛇尾处 push 进一个新的节点即可，如下图：

代码我们直接加在_moveSnake 方法里就好，代码如下：

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

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

整体代码如下：

效果如下：

游戏区域边缘碰撞检测

贪吃蛇的大部分功能已经实现结束了，现在还剩一个小功能，就是当贪吃蛇前进到游戏区域边缘的时候要判定游戏失败。

我们要新增一个_isSnakeCrossBorder 方法来判定贪吃蛇是否超出了游戏区域边界：

然后修改_moveSnake 方法加入边界判断方法，碰到边界后游戏重新开始：

整体代码：

效果如下：

结尾

本文主要是介绍了 checkboxland 以及它的用法，最后用做一个贪吃蛇小游戏来进一步熟悉 checkboxland 的用法以及 JavaScript 编程。

后面我会以这样在做中学的方式带来更多的文章教程，欢迎关注点赞。

[wwwap]

很棒！

[ligiggy]

nb

[zzzzzzggggggg]

@wwwap 哈哈，有的人觉得无聊，有的人觉得这个项目很酷😸

[zzzzzzggggggg]

@ligiggy 谢谢😸

[sugars]

太棒了，让我对很熟悉的 checkbox 眼前一新

[zzzzzzggggggg]

@sugars 谢谢老哥 /老姐😸

[wolfie]

前几天看到一篇推送文章，渲染 3d 图形的。

跟 checkbox 没啥关系，任何像素方框都可以。

[zzzzzzggggggg]

@wolfie 主要是这个项目很有趣

[weizhen199]

这位同学， 有考虑过学习 FPGA 嘛

[2i2Re2PLMaDnghL]

（是否考虑根据 raycasting 实现一个 3d 渲染）

[ykrank]

你完全可以拿任何一个渲染库，把底层的像素操作改为 checkbox 操作，就能完成无缝的任意渲染了。最简单的思路就是用 checkbox 实现一下 canvas 或者 opengl

[Exin]

令人耳目一亮 /doge

[x86]

想起以前有个 webshell 的登入界面，就是用 checkbox 做的

[lovedoing]

有没有 radio 版本的

[sadfQED2]

会玩

[zzzzzzggggggg]

@lovedoing 你可以搞一个

[zzzzzzggggggg]

@weizhen199 学 FPGA 干啥

[zzzzzzggggggg]

@sadfQED2 写代码就是玩

[zzzzzzggggggg]

@x86 酷

[zzzzzzggggggg]

@Exin 我当时看到这个项目的时候，也是眼前一亮

[zzzzzzggggggg]

@ykrank 是的

[zzzzzzggggggg]

@2i2Re2PLMaDnghL 没考虑过😸

[jin5354]

还是吃的太饱了，想玩渲染不如去看看 WebGL 文档

[stephenyin]

并不有趣，也没什么卵用，浪费我 2 分钟。

[paoqi2048]

不错，其实这个可以用来做一些算法演示

[israinbow]

原理还是挺简单, 上学的时候做过一个靠样式表和 ■ 符号做过一个定格文字画, 写死在 html 里面, 让 js 每秒显示一个 div, 非常傻傻的玩具🤤

[muzuiget]

无非就是一个像素对应一个 checkbox ，会点图形学都能搞。

也就在外行面前炫一下，好像真无什么用。

[fucku]

并不有趣，也没什么卵用，浪费我 3 分钟。

[zzzzzzggggggg]

@muzuiget 哈哈

[zzzzzzggggggg]

@fucku 嘿嘿

[zzzzzzggggggg]

@israinbow 就是玩呗

[zzzzzzggggggg]

@stephenyin 哈哈

[zzzzzzggggggg]

@jin5354 嘿嘿

[flyingghost]

不为无益之事，何以遣有涯之生？

[ciaoly]

CheckBox 模拟的 LED 灯阵？

[vivisidea]

还是前端会玩

[lzgshsj]

等一个 bad apple

[dfkjgklfdjg]

😅我还是比较好奇时钟的实现思路。

[zzzzzzggggggg]

@flyingghost 赞

[zzzzzzggggggg]

@ciaoly 对

[zzzzzzggggggg]

@dfkjgklfdjg 跟纯 js 差不多，只不过就是不停地画数字就行了

[zzzzzzggggggg]

@lzgshsj bad apple 啥意思

[neilp]

变着花样写 helloworld

[dfkjgklfdjg]

@zzzzzzggggggg #41 ，就是说先预设好数字的数组矩阵，然后变化就可以了是吧。
Bad apple 是个梗，类似像素风格的 Creator 都会尝试做一次。具体可以看这个视频，bilibili.com/video/BV1Qs411i726

[zzzzzzggggggg]

@dfkjgklfdjg 是的，谢谢

[zzzzzzggggggg]

@neilp 变着法的玩儿