cocos creator实例--CocosCreator实现的1024游戏

效果预览

cocos creator实例--CocosCreator实现的1024游戏_第1张图片

游戏介绍

● Github上的代码,不能进行合并操作,修改以后,功能类似2048,空白块赏随机位置,生成2,可以往左、右、上、下滑动,数字会朝着指定方向运动,相邻元素如果相同,则合并。

游戏代码参考:https://github.com/potato47/1024

 

  工程结构介绍

● 游戏分3个场景,game、sleep、success,sleep是不玩显示的,success是成功显示的,game是游戏核心场景,玩游戏都在此场景进行。

cocos creator实例--CocosCreator实现的1024游戏_第2张图片

  • 游戏中的数字块都在TileLayer节点上,游戏核心逻辑Map挂在到Map节点上。

cocos creator实例--CocosCreator实现的1024游戏_第3张图片

  • 每个数字块,通过对预制初始化,放置在界面上,预制Tile负责数字块的显示,挂在有Tile脚本组件。

cocos creator实例--CocosCreator实现的1024游戏_第4张图片

 

  算法介绍

● 游戏的核心算法在Map脚本上,通过滑动结束点和起始点,判断滑动的方向,可以向左、右、上、下滑动,滑动后执行相应的逻辑onLeftSlide、onRightSlide、onUpSlide、onDownSlide,根据方向进行合并操作,相邻的元素,如果是相同的则合并,如果是空的,则向滑动方向移动。

● 核心的算法mergeArray,对传入的数组往右移动,然后相同的合并。

● 如四格的数字分别是[2,0,0,2],往右滑动以后,就会变成[0,0,2,2],最右边的相同,就执行合并操作,最终变成[0,0,0,4]。

● 又如[2,0,2,2],第一步移动后变成[0,2,2,2],从最后侧开始合并,合并第一步变成[0,2,0,4],再移动变成[0,0,2,4]。

● 类似上述操作,无论是向上、下、左、右滑动,只需要改变传入的数组元素的顺序即可。

//---------------Map.js------------------------

