0
0

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

首先看一下效果图

CocosCreator游戏引擎

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

我这里创建了一个，我就直接用了！

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

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

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

block里面的绑定：

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

block绑定：

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

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

** canvas绑定：**

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

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

创建方法如下：

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

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

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

然后我们反别用vscode打开：

然后我们先看game.js

properties里面是你上面所说的，注册的节点绑定！

  1.     properties: {
  2.       scoreLabel:cc.Label,
  3.       score:0,
  4.       blockPrefab:cc.Prefab,
  5.       gap:10,
  6.       bg:cc.Node,
  7.     //   GameOver:cc.Label
  8.     },

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

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

  1.     start () {
  2.         this.drawBgBlocks();
  3.         this.init();
  4.         this.addEventHandler();
  5.     },

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

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

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

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

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

常量如下所示：

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

** start用来定义下面所需要的用到的方法，如本次用到的方法：**

1.处理绘制背景的方法

2.处理游戏开始的方法

3.处理监听事件的方法

  1.     start () {
  2.         this.drawBgBlocks();
  3.         this.init();
  4.         this.addEventHandler();
  5.     },

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

  1.     drawBgBlocks(){
  2.         this.blockSize = (cc.winSize.width - this.gap * (ROWS+1)) / ROWS;
  3.         let x = this.gap + this.blockSize /2;
  4.         let y = this.blockSize;
  5.         this.positions = [];
  6.         for(let i=0;i<ROWS;++i){
  7.             this.positions.push([0,0,0,0]);
  8.             for(let j=0;j<ROWS;++j){
  9.                 let block = cc.instantiate(this.blockPrefab);
  10.                 block.width = this.blockSize;
  11.                 block.height = this.blockSize;
  12.                 this.bg.addChild(block);
  13.                 block.setPosition(cc.p(x,y));
  14.                 this.positions[i][j] = cc.p(x,y);
  15.                 x += this.gap + this.blockSize;
  16.                 block.getComponent('block').setNumber(0);
  17.             }
  18.             y += this.gap + this.blockSize;
  19.             x = this.gap + this.blockSize / 2;
  20.         }
  21.     },

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

  1.     init(){
  2.         this.updateScore(0);
  4.         if (this.blocks){
  5.             for(let i=0;i<this.blocks.length;++i){
  6.                 for(let j=0;j<this.blocks[i].length;++j){
  7.                     if (this.blocks [i][j] != null){
  8.                         this.blocks[i][j].destroy();
  9.                     }
  10.                 }
  11.             }
  12.         }
  14.         this.data = [];
  15.         this.blocks = [];
  16.         for(let i=0;i<ROWS;++i){
  17.             this.blocks.push([null,null,null,null]);
  18.             this.data.push([0,0,0,0]);
  19.         }
  21.         this.addBlock();
  22.         this.addBlock();
  23.         this.addBlock();
  25.     },

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

  1. addEventHandler(){
  2.         this.bg.on('touchstart',(event)=>{
  3.             this.startPoint = event.getLocation();
  4.             });
  6.         this.bg.on('touchend',(event)=>{
  7.             this.touchEnd(event); 
  8.             });
  10.         this.bg.on('touchcancel',(event)=>{
  11.             this.touchEnd(event);
  12.             });
  14.     },
  16.     touchEnd(event){
  17.         this.endPoint = event.getLocation();
  19.         let vec = cc.pSub(this.endPoint,this.startPoint); 
  20.         if (cc.pLength(vec) > MIN_LENGTH) {
  21.             if(Math.abs(vec.x) > Math.abs(vec.y)){
  22.                 //水平方向
  23.                 if(vec.x > 0){
  24.                     this.moveRight();
  25.                 }else{
  26.                     this.moveLeft();
  27.                 }
  28.             } else{
  29.                 //竖直方向
  30.                 if(vec.y > 0){
  31.                     this.moveUp();
  32.                 }else{
  33.                     this.moveDown();
  34.                 }
  35.             }
  36.         }
  37.     },
  38.     checkFail(){
  39.         for (let i=0; i<ROWS;++i){
  40.             for(let j=0;j<ROWS;++j){
  41.                 let n = this.data[i][j];
  42.                 if(n == 0) return false;
  43.                 if(j>0 && this.data[i][j-1] == n) return false;
  44.                 if(j<3 && this.data[i][j+1] == n) return false;
  45.                 if(i>0 && this.data[i-1][j] == n) return false;
  46.                 if(i<3 && this.data[i+1][j] == n) return false;
  47.             }
  48.         }
  49.         return true;
  51.     },
  52.     GameOver(){
  53.         cc.log('game over!')
  54.         // this.GameOver.string = '游戏结束！！！'
  55.     },
  57.     afterMove(hasMove){
  58.         if(hasMove){
  59.             this.updateScore(this.score+1)
  60.             this.addBlock();
  61.         }
  62.         if(this.checkFail()){
  63.             this.GameOver();
  64.         }
  65.     },
  66.     //移动格子
  67.     doMove(block,position,callback){
  68.         let action = cc.moveTo(MOVE_DURATION,position);
  69.         let finish = cc.callFunc(()=>{
  70.             callback && callback()
  71.         });
  72.         block.runAction(cc.sequence(action,finish));
  73.     },
  75.     moveLeft(){
  76.         cc.log('moveLeft');
  77.         let hasMove = false;
  78.         let move = (x,y,callback) =>{
  79.             if(y == 0 || this.data[x][y] == 0){
  80.                 cc.log('case 1');
  81.                 callback && callback();
  82.                 return;
  83.             }else if(this.data[x][y-1] == 0){
  84.                 //移动
  85.                 // cc.log('case 2');
  86.                 let block = this.blocks[x][y];
  87.                 let position = this.positions[x][y-1];
  88.                 this.blocks[x][y-1] = block;
  89.                 this.data[x][y-1] = this.data[x][y];
  90.                 this.data[x][y] = 0;
  91.                 this.blocks[x][y] = null;
  92.                 this.doMove(block,position,()=>{
  93.                     move(x,y-1,callback);
  94.                 })
  95.                 hasMove = true;
  96.             }else if (this.data[x][y-1] == this.data[x][y]){
  97.                 //合并
  98.                 // cc.log('case 3');
  99.                 let block = this.blocks[x][y];
  100.                 let position = this.positions[x][y-1];
  101.                 this.data[x][y-1] *= 2;
  102.                 this.data[x][y] = 0;
  103.                 this.blocks[x][y] = null;
  104.                 this.blocks[x][y-1].getComponent('block').setNumber(this.data[x][y-1]);
  105.                 this.doMove(block,position,()=>{
  106.                     block.destroy();
  107.                     callback && callback();
  108.                 });
  109.                 hasMove = true;
  110.             }else{
  111.                 callback && callback();
  112.                 cc.log('case 4');
  113.                 return;
  114.             }
  115.         };
  117.         let toMove = [];
  118.         for (let i=0;i<ROWS;++i){
  119.             for(let j=0;j<ROWS;++j){
  120.                 if(this.data[i][j] !=0){
  121.                     toMove.push({x:i,y:j});
  122.                 }
  123.             }
  124.         }
  126.         let counter = 0;
  127.         for (let i=0;i<toMove.length;++i) {
  128.             move(toMove[i].x,toMove[i].y,()=>{
  129.                 counter++;
  130.                 if(counter == toMove.length){
  131.                     this.afterMove(hasMove);
  132.                 }
  133.             });
  134.         }
  135.     },
  136.     moveRight(){
  137.         cc.log('moveRight');
  138.         let hasMove = false;
  139.         let move = (x,y,callback) =>{
  140.             if(y == 3 || this.data[x][y] == 0){
  141.                 cc.log('case 1');
  142.                 callback && callback();
  143.                 return;
  144.             }else if(this.data[x][y+1] == 0){
  145.                 //移动
  146.                 // cc.log('case 2');
  147.                 let block = this.blocks[x][y];
  148.                 let position = this.positions[x][y+1];
  149.                 this.blocks[x][y+1] = block;
  150.                 this.data[x][y+1] = this.data[x][y];
  151.                 this.data[x][y] = 0;
  152.                 this.blocks[x][y] = null;
  153.                 this.doMove(block,position,()=>{
  154.                     move(x,y+1,callback);
  155.                 })
  156.                 hasMove = true;
  157.             }else if (this.data[x][y+1] == this.data[x][y]){
  158.                 //合并
  159.                 // cc.log('case 3');
  160.                 let block = this.blocks[x][y];
  161.                 let position = this.positions[x][y+1];
  162.                 this.data[x][y+1] *= 2;
  163.                 this.data[x][y] = 0;
  164.                 this.blocks[x][y] = null;
  165.                 this.blocks[x][y+1].getComponent('block').setNumber(this.data[x][y+1]);
  166.                 this.doMove(block,position,()=>{
  167.                     block.destroy();
  168.                     callback && callback();
  169.                 });
  170.                 hasMove = true;
  171.             }else{
  172.                 callback && callback();
  173.                 cc.log('case 4');
  174.                 return;
  175.             }
  176.         };
  178.         let toMove = [];
  179.         for (let i=0;i<ROWS;++i){
  180.             for(let j=ROWS-1;j>=0;--j){
  181.                 if(this.data[i][j] !=0){
  182.                     toMove.push({x:i,y:j});
  183.                 }
  184.             }
  185.         }
  187.         let counter = 0;
  188.         for (let i=0;i<toMove.length;++i) {
  189.             move(toMove[i].x,toMove[i].y,()=>{
  190.                 counter++;
  191.                 if(counter == toMove.length){
  192.                     this.afterMove(hasMove);
  193.                 }
  194.             });
  195.         }
  196.     },
  197.     moveUp(){
  198.         cc.log('move Up');
  199.         let hasMove = false;
  200.         let move = (x,y,callback) =>{
  201.             if(x == 3 || this.data[x][y] == 0){
  202.                 cc.log('case 1');
  203.                 callback && callback();
  204.                 return;
  205.             }else if(this.data[x+1][y] == 0){
  206.                 //移动
  207.                 // cc.log('case 2');
  208.                 let block = this.blocks[x][y];
  209.                 let position = this.positions[x+1][y];
  210.                 this.blocks[x+1][y] = block;
  211.                 this.data[x+1][y] = this.data[x][y];
  212.                 this.data[x][y] = 0;
  213.                 this.blocks[x][y] = null;
  214.                 this.doMove(block,position,()=>{
  215.                     move(x+1,y,callback);
  216.                 })
  217.                 hasMove = true;
  218.             }else if (this.data[x+1][y] == this.data[x][y]){
  219.                 //合并
  220.                 // cc.log('case 3');
  221.                 let block = this.blocks[x][y];
  222.                 let position = this.positions[x+1][y];
  223.                 this.data[x+1][y] *= 2;
  224.                 this.data[x][y] = 0;
  225.                 this.blocks[x][y] = null;
  226.                 this.blocks[x+1][y].getComponent('block').setNumber(this.data[x+1][y]);
  227.                 this.doMove(block,position,()=>{
  228.                     block.destroy();
  229.                     callback && callback();
  230.                 });
  231.                 hasMove = true;
  232.             }else{
  233.                 callback && callback();
  234.                 cc.log('case 4');
  235.                 return;
  236.             }
  237.         };
  239.         let toMove = [];
  240.         for (let i=3;i>=0;--i){
  241.             for(let j=0;j<ROWS;++j){
  242.                 if(this.data[i][j] !=0){
  243.                     toMove.push({x:i,y:j});
  244.                 }
  245.             }
  246.         }
  248.         let counter = 0;
  249.         for (let i=0;i<toMove.length;++i) {
  250.             move(toMove[i].x,toMove[i].y,()=>{
  251.                 counter++;
  252.                 if(counter == toMove.length){
  253.                     this.afterMove(hasMove);
  254.                 }
  255.             });
  256.         }
  257.     },
  258.     moveDown(){
  259.         cc.log('move Down');
  260.         let hasMove = false;
  261.         let move = (x,y,callback) =>{
  262.             if(x == 0 || this.data[x][y] == 0){
  263.                 cc.log('case 1');
  264.                 callback && callback();
  265.                 return;
  266.             }else if(this.data[x-1][y] == 0){
  267.                 //移动
  268.                 // cc.log('case 2');
  269.                 let block = this.blocks[x][y];
  270.                 let position = this.positions[x-1][y];
  271.                 this.blocks[x-1][y] = block;
  272.                 this.data[x-1][y] = this.data[x][y];
  273.                 this.data[x][y] = 0;
  274.                 this.blocks[x][y] = null;
  275.                 this.doMove(block,position,()=>{
  276.                     move(x-1,y,callback);
  277.                 })
  278.                 hasMove = true;
  279.             }else if (this.data[x-1][y] == this.data[x][y]){
  280.                 //合并
  281.                 // cc.log('case 3');
  282.                 let block = this.blocks[x][y];
  283.                 let position = this.positions[x-1][y];
  284.                 this.data[x-1][y] *= 2;
  285.                 this.data[x][y] = 0;
  286.                 this.blocks[x][y] = null;
  287.                 this.blocks[x-1][y].getComponent('block').setNumber(this.data[x-1][y]);
  288.                 this.doMove(block,position,()=>{
  289.                     block.destroy();
  290.                     callback && callback();
  291.                 });
  292.                 hasMove = true;
  293.             }else{
  294.                 callback && callback();
  295.                 cc.log('case 4');
  296.                 return;
  297.             }
  298.         };
  300.         let toMove = [];
  301.         for (let i=0;i<ROWS;++i){
  302.             for(let j=0;j<ROWS;++j){
  303.                 if(this.data[i][j] !=0){
  304.                     toMove.push({x:i,y:j});
  305.                 }
  306.             }
  307.         }
  309.         let counter = 0;
  310.         for (let i=0;i<toMove.length;++i) {
  311.             move(toMove[i].x,toMove[i].y,()=>{
  312.                 counter++;
  313.                 if(counter == toMove.length){
  314.                     this.afterMove(hasMove);
  315.                 }
  316.             });
  317.         }
  318.     }

