草庐IT

基于js原生算法+cocos游戏引擎+uni框架Cloud托管网页:开发2048小游戏域名发布版本

lqj_本人 2023-05-27 原文

 

 

目录

首先看一下效果图

CocosCreator游戏引擎

block绑定:

canvas绑定:

 cocos中创建脚本js以及js原生算法

 然后我们先看game.js

背景方法及包含的原生算法代码:

开始方法及包含的原生算法代码:

处理监听事件的方法及包含的原生算法代码:

game.js完整代码:

colors.js用来存储我们将会用到的块变化时以及背景的颜色

block.js是用来判定快与块合并时发生的颜色变化

uni框架Cloud托管网页


 

首先看一下效果图

CocosCreator游戏引擎

安装完成之后创建一个空项目:

我这里创建了一个,我就直接用了!

首先我们先创建三个文件夹:

首先我们在scenes里面创建一个场景:并起名为:game

然后我们在创建两个单色节点,其中这两个单色节点右包括三个文本节点!

block里面的绑定:

注意:绑定要在写完js代码之后才可以绑定!所以建议先看下面的js代码及算法代码!再回头来绑定!

block绑定:

 block绑定完成之后我们可以直接把整个总结点拖入这个文件夹下,让其当作预备节点存储,随时使用!(如下图所示)

这是我们就可以把面板中的block总结点删除了:

 

 canvas绑定:

 cocos中创建脚本js以及js原生算法

我们需要在script里面创建三个js脚本

创建方法如下:

 然后我们一次用vscode打开,当然其他的编辑器也可以,当时本人习惯用vscode,所以这里就拿它来演示了~

我们右键点击他们三个时,选择从"资源浏览器中显示"(如下图)

 会发现每一个js文件都有一个对应的meta文件,这说明我们每一个js文件创建的都非常成功!

然后我们反别用vscode打开:

 然后我们先看game.js

properties里面是你上面所说的,注册的节点绑定!

    properties: {
      scoreLabel:cc.Label,
      score:0,
      blockPrefab:cc.Prefab,
      gap:10,
      bg:cc.Node,
    //   GameOver:cc.Label
    },

发现所有我们上面显示的节点都有在这里注册!注册完成之后我们再去按照上面所述绑定即可!

start里面是我们在下面要写的方法,在写之前要在这里自定义方法!

    start () {
        this.drawBgBlocks();
        this.init();
        this.addEventHandler();
    },

 第一步我们需要构思一下,我们需要一些什么固定的常量:

1.需要一个表示几行几列的常量

2.需要一个初始化时所及定义数字大小范围的常量

3.需要一个判断一个手指滑动鉴定长度开始判定执行的常量

4.需要一个当数字块滑动时延迟滑行的常量

常量如下所示:

//调整几*几
const ROWS = 4; 
//添加的数字大小
const NUMBERS = [2,4];
//判断一个手指滑动鉴定长度开始判定执行
const MIN_LENGTH = 50; 
//当数字块滑动时延迟滑行
const MOVE_DURATION = 0.08;

 start用来定义下面所需要的用到的方法,如本次用到的方法:

1.处理绘制背景的方法

2.处理游戏开始的方法

3.处理监听事件的方法

    start () {
        this.drawBgBlocks();
        this.init();
        this.addEventHandler();
    },

背景方法及包含的原生算法代码:

    drawBgBlocks(){
        this.blockSize = (cc.winSize.width - this.gap * (ROWS+1)) / ROWS;
        let x = this.gap + this.blockSize /2;
        let y = this.blockSize;
        this.positions = [];
        for(let i=0;i<ROWS;++i){
            this.positions.push([0,0,0,0]);
            for(let j=0;j<ROWS;++j){
                let block = cc.instantiate(this.blockPrefab);
                block.width = this.blockSize;
                block.height = this.blockSize;
                this.bg.addChild(block);
                block.setPosition(cc.p(x,y));
                this.positions[i][j] = cc.p(x,y);
                x += this.gap + this.blockSize;
                block.getComponent('block').setNumber(0);
            }
            y += this.gap + this.blockSize;
            x = this.gap + this.blockSize / 2;
        }
    },

