个人认为算法是解决某一问题的方法,怕理解不当,搜索维基百科得到以下结果(摘录):
算法(algorithm;算法),在数学(算学)和计算机科学之中,指一个被定义好的、计算机可施行其指示的有限步骤或次序,常用于计算、数据处理和自动推理。算法是有效方法,包含一系列定义清晰的指令,并可于有限的时间及空间内清楚的表述出来。
所以我认为并不是只有 排序、查找、最优解 之类的抽象代码程序,或更为复杂的 神经网络、深度学习、机器视觉 才称为算法 我想说的是,算法没那么神秘和高大上 你我在写代码解决问题或实现功能的模块中,就可能是在写算法 模块可以画成流程图,那么流程图其实就是算法的图形表现
此代码在单独的 js 文件中,可直接导入页面调用
使用了 canvas 画布实现图像绘制 抛物模式使用了简单的自由落体物理公式 烟花模式则是直接位移 使用了 transform 使图形变形实现视觉飘落感 设计了良好的框架解耦
- 先将模块导入项目
import f from './Fireworks.js'
- new 一个对象
var a = new f.Fireworks()
- 配置参数(下边有详细参数列表)
- 发射
a.launch()
参数名 | 类型 | 描述 |
---|---|---|
quantity | number | 碎片数量,建议大于shape 数组参数的长度 |
range | number | 发射范围,以angle 参数为中心的角度领域 |
speed | number | 发射初速度,此参数仅对抛物模式有作用 |
angle | number | 发射角度,角度制支持正负 |
position | array[number, number] | 发射初始位置,以左上为(0,0)点的坐标系 |
colors | array[string, ...] | 颜色,RGB制(仅当颜色模式为value 时才可为任意颜色制) |
colorsMode | string | 颜色模式,仅有range 范围模式和value 值模式 |
launchMode | string | 发射模式,仅有firework 烟花模式和parabola 抛物模式 |
shape | array[object, ...] | 碎片形状,仅支持arc 圆形rect 矩形text 文字三类对象(下面表格详解) |
gravity | number | 环境重力,对两种发射模式的落体运动有影响 |
isTransform | bool | 飘落模式,为真则会变形以实现飘落 |
- shape对象结构
对象 | 结构 |
---|---|
arc | {"arc": 半径, "ratio": 数量比例} |
rect | {"rect": [宽, 高], "ratio": 数量比例} |
text | {"text": [文字, 大小], "ratio": 数量比例} |
解决这个问题我首先想到的是:使项目结构化、易用化、可扩展、易维护 所以我封装起来,只需要导入模块,new一个对象即可,当然也可以自定义参数,使模块个性化
在写代码的过程中,先大体分好需要做那些动作,然后分离出来,解耦合,然后针对每个动作再细分出可重复利用的代码,降低冗余 正如你所见,大体动作被#region
符号折叠起来了,然后细分功能函数 在主流程函数launch()
中,清晰的动作逻辑,使代码阅读性大大提高,便于维护,正因如此,为了实现多炮同屏同步,也轻松了很多
本来是想使用自由落体公式加阻力浮力参数去实现烟花效果,折腾了一下午无果,虽然有想法,但是就是实现不起来,还是说明我的物理以及数学功底太差,放弃使用物理公式后,我就直接在发射和爆炸期间快速移动,然后达到爆炸时间点后自然下落,由于轻物会受到浮力作用,所以此时下落不能使用自由落体,便采用简单位移
至此,我已正式学软件3年,写代码约2w+行,涵盖C/C++、C#、Python、Java、PHP、Shell、JavaScript,代码量虽然不多,但每一次写代码,我都如同设计一件艺术品一样,只有这样,才能在每一次的代码中学习,也正是因为喜欢
在我前不久刚辞掉的工作中,我的领导问我为什么要走,我回答因为加班 生活和工作平衡,这也是最近GitHub上很火的一个抵制加班的项目宣言,有效的工作、充实美好的生活这样子,正是我所追求的 我不想每天起早上班,然后加班到晚上,回家累的葛优躺,连周末的好心态也被搞的躺床上不想动 我想工作有工作的需求代码,回家也有自己的想法去写代码,然后练练吉他、画会画,学些有意思的东西 我们并不是廉价劳动力,也不要做廉价劳动力,我们有自己的生活 最后领导给我说,只有你在工作时写代码,有甲方给提需求,这样代码才能更好,这样才有意义 我没怎么回答,如果连自己都做不了,哪能去漫天星河 最终还是辞掉了工作,尽管我非常喜欢这个团队氛围,我领导技术也非常厉害,但是我更喜欢生活
- 由于使用
requestAnimationFrame()
函数实现动画,所以会存在性能问题 比如突然切换进窗口的同时发射了礼花,礼花就会聚集,原因不详 比如第一炮礼花未完全消失的同时发射第二炮,会导致第二炮礼花距离更远,原因不详 但是当窗口稳定、礼花已完全落下时,比较稳定 以上两个问题并无特别大的影响 不过会有一个有趣的现象,短时间内连续发射礼花,会导致后面的礼花越来越远,以至于越过视窗 仔细排查代码无任何问题,最终把问题定位到时间点上,因为通过反向推测,只能是时间点的问题,但我甚至核查每个礼花碎片的时间点也没有异常,所以我暂时把问题归咎到这个函数上了,等有机会深入了解此函数再继续排查