GeekTyper的站入入口代码其实就藏在它的页面源码里——准确说,是口代那个叫main.js的文件。别急着按F12,站入先打开geektyper.com,口代随便点一个主题,站入比如"Hollywood",口代然后盯着屏幕。站入那些绿色字符像瀑布一样往下淌,口代键盘敲击声噼里啪啦响,站入但你知道这是口代假的——代码里根本没有真正的“黑客行为”,全是站入预置的动画和随机字符串。
我第一次扒这个脚本时,口代花了半小时才找到关键函数。站入generateRandomCode()负责吐出那些看似高深的口代十六进制片段,playSound()用Web Audio API合成打字音效。站入最妙的是setInterval的调用时机,它让字符刷新速率跟着你鼠标移动速度走——你动得快,屏幕就闪得快,像真在输入什么敏感指令。这种交互细节,光看截图感受不到。
入口代码的第二个秘密在URL参数里。你手动输入?mode=matrix,背景会变成纯黑色加亮绿字符流,比默认主题更接近电影《黑客帝国》的质感。还有个隐藏的?speed=slow,能让字符下落速度降到每秒两行,适合截图发朋友圈。这些参数没写在帮助文档里,我是翻源码时在config.js的注释里发现的——原作者留了行字:“别告诉别人这些开关,除非你请我喝咖啡。”
真正让GeekTyper区别于其他玩具的是它模拟终端的方式。它不调用系统自带的终端模拟器,而是用Canvas逐帧绘制字符。每个字符的字体、间距、模糊效果都单独计算,连CRT显示器的扫描线纹理都做了两层叠加。你放大页面看,那些绿色文字边缘有微弱的红色偏移,那是故意加的色差——模仿老式显像管显示器的“鬼影”现象。这种偏执的细节,普通网页不会做。
如果你只是想装个样子,直接复制源码里的geektyper.js到你自己的HTML页面就行。但注意,它依赖jQuery和Bootstrap,得一起引进来。有个更轻量的办法:打开浏览器控制台,粘贴这段——fetch('https://geektyper.com/js/main.js').then(r=>r.text()).then(eval)——然后输入geektyper.start()。这能绕过页面加载直接启动动画,但音效会缺失,因为音频文件是单独加载的。
最后说个冷知识。GeekTyper的代码里藏着一串Base64编码的字符串,解码后是“如果你读到这里,说明你不是脚本小子——欢迎加入真正的终端世界”。原作者大概没想到,十多年后还有人在扒他的代码,只为找这么一个彩蛋。入口代码本身不难,难的是你愿意花时间去看它到底写了什么,而不是只看表面那层唬人的绿色瀑布。