开始方法及包含的原生算法代码:

    init(){
        this.updateScore(0);

        if (this.blocks){
            for(let i=0;i<this.blocks.length;++i){
                for(let j=0;j<this.blocks[i].length;++j){
                    if (this.blocks [i][j] != null){
                        this.blocks[i][j].destroy();
                    }
                }
            }
        }

        this.data = [];
        this.blocks = [];
        for(let i=0;i<ROWS;++i){
            this.blocks.push([null,null,null,null]);
            this.data.push([0,0,0,0]);
        }

        this.addBlock();
        this.addBlock();
        this.addBlock();

    },

 处理监听事件的方法及包含的原生算法代码:

addEventHandler(){
        this.bg.on('touchstart',(event)=>{
            this.startPoint = event.getLocation();
            });

        this.bg.on('touchend',(event)=>{
            this.touchEnd(event); 
            });

        this.bg.on('touchcancel',(event)=>{
            this.touchEnd(event);
            });

    },

    touchEnd(event){
        this.endPoint = event.getLocation();

        let vec = cc.pSub(this.endPoint,this.startPoint); 
        if (cc.pLength(vec) > MIN_LENGTH) {
            if(Math.abs(vec.x) > Math.abs(vec.y)){
                //水平方向
                if(vec.x > 0){
                    this.moveRight();
                }else{
                    this.moveLeft();
                }
            } else{
                //竖直方向
                if(vec.y > 0){
                    this.moveUp();
                }else{
                    this.moveDown();
                }
            }
        }
    },
    checkFail(){
        for (let i=0; i<ROWS;++i){
            for(let j=0;j<ROWS;++j){
                let n = this.data[i][j];
                if(n == 0) return false;
                if(j>0 && this.data[i][j-1] == n) return false;
                if(j<3 && this.data[i][j+1] == n) return false;
                if(i>0 && this.data[i-1][j] == n) return false;
                if(i<3 && this.data[i+1][j] == n) return false;
            }
        }
        return true;

    },
    GameOver(){
        cc.log('game over!')
        // this.GameOver.string = '游戏结束!!!'
    },

    afterMove(hasMove){
        if(hasMove){
            this.updateScore(this.score+1)
            this.addBlock();
        }
        if(this.checkFail()){
            this.GameOver();
        }
    },
    //移动格子
    doMove(block,position,callback){
        let action = cc.moveTo(MOVE_DURATION,position);
        let finish = cc.callFunc(()=>{
            callback && callback()
        });
        block.runAction(cc.sequence(action,finish));
    },

    moveLeft(){
        cc.log('moveLeft');
        let hasMove = false;
        let move = (x,y,callback) =>{
            if(y == 0 || this.data[x][y] == 0){
                cc.log('case 1');
                callback && callback();
                return;
            }else if(this.data[x][y-1] == 0){
                //移动
                // cc.log('case 2');
                let block = this.blocks[x][y];
                let position = this.positions[x][y-1];
                this.blocks[x][y-1] = block;
                this.data[x][y-1] = this.data[x][y];
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.doMove(block,position,()=>{
                    move(x,y-1,callback);
                })
                hasMove = true;
            }else if (this.data[x][y-1] == this.data[x][y]){
                //合并
                // cc.log('case 3');
                let block = this.blocks[x][y];
                let position = this.positions[x][y-1];
                this.data[x][y-1] *= 2;
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.blocks[x][y-1].getComponent('block').setNumber(this.data[x][y-1]);
                this.doMove(block,position,()=>{
                    block.destroy();
                    callback && callback();
                });
                hasMove = true;
            }else{
                callback && callback();
                cc.log('case 4');
                return;
            }
        };

        let toMove = [];
        for (let i=0;i<ROWS;++i){
            for(let j=0;j<ROWS;++j){
                if(this.data[i][j] !=0){
                    toMove.push({x:i,y:j});
                }
            }
        }

        let counter = 0;
        for (let i=0;i<toMove.length;++i) {
            move(toMove[i].x,toMove[i].y,()=>{
                counter++;
                if(counter == toMove.length){
                    this.afterMove(hasMove);
                }
            });
        }
    },
    moveRight(){
        cc.log('moveRight');
        let hasMove = false;
        let move = (x,y,callback) =>{
            if(y == 3 || this.data[x][y] == 0){
                cc.log('case 1');
                callback && callback();
                return;
            }else if(this.data[x][y+1] == 0){
                //移动
                // cc.log('case 2');
                let block = this.blocks[x][y];
                let position = this.positions[x][y+1];
                this.blocks[x][y+1] = block;
                this.data[x][y+1] = this.data[x][y];
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.doMove(block,position,()=>{
                    move(x,y+1,callback);
                })
                hasMove = true;
            }else if (this.data[x][y+1] == this.data[x][y]){
                //合并
                // cc.log('case 3');
                let block = this.blocks[x][y];
                let position = this.positions[x][y+1];
                this.data[x][y+1] *= 2;
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.blocks[x][y+1].getComponent('block').setNumber(this.data[x][y+1]);
                this.doMove(block,position,()=>{
                    block.destroy();
                    callback && callback();
                });
                hasMove = true;
            }else{
                callback && callback();
                cc.log('case 4');
                return;
            }
        };

        let toMove = [];
        for (let i=0;i<ROWS;++i){
            for(let j=ROWS-1;j>=0;--j){
                if(this.data[i][j] !=0){
                    toMove.push({x:i,y:j});
                }
            }
        }

        let counter = 0;
        for (let i=0;i<toMove.length;++i) {
            move(toMove[i].x,toMove[i].y,()=>{
                counter++;
                if(counter == toMove.length){
                    this.afterMove(hasMove);
                }
            });
        }
    },
    moveUp(){
        cc.log('move Up');
        let hasMove = false;
        let move = (x,y,callback) =>{
            if(x == 3 || this.data[x][y] == 0){
                cc.log('case 1');
                callback && callback();
                return;
            }else if(this.data[x+1][y] == 0){
                //移动
                // cc.log('case 2');
                let block = this.blocks[x][y];
                let position = this.positions[x+1][y];
                this.blocks[x+1][y] = block;
                this.data[x+1][y] = this.data[x][y];
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.doMove(block,position,()=>{
                    move(x+1,y,callback);
                })
                hasMove = true;
            }else if (this.data[x+1][y] == this.data[x][y]){
                //合并
                // cc.log('case 3');
                let block = this.blocks[x][y];
                let position = this.positions[x+1][y];
                this.data[x+1][y] *= 2;
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.blocks[x+1][y].getComponent('block').setNumber(this.data[x+1][y]);
                this.doMove(block,position,()=>{
                    block.destroy();
                    callback && callback();
                });
                hasMove = true;
            }else{
                callback && callback();
                cc.log('case 4');
                return;
            }
        };

        let toMove = [];
        for (let i=3;i>=0;--i){
            for(let j=0;j<ROWS;++j){
                if(this.data[i][j] !=0){
                    toMove.push({x:i,y:j});
                }
            }
        }

        let counter = 0;
        for (let i=0;i<toMove.length;++i) {
            move(toMove[i].x,toMove[i].y,()=>{
                counter++;
                if(counter == toMove.length){
                    this.afterMove(hasMove);
                }
            });
        }
    },
    moveDown(){
        cc.log('move Down');
        let hasMove = false;
        let move = (x,y,callback) =>{
            if(x == 0 || this.data[x][y] == 0){
                cc.log('case 1');
                callback && callback();
                return;
            }else if(this.data[x-1][y] == 0){
                //移动
                // cc.log('case 2');
                let block = this.blocks[x][y];
                let position = this.positions[x-1][y];
                this.blocks[x-1][y] = block;
                this.data[x-1][y] = this.data[x][y];
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.doMove(block,position,()=>{
                    move(x-1,y,callback);
                })
                hasMove = true;
            }else if (this.data[x-1][y] == this.data[x][y]){
                //合并
                // cc.log('case 3');
                let block = this.blocks[x][y];
                let position = this.positions[x-1][y];
                this.data[x-1][y] *= 2;
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.blocks[x-1][y].getComponent('block').setNumber(this.data[x-1][y]);
                this.doMove(block,position,()=>{
                    block.destroy();
                    callback && callback();
                });
                hasMove = true;
            }else{
                callback && callback();
                cc.log('case 4');
                return;
            }
        };

        let toMove = [];
        for (let i=0;i<ROWS;++i){
            for(let j=0;j<ROWS;++j){
                if(this.data[i][j] !=0){
                    toMove.push({x:i,y:j});
                }
            }
        }

        let counter = 0;
        for (let i=0;i<toMove.length;++i) {
            move(toMove[i].x,toMove[i].y,()=>{
                counter++;
                if(counter == toMove.length){
                    this.afterMove(hasMove);
                }
            });
        }
    }

