JS 编写贪吃蛇

1、分析项目需求

使用键盘的方向键控制蛇的运动方向并吃到相应的食物。

2、使用面向对象的思想分析贪吃蛇

面向对象的核心思想：把一个系统分解为若干个事务，每个事务就是一个类

分析贪吃蛇有哪些事务：

地图

食物

蛇

2、确定项目的开发顺序

① 地图 ② 食物 ③ 蛇

3、定义地图类

在Javascript中，任何一个类都存在两部分：属性和方法

定义地图类：

属性：

宽度 ：800px

高度 ：400px

背景颜色：灰色

定位方式：absolute（绝对定位）

方法：show方法

用于显示地图

4、定义window.onload方法，实例化地图类

5、定义食物类

食物类也有自己的属性和方法

属性：

宽度：20px

高度：20px

背景颜色：green

定位方式：absolute

横纵坐标：默认0和0

方法：show方法

用于随机显示食物

6、实例化食物类并显示在地图中

7、算法：随机显示食物坐标

横坐标：Math.floor(Math.random()*40)    

纵坐标：Math.floor(Math.random()*20)

8、定义蛇类

属性：

宽度：20

高度：20

定位方式：absolute

定义蛇节3节：使用数组保存蛇节，横坐标、纵坐标（横坐标连续，纵坐标相等），颜色

方法：show方法，用于显示蛇节信息

9、实例化Snake类，显示蛇节信息

10、让蛇运动起来

11、使用定时器让蛇运动起来

12、定义setDirect方法，判断键盘键值并设置蛇的运动方向

13、判断蛇是否吃到食物

如果蛇头坐标与食物坐标完全重合，代表吃到食物