首先看一下效果图

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小游戏域名发布版本相关推荐

html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）
续上一小节,我们可以发现每一个grid-cell上的数字初始时并不在格子里. 这些数字可以随着玩家的操作而移动我们可以想象:初始时每一个格子上的数为0,他们并不显示 ↓ 只有当grid-cell ...
2048网页版html项目报告,jQuery编写网页版2048小游戏
大致介绍看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起 ...
网页版2048小游戏
网页版2048小游戏使用jquery3.3.1 进行的一次开发,各文件源码如下: 2048.css .div_2048{background-color: #FFFAF0;width:1000px; ...
使用QT开发2048小游戏
众所周知--在雷课堂后大部分人都掌握了QT界面的能力. 本着浪费人生与无聊写游戏的宗旨,我决定用QT写一个2048玩玩.(以后可能还会更新黑白棋和五子棋哟!) 那么2048其实难度不大,主要考虑几个点 ...
2048小游戏（原生js基础代码篇）
今天在这里,我将给各位呈现一个简单的游戏代码. 想必大家都接触过2048这个小游戏吧,在悠闲时间用于消遣时间最好不过了,那么,我给大家写一个2048最基本的原生js代码. HTML: <!DOC ...
html css js实现快递单打印_JS与HTML、CSS实现2048小游戏（六）
在前面的五篇文章中,小编带大家完成了网页版2048小游戏的基本游戏逻辑.但是在游戏结束的gameover()方法中咱们只是简单的通过alert来弹出一些信息,这样的话只能出现下图的效果.这样的游戏,不 ...
java2048ai,2048小游戏ai设计
感谢我的朋友许博瑀,他一定要赞助我个域名,于是网站改为以下地址: >>>>>>>>>>>>>>>>> ...
C语言编写2048小游戏
该博文为原创文章,未经博主同意不得转载,如同意转载请注明博文出处本文章博客地址:https://cplusplus.blog.csdn.net/article/details/104992424 2 ...

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

首先看一下效果图

CocosCreator游戏引擎

block绑定：

canvas绑定：

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

然后我们先看game.js

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

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

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

game.js完整代码：

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

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

uni框架Cloud托管网页

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

最新文章

热门文章