swift从零开始--2048游戏动画

最近忙成狗，抽空继续研究学习下我的2048小游戏。之前已经将主界面及事件响应都加上了，今天先完成小方块的移动效果，让方块动起来。

1. 准备工作

之前项目里面已经实现了滑动屏幕随机添加方块，现在改成初始时随机生成2个方块，滑动屏幕时，按滑动方向移动方块，实现方块滑动的动画效果。在BoardPanel类的onViewDid方法里增加这个生成随机方块的函数即可。

        // 初始随机生成2个方块
        insertRandUnit()
        insertRandUnit()

2. 添加动画

发现之前只定义了一个gridArr不够，需要对之前逻辑进行修改。添加动画之前，需要再定义一个数组，存数字块的labe对象，相当于面板上铺两层label，一层作为背景，一层作为可移动的块。再定义一个indexArr, 存放数字块的坐标，如果位置上没有数字则值设置为-1.

    var digitArr = [UILabel]()  // 数字块
    // 存放数字快的位置index。下标对应0-15个grid，值对应digitArr的下标。
    var indexArr = [Int](repeating: -1, count: 16 )
       // 随机插入方块的方法也要跟着改一下
    func insertRandUnit() {
        let emptyIndexArr = getRandEmptyGrids()
        NSLog(String(emptyIndexArr!.count))
        if emptyIndexArr!.isEmpty {
            NSLog("全放满了")
            return
        }
        let rand = Int(arc4random_uniform(UInt32(emptyIndexArr!.count)))
        let index = emptyIndexArr![rand]
        let label = getEmptyGrid(index: index)
        self.addSubview(label)   //记得加到view中
        digitArr.append(label)
        indexArr[index] = digitArr.count - 1
        label.text = "2"
        label.backgroundColor = UIColor(red: 0.7, green: 0.8, blue: 1, alpha: 1)
    }
    // 获取空的grid的index数组
    func getRandEmptyGrids() -> [Int]! {
        var emptyIndexArr = [Int]()
        for i in 0 ..< DIM*DIM {
            if(indexArr[i] == -1) {
                emptyIndexArr.append(i)
            }
        }
        return emptyIndexArr
    }

添加动画，测试下label向上移动：

    // 移动动画
    func moveAnimate(fromIndex : Int, toIndex: Int) {
        let from = digitArr[indexArr[fromIndex]]
        let to = gridArr[toIndex]
       // 这里是添加动画的代码，是不是很简单?特效需要研究
        UIView.animate(withDuration: 0.5) {
            from.center.x = to.center.x
            from.center.y = to.center.y
        }
        // 交换移动的两个grid
        indexArr[toIndex] = indexArr[fromIndex]
        indexArr[fromIndex] = -1  //置空
    }
    // 测试向上移动一格
    func moveUpAnimate() {
        for i in 0 ..< DIM*DIM {
            let index = indexArr[i]
            if(index > 0 && i > 3) {
                // 向上i移动一格
                moveAnimate(fromIndex: i, toIndex: i-4)
                break;
            }
        }
    }

3. 下一步计划

现在方块已经按预期动起来了，接下来就是合并方块了，就可以真的装手机里去玩了，很期待。

往期文章

swift实现2048小游戏其它文章入口在下面，感兴趣的朋友可以进去看看，有问题可以给我留言哦，大家相互进步。
swift学习笔记