cocos creator从零开发2048(06)-格子移动逻辑和键盘控制移动

编辑scripts/Game.ts，添加_moving属性标识当前是否移动中。

private gridsReversed: Grid[][] = []

private _moving = false

添加move方法移动格子。

private move(grids: Grid[]) {
    let lastIdx = grids.length - 1
    let lastNum = grids[lastIdx].num

    for (let i = grids.length - 2; i >= 0; i--) {
        const grid = grids[i]
        if (!grid.num) continue

        const lastGrid = grids[lastIdx]
        const num = grid.num

        if (!lastNum) {//最后一个格子是空格子，直接往后移动
            this._moving = true
            lastNum = num

            grid.stopTween()
            cc.tween(grid.node).
            to(DURATION, { x: lastGrid.pos.x, y: lastGrid.pos.y }).
            call(() => {
                lastGrid.num = num
                grid.reset()
            }).start()
        } else if (lastNum == num) {//数字一样合并
            this._moving = true
            lastIdx -= 1 //合并后不能再次合并，最后一个格子往前移动一个位置并设置为空格子
            lastNum = 0

            grid.stopTween()
            cc.tween(grid.node).
            to(DURATION, { x: lastGrid.pos.x, y: lastGrid.pos.y }).
            call(() => {
                lastGrid.num = num * 2
                grid.reset()
                cc.tween(lastGrid.node).
                to(DURATION * 0.4, { scale: 1.1 }).
                delay(DURATION * 0.2).
                to(DURATION * 0.3, { scale: 1 }).start()
            }).start()
        } else {//下面有数字但不一样
            if (i + 1 == lastIdx) {//不能往下移动
                lastIdx = i
                lastNum = num
            } else {//往最后格子的上一个格子移动
                this._moving = true
                lastIdx -= 1
                lastNum = num

                const lastPrevGrid = grids[lastIdx]

                grid.stopTween()
                cc.tween(grid.node).
                to(DURATION, { x: lastPrevGrid.pos.x, y: lastPrevGrid.pos.y }).
                call(() => {
                    lastPrevGrid.num = num
                    grid.reset()
                }).start()
            }
        }
    }
}

添加4个方向的移动方法。

private moveUp() {
    this.gridsReversed.forEach(itemsTmp => this.move(itemsTmp.slice().reverse()))
    this.onMoveAfter()
}

private moveDown() {
    this.gridsReversed.forEach(items => this.move(items))
    this.onMoveAfter()
}

private moveLeft() {
    this.grids.forEach(itemsTmp => this.move(itemsTmp.slice().reverse()))
    this.onMoveAfter()
}

private moveRight() {
    this.grids.forEach(items => this.move(items))
    this.onMoveAfter()
}

private onMoveAfter() {
    if (!this._moving) return

    this.scheduleOnce(() => {
        this._moving = false
        this.randGrid()
    }, DURATION)
}

监听键盘上下左右控制键调用移动方法。

protected start(): void {
    this.randGrid()
    this.randGrid()

    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this)

    cc.game.canvas.focus()
}


private onKeyDown(event: cc.Event.EventKeyboard) {
    if (this._moving) return

    if (event.keyCode == cc.macro.KEY.up) {
        this.moveUp()
    } else if (event.keyCode == cc.macro.KEY.down) {
        this.moveDown()
    } else if (event.keyCode == cc.macro.KEY.left) {
        this.moveLeft()
    } else if (event.keyCode == cc.macro.KEY.right) {
        this.moveRight()
    }
}

运行程序，敲击键盘的上下左右控制键能移动格子了。