學習mpvue : 使用mpvue實現2048小程序

2048 小程序移植版

使用mpvue編寫的2048小程序, 僅供交流學習.

圖片展現

核心代碼

初始化

[00][01][02][03]
[10][11][12][13]
[20][21][22][23]
[30][31][32][33]

(例)左移

假設
索引爲 => [00][01][02][03]
對應值 =>  2   2   0   4

1.創建一個棧
2.從左入棧,若是入棧元素爲0, 不作任何處理
    不然每入一個棧以前和棧頂元素作對比
        若是和棧頂元素不一樣,入棧 {number: x, flag: false}
        若是和棧頂元素相同,而且flag==false把當前須要入棧的元素拋棄,把棧頂的元素拋出來,並乘以2,加上flag = true,防止屢次累加
3.循環完成一輪以後進行解構賦值
    棧底第一個的值賦值給[00]
    棧底第二個的值賦值給[01]
    棧底第三個的值賦值給[02]
    棧底第四個的值賦值給[03]

步驟展現
1. [00] => 2 須要入棧 {number:2, falg: false}
 
|{number:2, falg: false}|
|_______________________|
 
2. [01] => 2  須要入棧 {number:2, falg: false} , 和棧頂對比, 能夠合併
 
|{number:2, falg: false}|   
|_______________________|
            ∨
|{number:4, falg: true }|
|_______________________|
 
4. [02] => 0 直接拋棄
 
|{number:4, falg: true }|
|_______________________|
 
5. [03] => 4 須要入棧 {number:2, falg: false}, 和棧頂對比, 雖然數值同樣,可是flag=true, 沒法合併, 入棧
 
|{number:4, falg: flase}|
|{number:4, falg: true }|
|_______________________|
 
--完成入棧, 進行賦值解構--
[0][0] = 4
[0][1] = 4
[0][2] = 0
[0][3] = 0

代碼實現

for (let i = 0; i < 4; i++) {
    var stack = new Stack()  // 利用數組實現的棧結構
    for (let j = 0; j < 4; j++) {
        if (this.pie[i][j].number != 0) {
            const top = stack.getTop()
            if (!top.lock && top.number == this.pie[i][j].number) {
                const current = stack.pop()
                current.number *= 2
                current.lock = true
                stack.push(current)
            } else {
                stack.push({ number: this.pie[i][j].number, lock: false })
            }
        }
    }
    for (let j = 0; j < 4; j++) {
        this.pie[i][j].number = stack.data[j] ? stack.data[j].number : 0
    }
}

github : https://github.com/MasterJoyH...