本文是“小网站”系列的第 1 篇。本系列介绍一些作者主观认为值得把玩的“小网站”，愿朋友们多少都能有所收获。这个系列会长期更新，对这个系列感兴趣的朋友可关注，不迷路。
--- 今日介绍 ---
奇妙的键盘 （magickeyboard）
把玩点：
-
正常练习可让你键盘盲打水平提升；
-
趣味性适合小朋友练习键盘打字；
-
可排解或发泄情绪；
-
内置物理引擎，值得计算机前端专业的人士学习；
主观评价：趣味性 2 星，技术性 3 星
--- 使用指北 ---
“奇妙的键盘”支持在电脑上、手机上使用，不过体验略有不同。
在电脑上用浏览器打开网址，映入眼帘的就是一块“黑屏”，下面有一句英文提示“Type something”，意思嘛就是让你用键盘输入些什么，随便按下一个键，然后有趣的事情就发生了，操作异常简单...
细心的话会发现键盘上字母所在的位置跟屏幕上出现的荧光字母位置是有关系的：比如字母A在键盘的左侧，那么荧光A在屏幕上出现时也是左侧，同时按A不放，会出现许多荧光A在屏幕上，它们还会碰撞四散，要是打开声音还有熟悉的打字机声音...
在手机上识别上面的二维码也能打开，但不同于电脑有键盘，手机上在屏幕任意位置点击，会有荧光字母像弹珠一样弹射出来，使用了一下发现貌似不支持多点触摸。
开始愉快的玩耍吧！
--- 干货知识 ---
本小节属于技术解析环节，纯技术性干货，适合技术人员。
网站作者为Feross Aboukhadijeh，其个人介绍 https://feross.org 。小伙子年轻、挺帅气，写技术博客，现已有360多万的访问量，关键是头发还辣么茂盛，完全不像堆代码的...
该项目是开源项目，网站右上角为Github链接，其实技术原理：按键检测 + 键屏蔽 + 物理引擎运用（发射轨迹、物体碰撞、消失处理）+ 画布帧输出显示。
以下是一些技术实现关键点：
-
magickeyboard网站采用Canvas2D绘图技术实现；
-
荧光字采用透明的PNG图片实现，并非代码手工绘制；
-
因为是图片显示荧光字，程序限制了很多字符按键的输出与显示；
-
前端包封装模块采用的是bundle.js；
-
物体碰撞采用的是一个超级好用的物理引擎库matter.js,它是一个采用JS实现的2D物理引擎，可以单独使用或者配合Canvas一起使用，实现物理效果，或者一些高级Canvas动画。使用时有一些概念需要掌握，比如：引擎、对象、渲染器、刚体、碰撞检测、坐标系、重力、摩檫力。它是开发游戏的利器。
本系列长期更新！首发微信公众号：土卫六
标签：---,网站,奇妙,键盘,引擎,把玩,荧光 From： https://www.cnblogs.com/skywayman/p/17082193.html