game.js完整代码:

//调整几*几
const ROWS = 4; 
//添加的数字大小
const NUMBERS = [2,4];
//判断一个手指滑动鉴定长度开始判定执行
const MIN_LENGTH = 50; 
//当数字块滑动时延迟滑行
const MOVE_DURATION = 0.08;
cc.Class({
    extends: cc.Component,

    properties: {
      scoreLabel:cc.Label,
      score:0,
      blockPrefab:cc.Prefab,
      gap:10,
      bg:cc.Node,
    //   GameOver:cc.Label
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {
        this.drawBgBlocks();
        this.init();
        this.addEventHandler();
    },
    drawBgBlocks(){
        this.blockSize = (cc.winSize.width - this.gap * (ROWS+1)) / ROWS;
        let x = this.gap + this.blockSize /2;
        let y = this.blockSize;
        this.positions = [];
        for(let i=0;i<ROWS;++i){
            this.positions.push([0,0,0,0]);
            for(let j=0;j<ROWS;++j){
                let block = cc.instantiate(this.blockPrefab);
                block.width = this.blockSize;
                block.height = this.blockSize;
                this.bg.addChild(block);
                block.setPosition(cc.p(x,y));
                this.positions[i][j] = cc.p(x,y);
                x += this.gap + this.blockSize;
                block.getComponent('block').setNumber(0);
            }
            y += this.gap + this.blockSize;
            x = this.gap + this.blockSize / 2;
        }
    },

    // drawBgBlocks(){
    //     this.blockSize = [cc.winSize.width - this.gap * (ROWS+1)] / ROWS;
    //     let x = this.gap + this.blockSize / 2;
    //     let y = this.blockSize;
    //     this.positions = [];
    //     for (let i=0;i<ROWS;i++) {
    //         this.positions.push([0,0,0,0]);
    //         for(let j=0;j<ROWS;++j){
    //             let block = cc.instantiate(this.blockPrefab);
    //             block.width = this.blockSize;
    //             block.height = this.blockSize;
    //             this.bg.addChild(block);
    //             block.setPosition(cc.v2(x,y));
    //             this.positions[i][j] = cc.v2(x,y);
    //             x += this.gap + this.blockSize;
    //             block.getComponent('block').setNumber(0);
    //         }
    //         y += this.gap + this.blockSize;
    //         x = this.gap + this.blockSize / 2;
    //     }
    //     cc.log(this.positions)
    // },
    init(){
        this.updateScore(0);

        if (this.blocks){
            for(let i=0;i<this.blocks.length;++i){
                for(let j=0;j<this.blocks[i].length;++j){
                    if (this.blocks [i][j] != null){
                        this.blocks[i][j].destroy();
                    }
                }
            }
        }

        this.data = [];
        this.blocks = [];
        for(let i=0;i<ROWS;++i){
            this.blocks.push([null,null,null,null]);
            this.data.push([0,0,0,0]);
        }

        this.addBlock();
        this.addBlock();
        this.addBlock();

    },
    updateScore(number) {
        this.score = number;
        this.scoreLabel.string = '滑动得分:' + number;
    },
    // 找出空闲的块
    // 空闲块的位置表示
    getEmptyLocations(){
        let locations = [];
        for (let i=0; i<this.blocks.length;++i){
            for(let j=0;j<this.blocks[i].length;++j){
                if (this.blocks[i][j] == null) {
                    locations.push({x:i,y:j});
                }
            }
        }
        return locations;
    },

    addBlock(){
        let locations = this.getEmptyLocations();
        if(locations.length == 0) return false;
        let location = locations[Math.floor(cc.random0To1() * locations.length)];
        let x = location.x;
        let y = location.y;
        let position = this.positions[x][y];

        let block = cc.instantiate(this.blockPrefab);
        block.width = this.blockSize;
        block.height = this.blockSize;
        this.bg.addChild(block);
        block.setPosition(position);
        let number = NUMBERS[Math.floor(cc.random0To1() * NUMBERS.length)]
        block.getComponent('block').setNumber(number);
        this.blocks[x][y] = block;
        this.data[x][y] = number;
        return true;
        // cc.log(locations);
    },
    addEventHandler(){
        this.bg.on('touchstart',(event)=>{
            this.startPoint = event.getLocation();
            });

        this.bg.on('touchend',(event)=>{
            this.touchEnd(event); 
            });

        this.bg.on('touchcancel',(event)=>{
            this.touchEnd(event);
            });

    },

    touchEnd(event){
        this.endPoint = event.getLocation();

        let vec = cc.pSub(this.endPoint,this.startPoint); 
        if (cc.pLength(vec) > MIN_LENGTH) {
            if(Math.abs(vec.x) > Math.abs(vec.y)){
                //水平方向
                if(vec.x > 0){
                    this.moveRight();
                }else{
                    this.moveLeft();
                }
            } else{
                //竖直方向
                if(vec.y > 0){
                    this.moveUp();
                }else{
                    this.moveDown();
                }
            }
        }
    },
    checkFail(){
        for (let i=0; i<ROWS;++i){
            for(let j=0;j<ROWS;++j){
                let n = this.data[i][j];
                if(n == 0) return false;
                if(j>0 && this.data[i][j-1] == n) return false;
                if(j<3 && this.data[i][j+1] == n) return false;
                if(i>0 && this.data[i-1][j] == n) return false;
                if(i<3 && this.data[i+1][j] == n) return false;
            }
        }
        return true;

    },
    GameOver(){
        cc.log('game over!')
        // this.GameOver.string = '游戏结束!!!'
    },

    afterMove(hasMove){
        if(hasMove){
            this.updateScore(this.score+1)
            this.addBlock();
        }
        if(this.checkFail()){
            this.GameOver();
        }
    },
    //移动格子
    doMove(block,position,callback){
        let action = cc.moveTo(MOVE_DURATION,position);
        let finish = cc.callFunc(()=>{
            callback && callback()
        });
        block.runAction(cc.sequence(action,finish));
    },

    moveLeft(){
        cc.log('moveLeft');
        let hasMove = false;
        let move = (x,y,callback) =>{
            if(y == 0 || this.data[x][y] == 0){
                cc.log('case 1');
                callback && callback();
                return;
            }else if(this.data[x][y-1] == 0){
                //移动
                // cc.log('case 2');
                let block = this.blocks[x][y];
                let position = this.positions[x][y-1];
                this.blocks[x][y-1] = block;
                this.data[x][y-1] = this.data[x][y];
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.doMove(block,position,()=>{
                    move(x,y-1,callback);
                })
                hasMove = true;
            }else if (this.data[x][y-1] == this.data[x][y]){
                //合并
                // cc.log('case 3');
                let block = this.blocks[x][y];
                let position = this.positions[x][y-1];
                this.data[x][y-1] *= 2;
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.blocks[x][y-1].getComponent('block').setNumber(this.data[x][y-1]);
                this.doMove(block,position,()=>{
                    block.destroy();
                    callback && callback();
                });
                hasMove = true;
            }else{
                callback && callback();
                cc.log('case 4');
                return;
            }
        };

        let toMove = [];
        for (let i=0;i<ROWS;++i){
            for(let j=0;j<ROWS;++j){
                if(this.data[i][j] !=0){
                    toMove.push({x:i,y:j});
                }
            }
        }

        let counter = 0;
        for (let i=0;i<toMove.length;++i) {
            move(toMove[i].x,toMove[i].y,()=>{
                counter++;
                if(counter == toMove.length){
                    this.afterMove(hasMove);
                }
            });
        }
    },
    moveRight(){
        cc.log('moveRight');
        let hasMove = false;
        let move = (x,y,callback) =>{
            if(y == 3 || this.data[x][y] == 0){
                cc.log('case 1');
                callback && callback();
                return;
            }else if(this.data[x][y+1] == 0){
                //移动
                // cc.log('case 2');
                let block = this.blocks[x][y];
                let position = this.positions[x][y+1];
                this.blocks[x][y+1] = block;
                this.data[x][y+1] = this.data[x][y];
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.doMove(block,position,()=>{
                    move(x,y+1,callback);
                })
                hasMove = true;
            }else if (this.data[x][y+1] == this.data[x][y]){
                //合并
                // cc.log('case 3');
                let block = this.blocks[x][y];
                let position = this.positions[x][y+1];
                this.data[x][y+1] *= 2;
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.blocks[x][y+1].getComponent('block').setNumber(this.data[x][y+1]);
                this.doMove(block,position,()=>{
                    block.destroy();
                    callback && callback();
                });
                hasMove = true;
            }else{
                callback && callback();
                cc.log('case 4');
                return;
            }
        };

        let toMove = [];
        for (let i=0;i<ROWS;++i){
            for(let j=ROWS-1;j>=0;--j){
                if(this.data[i][j] !=0){
                    toMove.push({x:i,y:j});
                }
            }
        }

        let counter = 0;
        for (let i=0;i<toMove.length;++i) {
            move(toMove[i].x,toMove[i].y,()=>{
                counter++;
                if(counter == toMove.length){
                    this.afterMove(hasMove);
                }
            });
        }
    },
    moveUp(){
        cc.log('move Up');
        let hasMove = false;
        let move = (x,y,callback) =>{
            if(x == 3 || this.data[x][y] == 0){
                cc.log('case 1');
                callback && callback();
                return;
            }else if(this.data[x+1][y] == 0){
                //移动
                // cc.log('case 2');
                let block = this.blocks[x][y];
                let position = this.positions[x+1][y];
                this.blocks[x+1][y] = block;
                this.data[x+1][y] = this.data[x][y];
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.doMove(block,position,()=>{
                    move(x+1,y,callback);
                })
                hasMove = true;
            }else if (this.data[x+1][y] == this.data[x][y]){
                //合并
                // cc.log('case 3');
                let block = this.blocks[x][y];
                let position = this.positions[x+1][y];
                this.data[x+1][y] *= 2;
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.blocks[x+1][y].getComponent('block').setNumber(this.data[x+1][y]);
                this.doMove(block,position,()=>{
                    block.destroy();
                    callback && callback();
                });
                hasMove = true;
            }else{
                callback && callback();
                cc.log('case 4');
                return;
            }
        };

        let toMove = [];
        for (let i=3;i>=0;--i){
            for(let j=0;j<ROWS;++j){
                if(this.data[i][j] !=0){
                    toMove.push({x:i,y:j});
                }
            }
        }

        let counter = 0;
        for (let i=0;i<toMove.length;++i) {
            move(toMove[i].x,toMove[i].y,()=>{
                counter++;
                if(counter == toMove.length){
                    this.afterMove(hasMove);
                }
            });
        }
    },
    moveDown(){
        cc.log('move Down');
        let hasMove = false;
        let move = (x,y,callback) =>{
            if(x == 0 || this.data[x][y] == 0){
                cc.log('case 1');
                callback && callback();
                return;
            }else if(this.data[x-1][y] == 0){
                //移动
                // cc.log('case 2');
                let block = this.blocks[x][y];
                let position = this.positions[x-1][y];
                this.blocks[x-1][y] = block;
                this.data[x-1][y] = this.data[x][y];
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.doMove(block,position,()=>{
                    move(x-1,y,callback);
                })
                hasMove = true;
            }else if (this.data[x-1][y] == this.data[x][y]){
                //合并
                // cc.log('case 3');
                let block = this.blocks[x][y];
                let position = this.positions[x-1][y];
                this.data[x-1][y] *= 2;
                this.data[x][y] = 0;
                this.blocks[x][y] = null;
                this.blocks[x-1][y].getComponent('block').setNumber(this.data[x-1][y]);
                this.doMove(block,position,()=>{
                    block.destroy();
                    callback && callback();
                });
                hasMove = true;
            }else{
                callback && callback();
                cc.log('case 4');
                return;
            }
        };

        let toMove = [];
        for (let i=0;i<ROWS;++i){
            for(let j=0;j<ROWS;++j){
                if(this.data[i][j] !=0){
                    toMove.push({x:i,y:j});
                }
            }
        }

        let counter = 0;
        for (let i=0;i<toMove.length;++i) {
            move(toMove[i].x,toMove[i].y,()=>{
                counter++;
                if(counter == toMove.length){
                    this.afterMove(hasMove);
                }
            });
        }
    }
//     addEventHandler(){
//         this.bg.on('touchstart',(event)=>{
//             this.startPoint = event.getLocation();
//         });

//         this.bg.on('touchend',(event)=>{
//             this.endPoint = event.getLocation();
//         });

//         // this.bg.on('touchcancel',(event)=>{
//         //     this.touchEnd(event);
//         // });
//         let vec = cc.pSub(this.endPoint,this.startPoint); 
//         if (cc.pLength(vec) > MIN_LENGTH) {
//             if(Math.abs(vec.x) > Math.abs(vec.y)){
//                 //水平方向
//                 if(vec.x > 0){
//                     this.moveRight();
//                 }else{
//                     this.moveLeft();
//                 }
//             } else{
//                 //竖直方向
//                 if(vec.y > 0){
//                     this.moveUp();
//                 }else{
//                     this.moveDown();
//                 }
//             }
//     }
// },
// moveRight(){
//     cc.log('moveRight');
// },
// moveLeft(){
//     cc.log('moveLeft');
// },
// moveUp(){
//     cc.log('move Up');
// },
// moveDown(){
//     cc.log('move Down');
// }
    // touchEnd(event){
    //     this.endPoint = event.getLocation();


    //     } 
    // },


    // // update (dt) {},
});

colors.js用来存储我们将会用到的块变化时以及背景的颜色

var colors = [];
colors[0] = cc.color(198,184,172,255);
colors[2] = cc.color(235,224,213,255);
colors[4] = cc.color(234,219,193,255);
colors[8] = cc.color(240,167,110,255);
colors[16] = cc.color(244,138,89,255);
colors[32] = cc.color(245,112,85,255);
colors[64] = cc.color(245,83,52,255);
colors[128] = cc.color(234,200,103,255);
colors[256] = cc.color(234,197,87,255);
colors[512] = cc.color(234,192,71,255);
colors[1024] = cc.color(146,208,80,255);
colors[2048] = cc.color(0,176,240,255);

module.exports = colors;

block.js是用来判定快与块合并时发生的颜色变化

import colors from 'colors'

cc.Class({
    extends: cc.Component,

    properties: {
        numberLabel:cc.Label
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },
    setNumber(number){
        if(number == 0){
            this.numberLabel.node.active = false;
        }
        this.numberLabel.string = number;
        if (number in colors) {
            this.node.color = colors[number]; 
        }
    }

    // update (dt) {},
});

最后我们在

 

用浏览器来预览一下我们写完的游戏

并打开开发者工具,每一个操作都会对应的打印该响应操作数据!

此时我们的代码算法及节点创建及游戏布局已经都已搭建成功,下面我们需要将本游戏打包:

在“项目”里面点击“构建发布”

 之后会弹出:

 我们选择前面带web的任意一个,一个是移动端,一个是页面桌面

然后我们点击“构建”后点击“运行”

cocos打包完成后会在下面的控制台中显示打包成功后的路径!

uni框架Cloud托管网页

我们虽然写完了,而且各种功能也实现了,但是怎么样让我们的小游戏让别人也能通过一个网址的方式打开后玩耍呢?

当然大家可能第一反应就是购买服务器,买域名等等。。。

但是对于一个学生党来说,这中不必要的成本,只会让我们本不富裕的学生生活雪上加霜!!!

所以我们可以通过阿里云的开源前端网页托管来上传我们的小游戏文件!

我们要登陆uniCloud平台,下面是我们登录后并开通前端页面托管后看到的页面

 我们需要把我们的小游戏的根目录文件夹上传到里面

然后点击参数配置,我们可以看到一个默认域名:

 我们只需要在默认域名后面加上我们上传的游戏路径就ok了:如下

下面是我的小游戏连接,大家可以看一下下哦~

Cocos Creator | 2048

有关基于js原生算法+cocos游戏引擎+uni框架Cloud托管网页:开发2048小游戏域名发布版本的更多相关文章

  1. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  2. ruby-on-rails - 在 ruby​​ .gemspec 文件中,如何指定依赖项的多个版本? - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作,我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容,因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表?~>3.0还是~>4.0? 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本,你可以这

  3. ruby-on-rails - 如果我将 ruby​​ 版本 2.5.1 与 rails 版本 2.3.18 一起使用会怎样? - 2

    如果我使用ruby​​版本2.5.1和Rails版本2.3.18会怎样?我有基于rails2.3.18和ruby​​1.9.2p320构建的rails应用程序,我只想升级ruby的版本,而不是rails,这可能吗?我必须面对哪些挑战? 最佳答案 GitHub维护apublicfork它有针对旧Rails版本的分支,有各种变化,它们一直在运行。有一段时间,他们在较新的Ruby版本上运行较旧的Rails版本,而不是最初支持的版本,因此您可能会发现一些关于需要向后移植的有用提示。不过,他们现在已经有几年没有使用2.3了,所以充其量只能让更

  4. ruby-on-rails - 获取 inf-ruby 以使用 ruby​​ 版本管理器 (rvm) - 2

    我安装了ruby​​版本管理器,并将RVM安装的ruby​​实现设置为默认值,这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时,它使用安装在/usr/bin中的ruby​​。有没有办法让emacs像shell一样尊重ruby​​的路径?谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣,可以在这里获取:http://github.com/senny/rvm.el

  5. ruby-on-rails - 如何在发布新的 Ruby 或 Rails 版本时收到通知? - 2

    有人知道在发布新版本的Ruby和Rails时收到电子邮件的方法吗?他们有邮件列表,RubyonRails有一个推特,但我不想听到那些随之而来的喧嚣,我只想知道什么时候发布新版本,尤其是那些有安全修复的版本。 最佳答案 从therailsblog获取提要.http://weblog.rubyonrails.org/feed/atom.xml 关于ruby-on-rails-如何在发布新的Ruby或Rails版本时收到通知?,我们在StackOverflow上找到一个类似的问题:

  6. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读:随着叮咚买菜业务的发展,不同的业务场景对数据分析提出了不同的需求,他们希望引入一款实时OLAP数据库,构建一个灵活的多维实时查询和分析的平台,统一数据的接入和查询方案,解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型,最终引入ApacheDoris作为最终的OLAP分析引擎,Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图,在叮咚买菜数十个业务场景中广泛应用。作者|叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月,是一家专注美好食物的创业公司。叮咚买菜专注吃的事业,为满足更多人“想吃什么”而努力,通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  9. kvm虚拟机安装centos7基于ubuntu20.04系统 - 2

    需求:要创建虚拟机,就需要给他提供一个虚拟的磁盘,我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式:qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令,基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机,另外在创建虚拟机之前,提前打开vnc客户端,在创建虚拟机的时候,通过vnc

  10. RUBY - 网页抓取 - (OpenURI::HTTPError) - 2

    我正在尝试用ruby​​编写一个简单的网络抓取代码。它一直工作到第29个url,然后我收到此错误消息:C:/Ruby193/lib/ruby/1.9.1/open-uri.rb:346:in`open_http':500InternalServerError(OpenURI::HTTPError)fromC:/Ruby193/lib/ruby/1.9.1/open-uri.rb:775:in`buffer_open'fromC:/Ruby193/lib/ruby/1.9.1/open-uri.rb:203:in`blockinopen_loop'fromC:/Ruby193/lib/r

随机推荐