值得把玩的“小网站”(3) - 保持冷静，戳我!

本系列介绍一些作者主观认为值得把玩的“小网站”，愿朋友们多少都能有所收获。这个系列会长期更新，对这个系列感兴趣的朋友可关注，不迷路。

--- 今日介绍 ---

保持冷静，戳我 （Keep Calm and Poke Me）

把玩点：

• 适合烦躁时减压;

• 适合逗小朋友玩;

• 技术学习由浅入深的样板；

   

主观评价：趣味性 1.5 星，技术性 2.5 星

网址  https://calm.ovh

 

--- 使用指北 ---

这个小网站支持电脑和手机，操作异常简洁，在电脑上用鼠标或者在手机上用手指拖拽屏幕上的一个类似“奶嘴”的Q弹物件，可以将之拉长、移动，松手自动回弹，像果冻一样摇晃Q弹。

如标题所言，要缓慢冷静的戳，慢慢的拉扯，就像是在“回敬”让你生气的人时那样，同时BGM也会随着拉扯的动作快慢播放声音，适合减压！

快来戳我！

Enjoy！

 

--- 干货知识 ---

本小节属于技术解析环节，纯技术性干货，适合技术人员，非行业人士可忽略。

网站很简单，实现不简约。

网站由HTML + CSS + Canvas + JS + 10个mp3组成, 屏幕上那活灵活现的类“果冻”Q弹对象可全都是利用JavaScript代码“画”出来的。

核心代码由作者yoichi kobayashi 开源贡献，他先是开源了一个基于Canvas动画编程的框架结构，做基于HTML + Canvas动画编程都可以参考这个结构代码，地址 https://codepen.io/ykob/pen/ogdpoM 

后来作者又在此基础上，实现了一个叫Slime（烂泥；黏液）的开源项目，就是“戳我”网站的核心。开源地址 https://codepen.io/ykob/pen/XJqVVa  ，在这个开源项目上可以学习到Canvas绘画、数学、动画知识，比如为了定义与精控物体，设置了多达52项控制属性：

没有采用图片素材，而是采用程序代码，将物体给一行一行代码硬画出来。为了达到每秒60FPS的动效，物体在每一帧的位置，都需要大量计算工作，涉及Sin、Cos函数点位计算，涉及角度、弧度转换计算。

项目为了让读者了解清楚工作原理，还贴心的分了三个级别：仅控制点级、所有点位级及全功能级，想研究的朋友可以从“仅控制点级”开始，点位少，起步难度低。

本文介绍的“戳我”小网站，核心功能就是Slim，只是将拖动功能与声音相结合了，显得更加丰富一些。

 

本系列长期更新！

喜欢的朋友感谢点赞、分享、收藏三连！