cc.Class({
    extends: cc.Component,

    properties: {
        tilePrefab: cc.Prefab,
        tileLayer: cc.Node,
    },

    // use this for initialization
    onLoad: function () {
        cc.map = this;
        this.mapWidth = this.node.width;
        this.tileWidth = this.mapWidth / 4;
        this.g = this.getComponent(cc.Graphics);
        this.touchStartPosition = cc.v2();
        this.touchEndPosition = cc.v2();
        this.node.on(cc.Node.EventType.TOUCH_START, (event) => {
            this.touchStartPosition = event.getLocation();
        });
        this.node.on(cc.Node.EventType.TOUCH_END, (event) => {
            this.touchEndPosition = event.getLocation();
            let offsetX = this.touchEndPosition.x - this.touchStartPosition.x;
            let offsetY = this.touchEndPosition.y - this.touchStartPosition.y;
            if (Math.abs(offsetX) > Math.abs(offsetY)) {
                if (offsetX > 15) {
                    this.onRightSlide();
                    cc.log('right');
                } else if (offsetX < -15) {
                    this.onLeftSlide();
                    cc.log('left');
                }
            } else {
                if (offsetY > 15) {
                    this.onUpSlide();
                    cc.log('up');
                } else if (offsetY < -15) {
                    this.onDownSlide();
                    cc.log('down');
                }
            }
        });
        this.drawBg();
        this.initTiles();

        this.mergeArray([0,0,2,8]);
    },

    /**
     * @description: 合并arr
     * @param {array} arr
     * @return: 
     */
    mergeArray(arr){
        if(arr.length <= 0){
            return;
        }

        cc.log('#1', arr);

        // 按照顺序取出非0值
        let src = [];
        for(let i = 0; i < arr.length; i++){
            if(arr[i] != 0){
                src.push(arr[i]);
            }
        }        

        // 模拟栈
        let stack = [];
        while(src.length > 0){
            // 栈是空或栈顶元素和源数据最后一个不一样
            if(stack.length <= 0 || stack[0] != src[src.length - 1]){
                stack.unshift(src[src.length-1]);
                src.splice(src.length -1, 1);
            }
            // 栈顶出栈
            else{
                src[src.length-1] = src[src.length-1] * 2;
                stack.splice(0, 1);
            }
        }
        cc.log('#2', stack);

        return stack;
    },

    onLeftSlide() {
        // 判断是否有tile移动
        let isMove = false; 

        for (let y = 0; y < 4; y++) {
            let src = [];
            for(let x = 3; x >= 0; x--){
                src.push(this.tiles[x][y].number);
            }
            let stack = this.mergeArray(src);

            // 有变化
            if(stack.length != src.length){
                for(let x = 0; x < 4; x++){
                    if(stack.length > 0){
                        this.tiles[x][y].number = stack[stack.length - 1];
                        stack.splice(stack.length-1, 1);
                    }
                    else{
                        this.tiles[x][y].number = 0;
                    }
                }
                isMove = true;
            }
        }

        // 没变化
        if(!isMove){
            return;
        }
        
        if (isMove) {
            this.newTile();
            this.judgeOver();
        }
    },

    onRightSlide() {
        // 判断是否有tile移动
        let isMove = false; 

        for (let y = 0; y < 4; y++) {
            let src = [];
            for(let x = 0; x < 4; x++){
                src.push(this.tiles[x][y].number);
            }
            let stack = this.mergeArray(src);

            // 有变化
            if(stack.length != src.length){
                for(let x = 3; x >= 0; x--){
                    if(stack.length > 0){
                        this.tiles[x][y].number = stack[stack.length - 1];
                        stack.splice(stack.length-1, 1);
                    }
                    else{
                        this.tiles[x][y].number = 0;
                    }
                }
                isMove = true;
            }
        }

        // 没变化
        if(!isMove){
            return;
        }

        //有tile移动才添加新的tile
        if (isMove) {
            this.newTile();
            this.judgeOver();
        }
    },

    onDownSlide() {
        // 判断是否有tile移动
        let isMove = false; 

        for (let x = 0; x < 4; x++) {
            let src = [];
            for(let y = 3; y >= 0; y--){
                src.push(this.tiles[x][y].number);
            }
            let stack = this.mergeArray(src);

            // 有变化
            if(stack.length != src.length){
                for(let y = 0; y < 4; y++){
                    if(stack.length > 0){
                        this.tiles[x][y].number = stack[stack.length - 1];
                        stack.splice(stack.length-1, 1);
                    }
                    else{
                        this.tiles[x][y].number = 0;
                    }
                }
                isMove = true;
            }
        }

        // 没变化
        if(!isMove){
            return;
        }
        
        if (isMove) {
            this.newTile();
            this.judgeOver();
        }
    },

    onUpSlide() {
        // 判断是否有tile移动
        let isMove = false; 

        for (let x = 0; x < 4; x++) {
            let src = [];
            for(let y = 0; y < 4; y++){
                src.push(this.tiles[x][y].number);
            }
            let stack = this.mergeArray(src);

            // 有变化
            if(stack.length != src.length){
                for(let y = 3; y >= 0; y--){
                    if(stack.length > 0){
                        this.tiles[x][y].number = stack[stack.length - 1];
                        stack.splice(stack.length-1, 1);
                    }
                    else{
                        this.tiles[x][y].number = 0;
                    }
                }
                isMove = true;
            }
        }

        // 没变化
        if(!isMove){
            return;
        }
        
        if (isMove) {
            this.newTile();
            this.judgeOver();
        }
    },

    drawBg() {
        this.g.rect(0, 0, this.node.width, this.node.height);
        this.g.fillColor = new cc.Color().fromHEX('#0000ff');//cc.hexToColor('#ffffff');
        this.g.stroke();
        this.g.fill();
        this.g.strokeColor = cc.Color.BLACK;
        this.g.lineWidth = 10;
        for (let x = 0; x < 5; x++) {
            this.g.moveTo(x * this.tileWidth, 0);
            this.g.lineTo(x * this.tileWidth, this.mapWidth);
        }
        for (let y = 0; y < 5; y++) {
            this.g.moveTo(0, y * this.tileWidth);
            this.g.lineTo(this.mapWidth, y * this.tileWidth);
        }
        this.g.stroke();
    },

    judgeOver() {
        for(let x = 0; x < 4;x++){
            for(let y = 0; y < 4; y++) {
                if(this.tiles[x][y].number === 1024) {
                    cc.director.loadScene('success');
                }
            }
        }
    },

    initTiles(tileWidth) {
        this.tileLayer.removeAllChildren();
        this.tiles = [];
        this.zeroTiles = [];
        for (let x = 0; x < 4; x++) {
            this.tiles[x] = [];
            for (let y = 0; y < 4; y++) {
                let tileNode = cc.instantiate(this.tilePrefab);
                this.tileLayer.addChild(tileNode);
                tileNode.x = x * this.tileWidth + this.tileWidth / 2;
                tileNode.y = y * this.tileWidth + this.tileWidth / 2;
                let tile = tileNode.getComponent('Tile');
                tile.init(x, y, 0);
                this.tiles[x][y] = tile;
                this.zeroTiles.push(tile);
            }
        }
        for (let i = 0; i < 2; i++) {
            this.newTile();
        }
    },

    newTile() {
        this.zeroTiles = [];
        for (let x = 0; x < 4; x++) {
            for (let y = 0; y < 4; y++) {
                if (this.tiles[x][y].number === 0) {
                    this.zeroTiles.push(this.tiles[x][y]);
                }
            }
        }
        let n = Math.floor(Math.random() * this.zeroTiles.length);
        this.zeroTiles[n].randomNumber();
        // this.zeroTiles[n].getComponent('Tile').randomNumber();
        this.zeroTiles.splice(n, 1);
    },

    onBtnRetry() {
        cc.director.loadScene('game');
    },

    onBtnSleep() {
        cc.director.loadScene('sleep');
    }

});






