javascript - 网页原版的2048是怎么做到方块移动呢?
伊谢尔伦
伊谢尔伦 2017-04-10 14:47:07
[JavaScript讨论组]

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

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(2)
伊谢尔伦

requestAnimationFrame js 的实现.

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

PHP中文网

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号