2048 base

app.js

const rnd = (n = 4) => Math.floor(Math.random() * n)

class GameScene extends Phaser.Scene {
    constructor() {
        super({ key: 'gameScene' });
        this.rows = 4;
        this.cols = 4;
        this.grid = new Array(4);
        for (let r = 0; r < this.rows; r++) {
            this.grid[r] = new Array(4);
            for (let c = 0; c < this.cols; c++) {
                this.grid[r][c] = { v: 0, canUpgrade: true };
            }
        }
        this.moveLock = false; // for tween
        this.addCell();
        this.addCell();
    }
    hasEmptyCell() {
        for (let r = 0; r < this.rows; r++) {
            for (let c = 0; c < this.cols; c++) {
                if (this.grid[r][c].v === 0) {
                    return true;
                }
            }
        }
    }
    addCell() {
        let zeroFilledArray = this.grid
            .reduce((acc, val) => acc.concat(val), [])
            .filter(o=>o.v === 0);
        let randIndex = Math.floor(Math.random() * (zeroFilledArray.length -1));
        zeroFilledArray[randIndex].v = 2;
    }
    moveCell(deltaRow, deltaCol) {
        console.log('******', deltaRow, deltaCol);
        for (let r = 0; r < this.rows; r++) {
            // 移動先の要素から確認していく
            // 例えば、Dキーを押して、左から右にセルが動くとき、
            // 一番右のセルから一番左のセルへ調べていく
            // row[2, 0, 2, 2]の場合、row[3]から調べていきrow[0]が最後になる
            // row[3]は、何も変更なし。
            // row[2]は、右のセルと結合できるので、結合し結果をrow[3]に格納
            // row[2, 0, 0, 4]
            // row[1]=0は何もしない
            // row[0]=2は、右側と結合できないので、row[0, 0, 2, 4]となる。
            // 移動後、ランダムでセル2を生成
            for (let c = 0; c < this.cols; c++) {
                let rowToWatch = deltaRow == 1 ? (4 - 1) - r : r;
                let colToWatch = deltaCol == 1 ? (4 - 1) - c : c;
                let currentTileValue = this.grid[rowToWatch][colToWatch].v;

                // セルがある場合
                if (currentTileValue !== 0) {
                    let rowSteps = deltaRow;
                    let colSteps = deltaCol;
                    // 隣が0か、端まで場合、スキップする。
                    while (this.isInsideBoard(rowToWatch + rowSteps, colToWatch + colSteps) && this.grid[rowToWatch + rowSteps][colToWatch + colSteps].v === 0) {
                        rowSteps += deltaRow;
                        colSteps += deltaCol;
                    }

                    // 隣のセルがボード内で、値が同じ場合で、まだ両方とも更新可能な場合は、結合する。
                    if (this.isInsideBoard(rowToWatch + rowSteps, colToWatch + colSteps)
                        && this.grid[rowToWatch + rowSteps][colToWatch + colSteps].v === currentTileValue
                        && this.grid[rowToWatch + rowSteps][colToWatch + colSteps].canUpgrade
                        && this.grid[rowToWatch][colToWatch].canUpgrade) {
                        this.grid[rowToWatch + rowSteps][colToWatch + colSteps].v *= 2;
                        this.grid[rowToWatch + rowSteps][colToWatch + colSteps].canUpgrade = false;

                        this.grid[rowToWatch][colToWatch].v = 0;
                        //this.grid[rowToWatch][colToWatch].canUpgrade
                    } else { // 隣が空で移動できる場合
                        // todo:此処の意味
                        rowSteps -= deltaRow;
                        colSteps -= deltaCol;
                        if (rowSteps !== 0 || colSteps !== 0) {
                            this.grid[rowToWatch + rowSteps][colToWatch + colSteps].v = currentTileValue;
                            this.grid[rowToWatch][colToWatch].v = 0;
                        }
                    }
                }
            }
        }
    }
    isInsideBoard(row, col) {
        return row >= 0 && col >= 0 && row < this.rows && col < this.cols;
    }
    preload() {
    }
    createCells() {
        for (let row = 0; row < this.rows; row++) {
            for (let col = 0; col < this.cols; col++) {
                this.grid[row][col].display = this.add.text(col * 16, row * 16, this.grid[row][col].v, { fontSize: '16px' })
            }
        }
    }
    drawCells() {
        for (let row = 0; row < this.rows; row++) {
            for (let col = 0; col < this.cols; col++) {
                this.grid[row][col].display.setText(this.grid[row][col].v);
            }
        }
    }
    resetCells() {
        for (let row = 0; row < this.rows; row++) {
            for (let col = 0; col < this.cols; col++) {
                this.grid[row][col].canUpgrade = true;
            }
        }
    }
    create() {
        console.log('create');
        this.createCells();
        this.input.keyboard.on('keydown', function (event) { //keybaord event
            this.moveLock = true;
            switch (event.key) {
                case 'w':
                    console.log('w');
                    this.moveCell(-1, 0); // w
                    break;
                case 'a':
                    console.log('a');
                    this.moveCell(0, -1); // a
                    break;
                case 's':
                    console.log('s');
                    this.moveCell(1, 0);  // s
                    break;
                case 'd':
                    console.log('d');
                    this.moveCell(0, 1);  // d
                    break;
            }
            this.moveLock = false;
            this.resetCells();
            this.addCell();
            this.drawCells();

        }, this);
    }
}
var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 400,
    backgroundColor: '#000000',
    scene: [GameScene]
};
var game = new Phaser.Game(config);