emilyyoung71415 / mygames Goto Github PK
View Code? Open in Web Editor NEW🧐🎈some interesting games or effects
🧐🎈some interesting games or effects
看到这个动效第一反应感觉到有如下几个需要解决的难点:
片刻思考后,我的结论如下:
1.获取图片主题色:
在前端识别一张图——我的反应是啊哈?抱歉目前超出我的认知范围。关于识别图像,我脑海中只想到高大上的机器学习字样...所以直接从图片中得到各个色值这个方案暂时pass。
另寻出路:既然是图片爆炸,能否,真的写个图片爆炸?别笑我说的不是废话。我的意思是能否不纠结主题色的提取,咱们写个“图片切片”然后爆炸的效果?那么问题来了,怎么把图片切成一块一块的?
解决办法:定义爆炸小球的大小为图片的百分之几,然后每个爆炸小球用div生成,他们的起点确定即按行X个按列Y个依次排布下来的,而每个div的背景即由背景图是原图片按一定数值位移得出。
2.让小球动起来及小球的运动轨迹规划:
让每个小球绝对定位,定时改变其top、left值即可实现小球的运动。其次如火焰般的运动轨迹的实现——拆分成两步,先向四面八方发射爆炸,然后遇到边界碰撞改变方向变得向上运动,在运动的过程中慢慢小球变小变淡。
控制小球的运动:结合物理学的知识,给小球x、y轴向两个方向的速度,和两个方向的加速度,Vx决定left偏移值,Vy决定top偏移值,小球的实际运动轨迹由两个方向的合速度决定。
四面八方发射:判断每个小球的位置与中心点的位置,如果在中心点之下则向下运动,在中心点之右则向右移动。我们以运动方程 x=Vx*t,y=kx+b实现小球各个方向的运动,而斜率k即由小球起始点与矩形中心点连线所定。
碰撞改变方向:边界即是原图边缘,碰撞即反弹变为向上运动。分为三边的碰撞:左、右、下。每个方向的碰撞不一。触碰到底部则直接反弹垂直向上,左边的斜右上反弹,右边的反之。期间为了反弹的随机性,会混合一定的方向偏移值。
结合@chokcoco大佬的实现**和自己最初的想法,有了以下几个方面的思考
总结:最大的问题就是定位,通过绝对定位的top和left定位确定小球的方位,且小球占据一定面积不能视为质点,而我们思考的时候又习惯以中心点确定小球位置。一言以蔽之:使用div画圆及涉及小球运动特别不方便。我们需要两种更好的编码体验:面积的确定:能通过pi * r * r的方式计算;定位:可以通过圆心定位。
突破:引入canvas
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.