-
观察项目的对象有哪些?
- 地图
- 宽、高、背景颜色
- 食物
- 宽、高、背景颜色、坐标值
- 小蛇
- 宽、高、背景颜色、坐标值(包括蛇头和蛇身—对象)
- 游戏
- 食物初始化、小蛇初始化、相应事件的初始化
- 地图
-
编写构造各对象的构造函数与初始化
-
地图构造函数
function map(width,height,color){ this.width = width || 500; this.height = height || 500; this.color = color; }
-
地图的初始化
map.prototype.init = function(body){ let div = document.createElement('div'); div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.backgroundColor = this.color; body.appendChild(div); }
以下就不一一放代码了
-
食物构造函数
-
食物的初始化
-
食物的随机产生方法
-
小蛇构造函数
-
小蛇的初始化
-
小蛇的移动方法
-
游戏对象构造函数
-
游戏对象的初始化
-
-
本项目中需要注意的地方
- 食物的每次初始化(包括被小蛇吃了之后),需要将上一次食物清除,如果未清除则会在地图上显示多个食物
- 小蛇的移动也需要清除上一次所记录的位置,未清除则会观察到小蛇的长度在一直增加,需要注意的是清除的顺序是先清除尾部,再到头部
- 小蛇的每次移动,是蛇头与蛇身分开进行编写的,蛇身的移动是通过改变第三节与第二节蛇身的位置进行移动,蛇头的移动需要先判断方向,再进行移动