cocos creator从零开发2048

在线预览 https://mirahs.github.io/cases/ 源码地址 https://gitee.com/mirahs/2048

Canvas节点下新建空节点并重命名为panelFailed，挂载Widget组件并勾选Top、Right、Bottom、Left并把这些属性都设置为0，挂载BlockInputEvents组件。 p

Canvas节点下新建Sprite (单色)并重命名为btnRestart，Position设置为280和402，Size设置为150x60，Color设置为#A69A91，挂载Button组件并设置

编辑scripts/Game.ts，添加lblScoreNow和lblScoreBest这两个属性。 拖拽节点到对应属性上。 编辑scripts/Game.ts，添加KEY_SCORE_BEST常量用

Canvas节点下新建Label (文字)并重命名为title，Color设置为#635B52，String输入2048，Font Size和Line Height都设置为80。 Canvas节点下新

编辑scripts/Game.ts，添加MOVE_DISTANCE常量设置能移动的距离。 添加_canTouchMove属性标识当前是否能触摸移动。 添加onTouchMove方法处理触摸移动逻辑。

编辑scripts/Game.ts，添加_moving属性标识当前是否移动中。 添加move方法移动格子。 添加4个方向的移动方法。 监听键盘上下左右控制键调用移动方法。 运行程序，敲击键盘的上下左右

数据和显示不分离 如果数据和显示分离，意味着它们要分开存储，这样就要用行和列来做唯一标识。 格子位置只计算一次 格子位置只在初始化的时候计算一次，然后在Grid脚本保存它的初始化位置，如果不保存，就要

新建scripts/Game.ts，内容如下，把它挂载到Canvas节点上。拖拽Canvas/grid/bg节点到bgNode属性上，拖拽Canvas/grid/root节点到rootNode属性上。

Canvas/grid节点下新建空节点并重命名为root，宽高设置为730x730。 Canvas/grid/root节点下新建Sprite (单色)，宽高设置为170x170。在新建的节点下新建La

场景背景 场景Canvas节点下新建Sprite (单色)并重命名为bg，再给bg挂载一个Widget组件，勾选Top、Right、Bottom、Left并把这些属性都设置为0，这样场景就会有一个全白

创建项目 设计分辨率设置 点击菜单项目 => 项目设置...，弹出项目项目设置面板后点击项目预览，设置好后点击保存按钮。 设计分辨率设置好后，以后新建场景默认大小是750x1334(这个大小在实际项目

软件版本 Cocos Creator 2.4.8，安装参考 cocos creator安装 编程语言 TypeScript 特点 数字和格子不分离 消除方向概念 得益于上面两点，代码逻辑更清晰，代码量