所用到的知识点
- margin是外边距
- onload事件会在页面或图像加载完成后立即执行
body绑定onload方法可以确保js代码能够在页面加载完body标签之后就执行onload事件。
不然页面加载是自顶向下加载，例如我们在第1-10行定义一个script标签，里面的使用了$("#map"),而我们第11行是<div id="map">，这样就不会执行script标签里面与$("#map")相关的内容，因为在执行1-10行的代码的时候$("#map")没有找到对应的jQuery对象，因此只有其余的代码才得到执行。
js函数定义会在js代码加载时就全部被加载，所以比如我们在script标签前5行调用show函数，在script标签的第6行才开始定义show函数，那么是可以的。
- div.style.top = 10 是修改变量div的样式，使得它距离浏览器顶部10像素的距离（默认单位就是像素px）
我们把div.style.top设置为40,50之类的不会生效，因为它接收的应该是字符串，比如“40px”这样，而上面的10是特殊情况，我们应该每次都写成字符串。
document.onkeydown = function(e){}第一个参数是事件对象本身，可以任意命名，不一定为e。DOM的事件对象默认就是第一个自带参数，但是IE浏览器的事件对象是window.event，为了兼容，一般我们都var e = e || window.event;
js键盘事件的keyCode属性与ASCII编码无关，有独立的对照关系，我们用到keyCode值有下面4个：
keyCode值 | 对应按键
-|
37 | Left
38 | Up
39 | Right
40 | Down
- div.style.top=(parseInt(div.style.top)-20)+"px"这是因为div.style.top的值字符串，先转换为数值进行运算，最后还得转换回字符串（与字符串用+运算符连接就行了），
前面也讲过了div.style.top的值应该是字符串。所以我们写成
div.style.top ="200px";生效，但是写成div.style.top = 200;不生效
- appendChild()方法作用是插入一个子节点到当前对象里面的末尾。
我们在例子中给body添加子节点，也可以document.getElementById("myList").appendChild(newListItem);适用于其他标签，比如往ul标签里面添加li子节点。
- 移动的时候，应该是物体的边长+margin的距离，所以边长为19px，但是我们在移动的时候距离变化是20px
完成，代码传送门：https://github.com/xiaohuacc/snake/blob/index001/index001.html
