代码思路
首先在init函数里面创建4个小方块，然后调用show函数更改小方块的位置，这样就得到我们想要的方块图形。然后绑定键盘事件，按下键盘的方向键或空格键时，页面上的方块图形就会作出对应的动作。
-
show方法（用于移动方块到新的位置，不是定义方块）
就是在页面上找4个点坐标（以此为方块左上角的点），将页面初始化创建的方块左上角的点移动到这4个点坐标，组成方块图形。我们把这4个点的坐标保存到shape数组。 -
move_level和move_direct实现方块图形整体的移动
水平方向的移动本质上就是4左上角坐标的水平移动---得到最新的shape坐标数据，然后调用show方法把4个小方块与最新的这四个点坐标数据对号入座---在新的坐标显示出图形，看起来就像方块图形的移动。
垂直方向的移动move_direct也是一样的道理。 -
方块图形的旋转也是shape坐标数据变更后调用show方法把方块左上角的点移动到新的坐标数据上。旋转的坐标变更规律就不细说了。
所需知识点
- 一开始就需要使用的函数都写到init函数里面，其它按需调用的函数就写在init()函数外面。
- 每个方块边长设置为19px，margin为1px的作用这里就显现出来了。如果我们margin设置为0px且方块设置边长20px，那面我们看到的图形不会有4个方块组成图形的效果（也就是没有间隔，看不出一个大的图形是4个小方块拼成的）。
absolute绝对位置情况下，图形可能相互覆盖（所以上面我们单设置边长为20px就看不到方块间间隔，不用设置margin为0px），如果使用浮动布局那么margin肯定生效，所以图形之间肯定存在空白间隔。
错误的旋转
注意，上面的旋转规律代码需要结合相对位置进行使用，现在是错误的。目前的效果是我们刚刷新页面进行旋转是正确的，但是方块图形一旦移动到其他位置进行旋转就错误了。正确的旋转方案是寻找一个与图形保持固定距离的点，旋转也以此为根据，确保图形不会偏离到很远的地方。
完成，代码传送门：https://github.com/xiaohuacc/snake/blob/index002/index002.html
网友评论