CocosCreator | 2048使用Typescript实现及原理

查看所有代码请点击 2048-typescript-cocoscreator

先放上游戏体验的链接  Saber2pr/2048-typescript-cocoscreator

算法来自2048 游戏实现原理

算法看链接里就好，里面提供了最最核心的数学原理，就是不知道是哪位大佬想出来的，那位博主看起来也是转的。

言归正传，我们该怎么把它做成游戏。

先搭建一个这样子的场景

中间的正方形节点就是2048卡片的容器

然后我们写个接口，处理这个容器里节点的逻辑

/*
 * @Author: AK-12 
 * @Date: 2018-11-02 13:06:06 
 * @Last Modified by: AK-12
 * @Last Modified time: 2018-11-03 19:03:38
 */
export default interface ILayout {
  initEdge(size: {
    width: { start: number; end: number }
    height: { start: number; end: number }
  }): void
  draw(step?: number): void
  log(): void
}

分别是初始化边界方法，绘图方法，输出调试信息方法

然后实现接口

/*
 * @Author: AK-12 
 * @Date: 2018-11-01 20:07:29 
 * @Last Modified by: AK-12
 * @Last Modified time: 2018-11-03 20:14:09
 */
import ILayout from './ILayout'
import Model from './Model'
import { visitArray, computed, judgePos } from './MathVec'
import Data from './Data'
/**
 *Block节点视图的逻辑
 *
 * @export
 * @class Layout
 * @implements {ILayout}
 */
export default class Layout implements ILayout {
  private background: cc.Node
  private edge: {
    width: { start: number; end: number }
    height: { start: number; end: number }
  }
  private start: cc.Vec2
  private color = {
    2: cc.color(237, 241, 21, 255),
    4: cc.color(241, 180, 21, 255),
    8: cc.color(171, 241, 21, 255),
    16: cc.color(149, 160, 216, 255),
    32: cc.color(187, 149, 216, 255),
    64: cc.color(216, 149, 209, 255),
    128: cc.color(28, 118, 156, 255),
    256: cc.color(16, 74, 99, 255),
    512: cc.color(168, 85, 25, 255),
    1024: cc.color(236, 122, 38, 255),
    2048: cc.color(236, 86, 33, 255)