emilyyoung71415 / mygames

🧐🎈some interesting games or effects

What is it？😄

这个仓库记录我写的好玩的前端小demo，以兴趣为驱动。

概览

• 2048改进版
• canvas图片爆炸效果
• canvas图片隐写

mygames's Issues

2048游戏笔记

canvas图片爆炸笔记

思考阶段

看到这个动效第一反应感觉到有如下几个需要解决的难点：

• 1.如何提取一张图片的主题色？
• 2.爆炸颗粒的生成？
• 3.爆炸颗粒的起始点及运动轨迹的确定？

片刻思考后，我的结论如下：

1.获取图片主题色：
在前端识别一张图——我的反应是啊哈？抱歉目前超出我的认知范围。关于识别图像，我脑海中只想到高大上的机器学习字样...所以直接从图片中得到各个色值这个方案暂时pass。
另寻出路：既然是图片爆炸，能否，真的写个图片爆炸？别笑我说的不是废话。我的意思是能否不纠结主题色的提取，咱们写个“图片切片”然后爆炸的效果？那么问题来了，怎么把图片切成一块一块的？
解决办法：定义爆炸小球的大小为图片的百分之几，然后每个爆炸小球用div生成，他们的起点确定即按行X个按列Y个依次排布下来的，而每个div的背景即由背景图是原图片按一定数值位移得出。

2.让小球动起来及小球的运动轨迹规划：
让每个小球绝对定位，定时改变其top、left值即可实现小球的运动。其次如火焰般的运动轨迹的实现——拆分成两步，先向四面八方发射爆炸，然后遇到边界碰撞改变方向变得向上运动，在运动的过程中慢慢小球变小变淡。
控制小球的运动：结合物理学的知识，给小球x、y轴向两个方向的速度，和两个方向的加速度，Vx决定left偏移值，Vy决定top偏移值，小球的实际运动轨迹由两个方向的合速度决定。
四面八方发射：判断每个小球的位置与中心点的位置，如果在中心点之下则向下运动，在中心点之右则向右移动。我们以运动方程 x=Vx*t，y=kx+b实现小球各个方向的运动，而斜率k即由小球起始点与矩形中心点连线所定。
碰撞改变方向：边界即是原图边缘，碰撞即反弹变为向上运动。分为三边的碰撞：左、右、下。每个方向的碰撞不一。触碰到底部则直接反弹垂直向上，左边的斜右上反弹，右边的反之。期间为了反弹的随机性，会混合一定的方向偏移值。

是否有更好的实现思路？

结合@chokcoco大佬的实现**和自己最初的想法，有了以下几个方面的思考

• 小球是由div标签改变css样式生成的小圆，这种生成方式有诸多不变：
  • 起点确定问题：
    • 每次定位需要计算大矩形-小矩形，且通过top和left两个值确定小球位置
  • 运动问题：
    • 小球有一定面积不能视为质点，位置的偏移还会涉及到小球长宽的计算，我们需要的是圆心的定位，每次却通过left和top值判断位置，十分别扭
• 小球的起始点确定太麻烦，并因此限制了小球爆炸的角度
  • 为什么不所有小球在一个中心点汇合？然后随机360°的角度运动？只要初速度够快肉眼发现不粗来就行。

总结：最大的问题就是定位，通过绝对定位的top和left定位确定小球的方位，且小球占据一定面积不能视为质点，而我们思考的时候又习惯以中心点确定小球位置。一言以蔽之：使用div画圆及涉及小球运动特别不方便。我们需要两种更好的编码体验：面积的确定：能通过pi * r * r的方式计算；定位：可以通过圆心定位。
突破：引入canvas

总结收获

• 1.一睹canvas的强大，原谅我之前对它力量的一无所知..（使用Canvas的getImageData可获得图片颜色信息）
• 2.实践了回html5的拖拽，之前的拖拽的实现都是由原生写的
• 3.该背景下的爆炸小块不同实现方案：
  • 1.背景图片位移
  • 2.主题色提取
    • 2.1从Canvas的getImageData获得的图片颜色中随机选择
    • 2.2基于图像算法提取主题色（colorthief.js使用的是中位切分算法）
• 4.更好的代码：
  • 借鉴jQuery的链式调用
  • 面向对象编程
  • 代码结构，关于canvas的代码依照其函数功能分为两部分

最后,也许你会感兴趣的

• 基于图像算法提取主题色
  • 图像主题色提取算法
  • 图像颜色提取
• canvas小球动画快速入门
  • 一步步打造Canvas小球动画
• 再来一个烟花效果？
  • HTML5 Canvas烟花绽放粒子动画