听指令的小方块（一）总结

题目地址： http://ife.baidu.com/course/detail/id/109

解题思路是：

通过改变小方块的定位来实现移动。

遇到的几个问题：

1. 如何制作1/4的蓝色背景方块，余下的是红色背景方块？

一开始我的思路是定制不用的样式，可以根据水平方向和垂直方向来设置两个 class，给父元素相对定位，给子元素绝对定位，通过操作它们的 top、left控制它们的方向，但是这个做到后面就推翻了，因为发现只要将蓝色边在上面的做出来，其余方向直接通过 transform 来控制就可以了。

2. 如何确定蓝色的边的指向

走了弯路，不过找到一种办法，就是看小方块旋转到哪边，然后通过判断旋转角度来实现效果。

注意两个坑。

1. 考虑 transform 不存在的情况
2. 考虑旋转角度是负数的情况
3. 通过 getComputedStyle 得到的值是个矩阵变换，需要通过转换才能拿到真正的度数

参考资料：

https://css-tricks.com/get-value-of-css-rotation-through-javascript/

http://codepen.io/jjeaton/pen/bzolH

3. 如何限制小方块的范围

使用 offsetTop\offsetLeft 来实现

 

遗留的问题：

因为我没有将父容器的宽度写死，而是根据元素的个数决定父容器的宽，并且使用了 margin: 50pxauto;问题来了，如果我改变了浏览器的宽度，那么有颜色的正方形就不能准确定位，只能通过刷新来解决，目前没想到可以用什么方式解决这个问题。

 

如何实现格子

js 实现： http://jsfiddle.net/yijiang/nsYyc/1/

纯 CSS 实现： http://jsfiddle.net/fexpxpq4/