掘了！还能文言文编码 - 星座特效

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

​

什么？

文言文可以编码？

服了～

前言

文言文语言的开发者是来自卡内基梅隆大学的黄令东，并且当时仅是一名大四的学生。文言文编程是利用NLP技术，将文言文语法转换为 Javascript 或 Python 语法，从而进行编译与运行。技术难度巨大。

大佬，请收下俺的膝盖。

基本语法

关于基本语法，度娘和谷歌上一搜一大把。这里我们简单看看：

吾有一言。曰「「己所不欲，勿施於人」」。書之。

则有：

var stringVariable = '己所不欲，勿施於人';
console.log(stringVariable);

对号入座。吾有一言。表明要定义一个字符串类型的变量。曰「「己所不欲，勿施於人」」表示将值己所不欲，勿施於人赋值给变量。書之这里的之代表前面定义的变量。書表明要写下来。所以書之类比 Javascript 中的打印 console.log(变量)。

更多的内容，可以参照 开源软件 - 文言文编程 或者其他介绍的站点。资源多多，这里不进行赘述。

星座效果

好了，这里假设我们已经弄懂了基本的语法。那么我们来编写一个成品 - 星座效果。成品静态效果如下图：

因为俺没有找到文言文支持 class 类的写法。这里我通过文言文的另一种写法施实现：

施「(_ => {
  class 类名 {
    constructor() {
      this.属性 = 属性值；
    }
    
    方法名() {
    
    }
  }
})」

其他内容的实现方式尽量采用文言文的语法形式。不然，整个项目，俺可以通过一个简单的 施 字完成。那真是简单乎矣。

比如取色：

疏曰。 主色調
吾有一物。名之曰「主色調」。
昔之「主色調」之「「紅調值」」者。今零是矣。
昔之「主色調」之「「綠調值」」者。今二百五十五是矣。
昔之「主色調」之「「藍調值」」者。今二百五十五是矣。

注曰。 當前顏色
吾有一術。名之曰「獲取顏色」欲行是術。必先得一物。曰「當前顏色」。一物。曰「當前透明度」。
乃行是術曰。
  吾有一數。夫「當前顏色」之「「紅調值」」。名之曰「當前紅」。
  吾有一數。夫「當前顏色」之「「綠調值」」。名之曰「當前綠」。
  吾有一數。夫「當前顏色」之「「藍調值」」。名之曰「當前藍」。
  吾有一言。施「(_ => `rgba(${當前紅}, ${當前綠}, ${ 當前藍 }, ${ 當前透明度 })`)」。名之曰「當前透明度顏色」。
  乃得「當前透明度顏色」。
是謂「獲取顏色」之術也。

疏曰。 星星顏色
吾有一言。施「獲取顏色」於「主色調」。於一。名之曰「青色」。
昔之「星星顏色」者。今「青色」是矣。

上面代码，声明了主色调。然后声明了一个函数，该函数有两个参数 - 當前顏色 和 當前透明度 ，函数返回 rgba 的颜色。接着，我调用声明的函数獲取顏色，将返回值赋予变量星星顏色。

本文介绍的星座特效🌃，也是已经实现了的功能，主要包含下面的几点：

• 生成星星✨
• 生成星星之间的连线
• 星星的移动
• 鼠标点和星星之间的互动：在设定的半径范围内，星星进行规避
• 监听窗口的更改，改变星星的数量

具体的实现，读者可以查看下面👇的成品代码。

赠人玫瑰🌹，手留花香。俺不要玫瑰，只要读者的一个举手之劳的赞~  逃:)

体验地址

代码片段

可点击屏幕右上角上的 码上掘金 进行大屏阅读。体验更佳。

推荐阅读

• 五子棋 - JavaScript 实现 - 两人对战

代码片段