鼠标跟随小飞机,发射子弹

需求:小飞机跟随鼠标移动,会发射子弹
鼠标跟随小飞机,发射子弹_第1张图片
效果:

  1. 小飞机会跟随鼠标移动。
  2. 每隔一段时间小飞机会发射一枚子弹
  3. 子弹会沿着发出时的位置向上移动

思路:

  1. 开场一个div,设置背景图片为小飞机。(本项目只需要一个div标签,不做代码展示)
  2. 设置鼠标移动事件,获取鼠标位置。
  3. 设置小飞机位置跟随鼠标。
  4. 设置间隔函数,动态获取子弹(即小球)。
  5. 设置间隔函数,更改小球的垂直方向的位置。

CSS代码:


JS代码:


难点:

  1. 小飞机跟随鼠标,位置居中
  2. 需要两个间隔函数,一个控制小球创建,一个控制小球移动
  3. 小球位置添加到body上
  4. 兼容性问题

你可能感兴趣的:(好玩的,小飞机,间隔函数,鼠标跟随)