JS-贪吃蛇

630 阅读2分钟

Video_2021-07-25_141717.gif

设计思路:

  1. 每一节蛇身应当有自己的运动方向,每一节蛇身都是一个对象,而整条蛇有初始化生成蛇身的方法,以及获取到食物生长蛇身的方法。Ball为蛇身构造函数,Snake为整条蛇的构造函数
  2. 蛇和食物分离时,食物被吃后的处理是食物自己处理的,而不是蛇来处理的,代码不好分离时,就用回调
  3. 蛇方向改变时,会生成一个拐点,每一节蛇身都需要将这些拐点存储到数组中,一个拐点拥有的属性有位置坐标以及速度矢量(速度里以及包含了方向)
  4. 蛇的食物可以用单例的思想,一次性生成n个div作为食物,之后食物被吃,触发回调,哪个食物被吃,就重新生成,这里的出现生成本质上并没有删除和增加div,而是偷偷将那个div的位置改变,也可以同时改变大小
  5. 回顾设计,对蛇的控制是控制蛇头,这里就不可能给每个蛇身一个定时器,因此给整条蛇一个定时器,在蛇move中轮询蛇身move方法,由于每节蛇身都有当前的速度矢量,与拐点信息,可以处理出下一刻的蛇身位置
  6. 食物是否被吃,是蛇的动作引起的,只检测蛇头(即代表蛇身的第一个Ball)的中心位置与食物的中心位置是否小于某个值
  7. 蛇是有运动空间的,在new Snake时,传递一下父级div,div设置为相对定位
  8. 既然选择将食物与蛇分离,当然也要在new Snake时,传入一个食物实例

github地址: github.com/HYjey/tanch…