网页原版的2048是怎么做到方块移动呢?

Question

原版的游戏在这里http://gabrielecirulli.github.io/2048/
你在控制方块移动的时候,会发现方块真的有在向指定的方向移动,但是我用firebug分析了js事件,却找不到js在调用css3 translate函数(实际上我在css文件中找到了translate函数的使用,但是我确定这个效果并不作用在方块的移动,它作用在新方块的产生)

有谁能告诉我答案吗?方块是怎么移动的?

Answer 1

requestAnimationFrame js 的实现.

题主对 js 应该不熟悉, 就详细的说一下:
2048 定义了 16 个 cell, 并用 translate 调整了其位置, 具体的看一下相应的类名 tile, tile-position, 然后再每次键盘事件或者 touch 事件之后都调用 HTMLActuator 的 actuate 方法做 cell 的移动,合并,删除.
文中提到的 requestAnimationFrame 即是一个类似于 setTimeout 一样的函数, 传入一个 callback 进行动画操作, 而 HTMLActuator 的原型方法 actuate 做的事情就是对相应 cell 做类名 (如 applyClasses, positionClass) 的变换, 调整 tile-position, 也就是调整其 translate, 原理其实和 css3 的转换一样.
题主想了解方块的移动, 主要看一下 html_actuator.js, game_manager.js, grid.js, 相对来说还是其计算小方块的合并, 删除, 移动逻辑的 grid.js 复杂一点, 其他都比较容易理解.
(PS: 看源码切忌太急躁, 要静下心来看)

Answer 2

虽然楼主说得很坚决，但我还是认为这都是js实现的。
具体参考这个：http://saming.fr/p/2048/script.js