目标

游戏的目的是用来体会 JavaScript高级语法的使用，暂时不需要具备抽象对象的能力。使用面向对象的方式分析问题，需要一个漫长的积累过程。

搭建页面

放一个容器盛放游戏场景di v#map，设置样式

map {

width : 800px;

height: 600px;

background-color : #ccc;

position: relative;

}

分析对象

游戏对象Game

·蛇对象Snake

·食物对象 Food

创建食物对象

·创建Food 的构造函数,并设置属性

·x

.y

. width

. height

. color

·通过原型设置方法

render 随机创建一个食物对象，并输出到map 上

·通过自调用函数，进行封装，通过window暴露Food对象

创建蛇对象

·创建Snake的构造函数,并设置属性

. width蛇节的宽度默认20

. height蛇节的高度默认20

body数组，蛇的头部和身体，第一个位置是蛇头

. direction蛇运动的方向默认right可以是 left top bottom

·通过原型设置方法

render 随机创建一个蛇对象，并输出到map 上

·通过自调用函数，进行封装，通过window暴露Snake对象

创建游戏对象

·创建Game的构造函数,并设置属性

. food

. snakeo

· map

·通过原型设置方法

start 开始游戏（绘制所有游戏对象，渲染食物对象和蛇对象)

·通过自调用函数，进行封装，通过window暴露Game对象

游戏逻辑1

写蛇的move方法

·在蛇对象(snake.js)中，在 Snake的原型上新增move方法

·1.让蛇移动起来，把蛇身体的每一部分往前移动一下

·2.蛇头部分根据不同的方向决定往哪里移动

游戏逻辑2

让蛇自己动起来

·在snake中添加删除蛇的私有方法，在 render 中调用

在 game. js 中添加runSnake 的私有方法，

开启定时器调用蛇的move和 render方法，让蛇动起来

·判断蛇是否撞墙

在 game. js 中添加 bindKey 的私有方法，通过键盘控制蛇的移动方向,在start方法中调用bindKey

游戏逻辑3

判断蛇是否吃到食物

在 Snake 的move 方法中判断在移动的过程中蛇是否吃到食物

·如果蛇头和食物的位置重合代表吃到食物

·食物的坐标是像素，蛇的坐标是几个宽度，需要进行转换

·吃到食物，往蛇节的最后加一节

·最后把现在的食物对象删除，并重新随机渲染一个食物对象

其他处理1

把html中的 js代码放到 index.js 中

避免 html 中出现 js 代码

其他处理2

自调用函数必须加分号

其他处理3

自调用函数的参数

·传入window对象:将来代码压缩的时候，可以吧function (window)压缩成function

(w)

·传入undefined

·在将来会看到别人写的代码中会把undefined作为函数的参数(当前案例没有使用)·因为在有的老版本的浏览器中 undefined 可以被重新赋值，防止undefined被重新赋值