game.js完整代码：

  1. //调整几*几
  2. const ROWS = 4; 
  3. //添加的数字大小
  4. const NUMBERS = [2,4];
  5. //判断一个手指滑动鉴定长度开始判定执行
  6. const MIN_LENGTH = 50; 
  7. //当数字块滑动时延迟滑行
  8. const MOVE_DURATION = 0.08;
  9. cc.Class({
  10.     extends: cc.Component,
  12.     properties: {
  13.       scoreLabel:cc.Label,
  14.       score:0,
  15.       blockPrefab:cc.Prefab,
  16.       gap:10,
  17.       bg:cc.Node,
  18.     //   GameOver:cc.Label
  19.     },
  21.     // LIFE-CYCLE CALLBACKS:
  23.     // onLoad () {},
  25.     start () {
  26.         this.drawBgBlocks();
  27.         this.init();
  28.         this.addEventHandler();
  29.     },
  30.     drawBgBlocks(){
  31.         this.blockSize = (cc.winSize.width - this.gap * (ROWS+1)) / ROWS;
  32.         let x = this.gap + this.blockSize /2;
  33.         let y = this.blockSize;
  34.         this.positions = [];
  35.         for(let i=0;i<ROWS;++i){
  36.             this.positions.push([0,0,0,0]);
  37.             for(let j=0;j<ROWS;++j){
  38.                 let block = cc.instantiate(this.blockPrefab);
  39.                 block.width = this.blockSize;
  40.                 block.height = this.blockSize;
  41.                 this.bg.addChild(block);
  42.                 block.setPosition(cc.p(x,y));
  43.                 this.positions[i][j] = cc.p(x,y);
  44.                 x += this.gap + this.blockSize;
  45.                 block.getComponent('block').setNumber(0);
  46.             }
  47.             y += this.gap + this.blockSize;
  48.             x = this.gap + this.blockSize / 2;
  49.         }
  50.     },
  52.     // drawBgBlocks(){
  53.     //     this.blockSize = [cc.winSize.width - this.gap * (ROWS+1)] / ROWS;
  54.     //     let x = this.gap + this.blockSize / 2;
  55.     //     let y = this.blockSize;
  56.     //     this.positions = [];
  57.     //     for (let i=0;i<ROWS;i++) {
  58.     //         this.positions.push([0,0,0,0]);
  59.     //         for(let j=0;j<ROWS;++j){
  60.     //             let block = cc.instantiate(this.blockPrefab);
  61.     //             block.width = this.blockSize;
  62.     //             block.height = this.blockSize;
  63.     //             this.bg.addChild(block);
  64.     //             block.setPosition(cc.v2(x,y));
  65.     //             this.positions[i][j] = cc.v2(x,y);
  66.     //             x += this.gap + this.blockSize;
  67.     //             block.getComponent('block').setNumber(0);
  68.     //         }
  69.     //         y += this.gap + this.blockSize;
  70.     //         x = this.gap + this.blockSize / 2;
  71.     //     }
  72.     //     cc.log(this.positions)
  73.     // },
  74.     init(){
  75.         this.updateScore(0);
  77.         if (this.blocks){
  78.             for(let i=0;i<this.blocks.length;++i){
  79.                 for(let j=0;j<this.blocks[i].length;++j){
  80.                     if (this.blocks [i][j] != null){
  81.                         this.blocks[i][j].destroy();
  82.                     }
  83.                 }
  84.             }
  85.         }
  87.         this.data = [];
  88.         this.blocks = [];
  89.         for(let i=0;i<ROWS;++i){
  90.             this.blocks.push([null,null,null,null]);
  91.             this.data.push([0,0,0,0]);
  92.         }
  94.         this.addBlock();
  95.         this.addBlock();
  96.         this.addBlock();
  98.     },
  99.     updateScore(number) {
  100.         this.score = number;
  101.         this.scoreLabel.string = '滑动得分:' + number;
  102.     },
  103.     // 找出空闲的块
  104.     // 空闲块的位置表示
  105.     getEmptyLocations(){
  106.         let locations = [];
  107.         for (let i=0; i<this.blocks.length;++i){
  108.             for(let j=0;j<this.blocks[i].length;++j){
  109.                 if (this.blocks[i][j] == null) {
  110.                     locations.push({x:i,y:j});
  111.                 }
  112.             }
  113.         }
  114.         return locations;
  115.     },
  117.     addBlock(){
  118.         let locations = this.getEmptyLocations();
  119.         if(locations.length == 0) return false;
  120.         let location = locations[Math.floor(cc.random0To1() * locations.length)];
  121.         let x = location.x;
  122.         let y = location.y;
  123.         let position = this.positions[x][y];
  125.         let block = cc.instantiate(this.blockPrefab);
  126.         block.width = this.blockSize;
  127.         block.height = this.blockSize;
  128.         this.bg.addChild(block);
  129.         block.setPosition(position);
  130.         let number = NUMBERS[Math.floor(cc.random0To1() * NUMBERS.length)]
  131.         block.getComponent('block').setNumber(number);
  132.         this.blocks[x][y] = block;
  133.         this.data[x][y] = number;
  134.         return true;
  135.         // cc.log(locations);
  136.     },
  137.     addEventHandler(){
  138.         this.bg.on('touchstart',(event)=>{
  139.             this.startPoint = event.getLocation();
  140.             });
  142.         this.bg.on('touchend',(event)=>{
  143.             this.touchEnd(event); 
  144.             });
  146.         this.bg.on('touchcancel',(event)=>{
  147.             this.touchEnd(event);
  148.             });
  150.     },
  152.     touchEnd(event){
  153.         this.endPoint = event.getLocation();
  155.         let vec = cc.pSub(this.endPoint,this.startPoint); 
  156.         if (cc.pLength(vec) > MIN_LENGTH) {
  157.             if(Math.abs(vec.x) > Math.abs(vec.y)){
  158.                 //水平方向
  159.                 if(vec.x > 0){
  160.                     this.moveRight();
  161.                 }else{
  162.                     this.moveLeft();
  163.                 }
  164.             } else{
  165.                 //竖直方向
  166.                 if(vec.y > 0){
  167.                     this.moveUp();
  168.                 }else{
  169.                     this.moveDown();
  170.                 }
  171.             }
  172.         }
  173.     },
  174.     checkFail(){
  175.         for (let i=0; i<ROWS;++i){
  176.             for(let j=0;j<ROWS;++j){
  177.                 let n = this.data[i][j];
  178.                 if(n == 0) return false;
  179.                 if(j>0 && this.data[i][j-1] == n) return false;
  180.                 if(j<3 && this.data[i][j+1] == n) return false;
  181.                 if(i>0 && this.data[i-1][j] == n) return false;
  182.                 if(i<3 && this.data[i+1][j] == n) return false;
  183.             }
  184.         }
  185.         return true;
  187.     },
  188.     GameOver(){
  189.         cc.log('game over!')
  190.         // this.GameOver.string = '游戏结束！！！'
  191.     },
  193.     afterMove(hasMove){
  194.         if(hasMove){
  195.             this.updateScore(this.score+1)
  196.             this.addBlock();
  197.         }
  198.         if(this.checkFail()){
  199.             this.GameOver();
  200.         }
  201.     },
  202.     //移动格子
  203.     doMove(block,position,callback){
  204.         let action = cc.moveTo(MOVE_DURATION,position);
  205.         let finish = cc.callFunc(()=>{
  206.             callback && callback()
  207.         });
  208.         block.runAction(cc.sequence(action,finish));
  209.     },
  211.     moveLeft(){
  212.         cc.log('moveLeft');
  213.         let hasMove = false;
  214.         let move = (x,y,callback) =>{
  215.             if(y == 0 || this.data[x][y] == 0){
  216.                 cc.log('case 1');
  217.                 callback && callback();
  218.                 return;
  219.             }else if(this.data[x][y-1] == 0){
  220.                 //移动
  221.                 // cc.log('case 2');
  222.                 let block = this.blocks[x][y];
  223.                 let position = this.positions[x][y-1];
  224.                 this.blocks[x][y-1] = block;
  225.                 this.data[x][y-1] = this.data[x][y];
  226.                 this.data[x][y] = 0;
  227.                 this.blocks[x][y] = null;
  228.                 this.doMove(block,position,()=>{
  229.                     move(x,y-1,callback);
  230.                 })
  231.                 hasMove = true;
  232.             }else if (this.data[x][y-1] == this.data[x][y]){
  233.                 //合并
  234.                 // cc.log('case 3');
  235.                 let block = this.blocks[x][y];
  236.                 let position = this.positions[x][y-1];
  237.                 this.data[x][y-1] *= 2;
  238.                 this.data[x][y] = 0;
  239.                 this.blocks[x][y] = null;
  240.                 this.blocks[x][y-1].getComponent('block').setNumber(this.data[x][y-1]);
  241.                 this.doMove(block,position,()=>{
  242.                     block.destroy();
  243.                     callback && callback();
  244.                 });
  245.                 hasMove = true;
  246.             }else{
  247.                 callback && callback();
  248.                 cc.log('case 4');
  249.                 return;
  250.             }
  251.         };
  253.         let toMove = [];
  254.         for (let i=0;i<ROWS;++i){
  255.             for(let j=0;j<ROWS;++j){
  256.                 if(this.data[i][j] !=0){
  257.                     toMove.push({x:i,y:j});
  258.                 }
  259.             }
  260.         }
  262.         let counter = 0;
  263.         for (let i=0;i<toMove.length;++i) {
  264.             move(toMove[i].x,toMove[i].y,()=>{
  265.                 counter++;
  266.                 if(counter == toMove.length){
  267.                     this.afterMove(hasMove);
  268.                 }
  269.             });
  270.         }
  271.     },
  272.     moveRight(){
  273.         cc.log('moveRight');
  274.         let hasMove = false;
  275.         let move = (x,y,callback) =>{
  276.             if(y == 3 || this.data[x][y] == 0){
  277.                 cc.log('case 1');
  278.                 callback && callback();
  279.                 return;
  280.             }else if(this.data[x][y+1] == 0){
  281.                 //移动
  282.                 // cc.log('case 2');
  283.                 let block = this.blocks[x][y];
  284.                 let position = this.positions[x][y+1];
  285.                 this.blocks[x][y+1] = block;
  286.                 this.data[x][y+1] = this.data[x][y];
  287.                 this.data[x][y] = 0;
  288.                 this.blocks[x][y] = null;
  289.                 this.doMove(block,position,()=>{
  290.                     move(x,y+1,callback);
  291.                 })
  292.                 hasMove = true;
  293.             }else if (this.data[x][y+1] == this.data[x][y]){
  294.                 //合并
  295.                 // cc.log('case 3');
  296.                 let block = this.blocks[x][y];
  297.                 let position = this.positions[x][y+1];
  298.                 this.data[x][y+1] *= 2;
  299.                 this.data[x][y] = 0;
  300.                 this.blocks[x][y] = null;
  301.                 this.blocks[x][y+1].getComponent('block').setNumber(this.data[x][y+1]);
  302.                 this.doMove(block,position,()=>{
  303.                     block.destroy();
  304.                     callback && callback();
  305.                 });
  306.                 hasMove = true;
  307.             }else{
  308.                 callback && callback();
  309.                 cc.log('case 4');
  310.                 return;
  311.             }
  312.         };
  314.         let toMove = [];
  315.         for (let i=0;i<ROWS;++i){
  316.             for(let j=ROWS-1;j>=0;--j){
  317.                 if(this.data[i][j] !=0){
  318.                     toMove.push({x:i,y:j});
  319.                 }
  320.             }
  321.         }
  323.         let counter = 0;
  324.         for (let i=0;i<toMove.length;++i) {
  325.             move(toMove[i].x,toMove[i].y,()=>{
  326.                 counter++;
  327.                 if(counter == toMove.length){
  328.                     this.afterMove(hasMove);
  329.                 }
  330.             });
  331.         }
  332.     },
  333.     moveUp(){
  334.         cc.log('move Up');
  335.         let hasMove = false;
  336.         let move = (x,y,callback) =>{
  337.             if(x == 3 || this.data[x][y] == 0){
  338.                 cc.log('case 1');
  339.                 callback && callback();
  340.                 return;
  341.             }else if(this.data[x+1][y] == 0){
  342.                 //移动
  343.                 // cc.log('case 2');
  344.                 let block = this.blocks[x][y];
  345.                 let position = this.positions[x+1][y];
  346.                 this.blocks[x+1][y] = block;
  347.                 this.data[x+1][y] = this.data[x][y];
  348.                 this.data[x][y] = 0;
  349.                 this.blocks[x][y] = null;
  350.                 this.doMove(block,position,()=>{
  351.                     move(x+1,y,callback);
  352.                 })
  353.                 hasMove = true;
  354.             }else if (this.data[x+1][y] == this.data[x][y]){
  355.                 //合并
  356.                 // cc.log('case 3');
  357.                 let block = this.blocks[x][y];
  358.                 let position = this.positions[x+1][y];
  359.                 this.data[x+1][y] *= 2;
  360.                 this.data[x][y] = 0;
  361.                 this.blocks[x][y] = null;
  362.                 this.blocks[x+1][y].getComponent('block').setNumber(this.data[x+1][y]);
  363.                 this.doMove(block,position,()=>{
  364.                     block.destroy();
  365.                     callback && callback();
  366.                 });
  367.                 hasMove = true;
  368.             }else{
  369.                 callback && callback();
  370.                 cc.log('case 4');
  371.                 return;
  372.             }
  373.         };
  375.         let toMove = [];
  376.         for (let i=3;i>=0;--i){
  377.             for(let j=0;j<ROWS;++j){
  378.                 if(this.data[i][j] !=0){
  379.                     toMove.push({x:i,y:j});
  380.                 }
  381.             }
  382.         }
  384.         let counter = 0;
  385.         for (let i=0;i<toMove.length;++i) {
  386.             move(toMove[i].x,toMove[i].y,()=>{
  387.                 counter++;
  388.                 if(counter == toMove.length){
  389.                     this.afterMove(hasMove);
  390.                 }
  391.             });
  392.         }
  393.     },
  394.     moveDown(){
  395.         cc.log('move Down');
  396.         let hasMove = false;
  397.         let move = (x,y,callback) =>{
  398.             if(x == 0 || this.data[x][y] == 0){
  399.                 cc.log('case 1');
  400.                 callback && callback();
  401.                 return;
  402.             }else if(this.data[x-1][y] == 0){
  403.                 //移动
  404.                 // cc.log('case 2');
  405.                 let block = this.blocks[x][y];
  406.                 let position = this.positions[x-1][y];
  407.                 this.blocks[x-1][y] = block;
  408.                 this.data[x-1][y] = this.data[x][y];
  409.                 this.data[x][y] = 0;
  410.                 this.blocks[x][y] = null;
  411.                 this.doMove(block,position,()=>{
  412.                     move(x-1,y,callback);
  413.                 })
  414.                 hasMove = true;
  415.             }else if (this.data[x-1][y] == this.data[x][y]){
  416.                 //合并
  417.                 // cc.log('case 3');
  418.                 let block = this.blocks[x][y];
  419.                 let position = this.positions[x-1][y];
  420.                 this.data[x-1][y] *= 2;
  421.                 this.data[x][y] = 0;
  422.                 this.blocks[x][y] = null;
  423.                 this.blocks[x-1][y].getComponent('block').setNumber(this.data[x-1][y]);
  424.                 this.doMove(block,position,()=>{
  425.                     block.destroy();
  426.                     callback && callback();
  427.                 });
  428.                 hasMove = true;
  429.             }else{
  430.                 callback && callback();
  431.                 cc.log('case 4');
  432.                 return;
  433.             }
  434.         };
  436.         let toMove = [];
  437.         for (let i=0;i<ROWS;++i){
  438.             for(let j=0;j<ROWS;++j){
  439.                 if(this.data[i][j] !=0){
  440.                     toMove.push({x:i,y:j});
  441.                 }
  442.             }
  443.         }
  445.         let counter = 0;
  446.         for (let i=0;i<toMove.length;++i) {
  447.             move(toMove[i].x,toMove[i].y,()=>{
  448.                 counter++;
  449.                 if(counter == toMove.length){
  450.                     this.afterMove(hasMove);
  451.                 }
  452.             });
  453.         }
  454.     }
  455. //     addEventHandler(){
  456. //         this.bg.on('touchstart',(event)=>{
  457. //             this.startPoint = event.getLocation();
  458. //         });
  460. //         this.bg.on('touchend',(event)=>{
  461. //             this.endPoint = event.getLocation();
  462. //         });
  464. //         // this.bg.on('touchcancel',(event)=>{
  465. //         //     this.touchEnd(event);
  466. //         // });
  467. //         let vec = cc.pSub(this.endPoint,this.startPoint); 
  468. //         if (cc.pLength(vec) > MIN_LENGTH) {
  469. //             if(Math.abs(vec.x) > Math.abs(vec.y)){
  470. //                 //水平方向
  471. //                 if(vec.x > 0){
  472. //                     this.moveRight();
  473. //                 }else{
  474. //                     this.moveLeft();
  475. //                 }
  476. //             } else{
  477. //                 //竖直方向
  478. //                 if(vec.y > 0){
  479. //                     this.moveUp();
  480. //                 }else{
  481. //                     this.moveDown();
  482. //                 }
  483. //             }
  484. //     }
  485. // },
  486. // moveRight(){
  487. //     cc.log('moveRight');
  488. // },
  489. // moveLeft(){
  490. //     cc.log('moveLeft');
  491. // },
  492. // moveUp(){
  493. //     cc.log('move Up');
  494. // },
  495. // moveDown(){
  496. //     cc.log('move Down');
  497. // }
  498.     // touchEnd(event){
  499.     //     this.endPoint = event.getLocation();
  501.     //     } 
  502.     // },
  504.     // // update (dt) {},
  505. });

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

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

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

  1. import colors from 'colors'
  3. cc.Class({
  4.     extends: cc.Component,
  6.     properties: {
  7.         numberLabel:cc.Label
  8.     },
  10.     // LIFE-CYCLE CALLBACKS:
  12.     // onLoad () {},
  14.     start () {
  16.     },
  17.     setNumber(number){
  18.         if(number == 0){
  19.             this.numberLabel.node.active = false;
  20.         }
  21.         this.numberLabel.string = number;
  22.         if (number in colors) {
  23.             this.node.color = colors[number]; 
  24.         }
  25.     }
  27.     // update (dt) {},
  28. });

最后我们在

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

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

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

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

之后会弹出：

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

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

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

uni框架Cloud托管网页

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

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

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

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

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

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

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

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

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

Cocos Creator | 2048

标签： 算法 游戏引擎
本文转载自: https://blog.csdn.net/lbcyllqj/article/details/127560768
版权归原作者 lqj_本人 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？