//---------------Tile.js------------------------

cc.Class({
    extends: cc.Component,

    properties: {
        x: 0,
        y: 0,
        _number: 0,
        number: {
            set(number) {
                if (number === this._number) return;
                this._number = number;
                if (number === 0) {
                    this.numberLabel.string = '';
                } else {
                    this.numberLabel.string = number + '';
                    // let colorHex = Math.floor(Math.random() * 16777215) + 1;
                    // let color = cc.hexToColor('#' + colorHex.toString(16));
                    // this.node.color = color;
                    if(this.number > 0) {
                        this.node.color = cc.Color.RED;
                    }else{
                        this.node.color = cc.Color.BLUE;
                        // this.node.color = cc.Color.GREEN;
                    }
                }
            },
            get() {
                return this._number;
            }
        },
        numberLabel: cc.Label,
    },

    // use this for initialization
    onLoad: function () {

    },

    init(x, y, n) {
        this.x = x;
        this.y = y;
        this.number = n;
    },

    randomNumber() {
        this.number = 2;
        // let n = Math.ceil(Math.random() * 2);
        // if(n === 1) {
        //     this.number = 64;
        // }else {
        //     this.number = -64;
        // }
    }
});





//---------------GameScene.js------------------------


cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    onLoad: function () {

    },

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});











 

 

 


感谢:

本文转载自https://mp.weixin.qq.com/s/7sqizrU-hZmPOcweK0yPHQ这篇文章,这里感谢原作者对于技术的分享。

下载:

本文章源码和资源下载地址

你可能感兴趣的:(cocos,creator实例)