虽然楼主说得很坚决,但我还是认为这都是js实现的。
具体参考这个:http://saming.fr/p/2048/script.js
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: 看源码切忌太急躁, 要静下心来看)