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

2,456 阅读3分钟

啊?什么?

文言文可以用来编程吗?

服了~

前言

码上掘金上出了文言文实验模版

文言文.png

咦,出于好奇,我们百度谷歌了一顿:文言文语言的开发者是来自卡内基梅隆大学的黄令东,并且当时仅是一名大四的学生。文言文编程是利用 NLP 技术,将文言文语法转换为 JavascriptPython 语法,从而进行编译与运行。技术难度巨大。

大佬,请收下俺的膝盖。

收下膝盖.gif

👌,那么,我们用文言文来搞下事情。实现星座特效👇

constellation.gif

基本语法

要用一门新的语言来编程,我们得学习其语法。关于基本语法,度娘和谷歌上一搜一大把。这里我们简单看看:

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

将其转换成 JavaScript 语法,那么对应则有:

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

我们将文言文和 JavaScript 配对一下👇

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

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

星座效果

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

成品静态图.png

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

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

星座效果的其他内容的实现方式我们尽量采用文言文的语法形式。不然,整个项目,我们可以通过一个简单的 字完成。那真是简单乎矣~

我们使用文言文来实现取色功能:

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

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

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

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

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

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

具体的实现,读者可以查看下面的源码体验,需要读者在熟悉文言文的基本语法的前提下理解,不然真的像看天书一样了 😂

源码

我们在码上掘金上完成本效果。项目源码见:星座效果 - 文言文