04JS第9天 ----- js高级第3天 --- 案例

1、分析

小游戏中共有三个对象。一个是地图（Map）、一个是食物（Food）、一个是蛇（Snake）。

以面向对象的方式来开发，应该创建三个对象。

每个对象的特点：

地图Map：

宽width

高height

背景颜色backgroundColor

显示方法：show

食物Food：

宽width

高height

背景颜色backgroundColor

x轴坐标：0~29(每个坐标实际像素是20px)

y轴坐标：0~19（每个坐标实际像素是20px）

 

蛇Snake：

身体body（默认有三个div组成，其中一个蛇头，两段蛇身，都有颜色）

能够移动move

能够拐弯，改变移动方向

能够吃食物，变长

2、创建地图

3、创建食物

创建一食物，让它显示在body中。

食物没有和地图对齐，解决办法是让父级元素地图position是relative，让子元素食物position是absolute，并且让食物显示在地图中，而不是显示在body中。

所以修改Map，添加position属性，并且用一个属性_map来保存地图：

然后修改食物，让其显示在地图中即可：

4、创建蛇

蛇的每一节用一个div来表示，每一节都有宽度、高度、背景颜色、坐标。创建蛇，并让它显示到地图上。

5、让蛇移动

移动方向：默认先向右移动。

这样做有个问题，当蛇移动的时候，会调用show方法，让蛇从新显示。调用show方法，会一直循环创建div。所以看到的效果是蛇移动了，但是越走越长。

解决办法：

6、让蛇拐弯

控制蛇头即可，因为身体一直跟着蛇头走。

蛇头的方向肯定是上下左右四个方向，可以用一个属性来表示蛇的移动方向。

当蛇移动的时候，根据方向修改蛇头的坐标：

下面添加键盘事件，修改蛇的运行方向：

7、让蛇吃食物

蛇头和食物重叠，才算吃到食物。即在移动过程中，如果发现蛇头的坐标和食物的坐标一样，才表示吃到食物。

这样做，吃完食物，发现食物没有从新显示。修改Food函数：

8、让蛇加速

当蛇吃到食物的时候，让时间变小，速度加快：