Hub

2048 for cocos2d-js

Thumb_豌豆荚截图20140407132338

Brief

A 2048 kind of demo made in JavaScript,base on Cocos2d-html5,Develop by CocosEditor, Runs on Android, iOS,Html5 & PC.

Description

Follow My Github,Many Cocos2d-js Games To Learn

FlappyBird: [https://github.com/makeapp/cocoseditor-flappybird]
PopStar: [https://github.com/makeapp/cocoseditor-popstar]
FruitNinja: [https://github.com/makeapp/cocoseditor-fruitninja]
MoonWarriors: [https://github.com/makeapp/cocoseditor-moonwarriors]
FruitAttack: [https://github.com/makeapp/cocoseditor-fruitattack]
TestsJavascript: [https://github.com/makeapp/cocoseditor-tests]
 
 

2048 Code Run

Base infomation on my csdn page:
[http://blog.csdn.net/touchsnow/article/category/22985527]

Run the demo,you must download and configure CocosEditor: [http://blog.csdn.net/touchsnow/article/details/19070665]
 
 

2048 Code Download

Gihtub:[https://github.com/makeapp/cocoseditor-2048]

 
 

2048 Code Analysis

1 init tables

MainLayer.prototype.onEnter = function () {
    //version
    this.versionNum = indexVersions;
    this.indexVersion = VERSIONS[this.versionNum];
    this.title.setString(this.indexVersion.name + "目标:" + this.indexVersion.array[this.indexVersion.array.length - 1] + "");

    var random1 = getRandom(4);
    var random2 = getRandom(4);
    while (random1 == random2) {
        random2 = getRandom(4);
    }

    var random11 = getRandom(4);
    var random22 = getRandom(4);

    this.tables = new Array(4);
    for (var i = 0; i < 4; i++) {
        var sprites = new Array(4);
        for (var j = 0; j < 4; j++) {
            if (i == random1 && j == random11) {
                sprites[j] = this.newNumber(i, j, 1);
            } else if (i == random2 && j == random22) {
                sprites[j] = this.newNumber(i, j, 1);
            } else {
                sprites[j] = this.newNumber(i, j, 0);
            }
        }
        this.tables[i] = sprites;
    }

    this.totalScore = 0;

};


MainLayer.prototype.newNumber = function (i, j, num) {
    var cell = cc.MySprite.create(this.rootNode, "5.png", this.getPosition(i, j), 1);
    var cellLabel = cc.MySprite.createLabel(cell, "");

    if (num > 0) {
        cell.setColor(COLOR[num]);
        cellLabel.setVisible(true);
        cellLabel.setString(this.indexVersion.array[num]);
        cellLabel.setFontSize(this.indexVersion.labelFontSize);
    } else {
        cellLabel.setVisible(false);
    }
    cell.data = {col: i, row: j, numberLabel: cellLabel, number: num};
    return cell;
};

2 four sides: left right up down

//direction left
MainLayer.prototype.leftCombineNumber = function () {
    for (var j = 0; j < 4; j++) {
        for (var i = 0; i < 4; i++) {
            var cell = this.tables[i][j];
            if (cell.data.number != 0) {
                var k = i + 1;
                while (k < 4) {
                    var nextCell = this.tables[k][j];
                    if (nextCell.data.number != 0) {
                        if (cell.data.number == nextCell.data.number) {
                            cell.data.number += 1;
                            nextCell.data.number = 0;
                            this.totalScore += SCORES[cell.data.number];
                        }
                        k = 4;
                        break;
                    }
                    k++;
                }
            }
        }
    }

    for (j = 0; j < 4; j++) {
        for (i = 0; i < 4; i++) {
            cell = this.tables[i][j];
            if (cell.data.number == 0) {
                k = i + 1;
                while (k < 4) {
                    nextCell = this.tables[k][j];
                    if (nextCell.data.number != 0) {
                        cell.data.number = nextCell.data.number;
                        nextCell.data.number = 0;
                        k = 4;
                    }
                    k++;
                }
            }
        }
    }

    this.refreshNumber();
};

//direction right
MainLayer.prototype.rightCombineNumber = function () {
    for (var j = 0; j < 4; j++) {
        for (var i = 3; i >= 0; i--) {
            var cell = this.tables[i][j];
            if (cell.data.number != 0) {
                var k = i - 1;
                while (k >= 0) {
                    var nextCell = this.tables[k][j];
                    if (nextCell.data.number != 0) {
                        if (cell.data.number == nextCell.data.number) {
                            cell.data.number += 1;
                            nextCell.data.number = 0;
                            this.totalScore += SCORES[cell.data.number];
                        }
                        k = -1;
                        break;
                    }
                    k--;
                }
            }
        }
    }

    for (j = 0; j < 4; j++) {
        for (i = 3; i >= 0; i--) {
            cell = this.tables[i][j];
            if (cell.data.number == 0) {
                k = i - 1;
                while (k >= 0) {
                    nextCell = this.tables[k][j];
                    if (nextCell.data.number != 0) {
                        cell.data.number = nextCell.data.number;
                        nextCell.data.number = 0;
                        k = -1;
                    }
                    k--;
                }
            }
        }
    }

    this.refreshNumber();
};

MainLayer.prototype.downCombineNumber = function () {
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            var cell = this.tables[i][j];
            if (cell.data.number != 0) {
                var k = j + 1;
                while (k < 4) {
                    var nextCell = this.tables[i][k];
                    if (nextCell.data.number != 0) {
                        if (cell.data.number == nextCell.data.number) {
                            cell.data.number += 1;
                            nextCell.data.number = 0;
                            this.totalScore += SCORES[cell.data.number];
                        }
                        k = 4;
                        break;
                    }
                    k++;
                }
            }
        }
    }

    for (i = 0; i < 4; i++) {
        for (j = 0; j < 4; j++) {
            cell = this.tables[i][j];
            if (cell.data.number == 0) {
                k = j + 1;
                while (k < 4) {
                    nextCell = this.tables[i][k];
                    if (nextCell.data.number != 0) {
                        cell.data.number = nextCell.data.number;
                        nextCell.data.number = 0;
                        k = 4;
                    }
                    k++;
                }
            }
        }
    }

    this.refreshNumber();
};

//touch up
MainLayer.prototype.upCombineNumber = function () {
    for (var i = 0; i < 4; i++) {
        for (var j = 3; j >= 0; j--) {
            var cell = this.tables[i][j];
            if (cell.data.number != 0) {
                var k = j - 1;
                while (k >= 0) {
                    var nextCell = this.tables[i][k];
                    if (nextCell.data.number != 0) {
                        if (cell.data.number == nextCell.data.number) {
                            cell.data.number += 1;
                            nextCell.data.number = 0;
                            this.totalScore += SCORES[cell.data.number];
                        }
                        k = -1;
                        break;
                    }
                    k--;
                }
            }
        }
    }

    for (i = 0; i < 4; i++) {
        for (j = 3; j >= 0; j--) {
            cell = this.tables[i][j];
            if (cell.data.number == 0) {
                k = j - 1;
                while (k >= 0) {
                    nextCell = this.tables[i][k];
                    if (nextCell.data.number != 0) {
                        cell.data.number = nextCell.data.number;
                        nextCell.data.number = 0;
                        k = -1;
                    }
                    k--;
                }
            }
        }
    }

    this.refreshNumber();
};

3 refresh tables

MainLayer.prototype.refreshNumber = function () {
    var emptyCellList = [];
    for (var i = 0; i < 4; i++) {
        var numbers = " ";
        for (var j = 0; j < 4; j++) {
            var cell = this.tables[i][j];
            var label = cell.data.numberLabel;
            var cellNumber = cell.data.number;
            if (cellNumber != 0) {
                cell.setColor(COLOR[cellNumber]);
                label.setString(this.indexVersion.array[cellNumber] + " ");
                label.setFontSize(this.indexVersion.labelFontSize);
                label.setVisible(true);
                if (cellNumber == (this.indexVersion.array.length - 1)) {
                    //check success
                    var toast = cc.Toast.create(this.rootNode, "成功到达:" + this.indexVersion.array[cellNumber], 2);
                    toast.setColor(cc.c3b(255, 0, 0));
                    this.rootNode.scheduleOnce(function () {
                        cc.BuilderReader.runScene("", "MainLayer");
                    }, 2)
                }
            } else {
                cell.setColor(COLOR[cellNumber]);
                label.setVisible(false);
                emptyCellList.push(cell);
            }
            numbers += "  " + cellNumber;
        }
        cc.log("numbers==" + numbers);
    }


    //score
    this.scoreLabel.setString("分数:" + this.totalScore);

    if (emptyCellList.length < 1) {
        //check fail
        var toast = cc.Toast.create(this.rootNode, "失败!", 2);
        toast.setColor(cc.c3b(255, 0, 0));
        this.rootNode.scheduleOnce(function () {
            cc.BuilderReader.runScene("", "MainLayer");
        }, 2)
    } else {
        //create random cell
        var randomCell = emptyCellList[getRandom(emptyCellList.length)];
        randomCell.data.number = 1;
        randomCell.data.numberLabel.setVisible(true);
        randomCell.data.numberLabel.setString(VERSIONS[this.versionNum].array[1] + "");
        randomCell.data.numberLabel.setFontSize(this.indexVersion.labelFontSize);
        randomCell.setColor(COLOR[1]);
        randomCell.runAction(cc.Sequence.create(cc.ScaleTo.create(0, 0.8), cc.ScaleTo.create(0.5, 1)));

    }

};

4 check touch direction

MainLayer.prototype.onTouchesEnded = function (touches, event) {
    this.pEnded = touches[0].getLocation();
    if (this.pBegan) {
        if (this.pEnded.x - this.pBegan.x > 50) {
            this.rightCombineNumber();
        }

        else if (this.pEnded.x - this.pBegan.x < -50) {
            this.leftCombineNumber();
        }

        else if (this.pEnded.y - this.pBegan.y > 50) {
            this.upCombineNumber();
        }

        else if (this.pEnded.y - this.pBegan.y < -50) {
            this.downCombineNumber();
        }
    }
};

this is over

Comments

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.