js 实现烟花效果

js 面向对象实现烟花效果,放烟花小游戏


烟花上升

烟花炸开

烟花

效果分析

结构分析

  1. 大盒子做夜空
  2. 点击的时候生成一个小烟花
  3. 小烟花升空后生成很多小烟花
  4. 让很多小烟花移动到一个随机位置

效果分析

  1. 大盒子点击事件
  2. 生成小烟花,设置在大盒子最底部,横向位置是鼠标所点的位置。放到大盒子中,调用运动函数移动到鼠标所在高度
  3. 将小烟花删掉,并生成很多小烟花,设置成圆形,位置就是鼠标所点击的位置,随机颜色
  4. 让生成的很多小烟花移动到随机位置,移动后将很多小烟花从大盒子删除




烟花







你可能感兴趣的:(js 实现烟花效果)