实现思路
模拟出一个屏幕，在屏幕里进行游戏操作。这点的实现就是---在页面上加一个18行10列的div块，给这个div块添加样式.container.
限制方块图形只能在屏幕内移动和旋转。就是定义一个函数check，取方块图形上下左右的4个最值点，与容器的4个最值点进行比较。
在move函数和rotate函数里面，先调用check函数判断移动或旋转后方块图形的4个最值坐标会不会越出屏幕边界，如果会直接返回false，不去修改相对位置的坐标或者修改shape数据。
如果不会越界，才去修改相对位置坐标或把新的newShape数据覆盖旧的shape数据，然后调用show方法把4个方块的左上角点移动到新的4个坐标点。
概况工作就是添加一个check函数的定义，然后在move函数和rotate函数里面都调用一下check函数。check函数返回true表示没越界，返回false表示越界。
注意：
容器和方块的margin必须一致，因为它们的margin都是相对浏览器页面的边距（它们都是在DOM树里面是同一层次，方块并非容器的子节点，所以方块的margin不是距离容器的边距。）
如果我们容器的margin设置为1px;而方块的margin设置为10px，那么容器在页面的水平位置是1px-201px，而方块在页面的活动范围则是10px到210px之间，这样就会导致方块向左移动会与最左侧存在一点点间隔，向右移动会超出容器边界一点点。竖直的情况也是一样。
小问题分析及解决
这样我们该功能开发完了，不过我们刷新页面，可以看到方块图形最上方和最左侧可以与容器边界重合，但是方块图形距离最右边和最底部有1px的间隔。
这是因为方块的边长是19px，加上每个方向两个1px的间隔，实际上每个小方块在页面占据21px21px的空间，只不过我们看到颜色填充的部分只有19px19px。
因为margin为1px，所以方块在最左边(0,top)在页面上实际是(1,top)。每次移动以左上角的坐标右移20px像素，可以移动9次到第10列，所以水平方向上移动范围是0-180，对应浏览器页面上移动范围是1px-181px。在第181px开始绘制19px*19px的方块，这样在红色方块最右边的距离是181+19=200px。而容器最右侧是1px+width=201px，所以可以看到方块最右侧与容器存在1px的间隔，竖直方向上同理。
解决方案是：既然方块在浏览器页面上水平最值是1px～200px,那么我们就设置容器水平最值为0px~201px,于是设置容器margin为0px，width为201px；垂直方向同理。
完成，代码传送门：https://github.com/xiaohuacc/snake/blob/index004/index004.html
