作者：channingbreeze

日期：2016-12-11

2048作为前段时间十分火爆的小游戏，以其简单的操作，有趣的玩法，一下子从小游戏的角逐中脱颖而出。本教程通过phaser来实现了一个标准版的2048，可以在桌面和移动端运行，一起来看看其中的关键代码吧。

效果就不在这里截图了，给一个地址，大家自己体验一下先。http://game.webxinxin.com/2048。

本教程主要介绍一些思路，技术关键点以及实现过程中遇到的一些坑！

开始界面呀，结束界面呀，这些就不介绍了，非常简单，如果还不会的话，可以看前面的入门教程和一些实例。本案例比较难的就是游戏的逻辑以及数据结构的组织方式。

第一个技术点是上面的两个计分的框，由于本案例的图片资源比较少，很多东西都是由js去画出来的，两个计分框也不例外。其实每个计分框可以看成一个大的sprite，这个大的sprite由几部分组成，框子、标题和分数，分别用graphic和两个text就能实现，把这些都放到sprite里面，就组成了一个计分框。

//score
var scoreSprite = game.add.sprite(10, 10);
var scoreGraphics = game.add.graphics(0, 0);
scoreGraphics.lineStyle(5, 0xA1C5C5);
scoreGraphics.beginFill(0x308C8C);
scoreGraphics.drawRoundedRect(0, 0, 70, 50, 10);
scoreGraphics.endFill();
scoreSprite.addChild(scoreGraphics);
var scoreTitle = game.add.text(0, 5, "SCORE", titleStyle);
scoreTitle.setTextBounds(0, 0, 70, 50);
scoreSprite.addChild(scoreTitle);
this.scoreText = game.add.text(0, 20, this.score, scoreStyle);
this.scoreText.setTextBounds(0, 0, 70, 50);
scoreSprite.addChild(this.scoreText);

        其实有了计分框的实现思路，不难想象，2048游戏中的方块也是这种方式，一个框加上一个分数，组成一个sprite，也就是一个方块。但是方块仅仅实现了显示的需求，逻辑需求要怎么实现呢？所以其实我们需要一个4x4的数组，然后根据上下左右的滑动来做不同的遍历，决定怎么合并和移动方块。而每一个方块对象，除了有一个sprite属性外，还有一些标识去记录一些状态，表示逻辑的处理结果。

在滑动逻辑的处理中，我们总是从前面开始，从后往前遍历，如果碰到一个非零的方块，就检查是否能够合并，能够合并就进行合并，交换方块的位置及sprite等属性，并且直接开始执行动画（这种方式比记录下来动画再在最后全部执行来得简单）。如果不能合并，就需要移动当前方块了，这时候判断遍历的终点是否是空的，来决定移动的距离。

其实计算出最终的结果是很简单的，难的是计算出每一个方块的动画，每一个方块，可能会移动，可能会合并。具体的逻辑还需要大家自己细细琢磨。

// swipe的公共逻辑抽出
this.swipeCommon = function(i, j, arrNode, posJson, condition, nextArrNode, nextPosJson) {
  var that = this;
  var duration = 100;
  // 遇到了可以合并的
  if(!arrNode.newNode && arrNode.value == this.array[i][j].value) {
    arrNode.value = arrNode.value * 2;
    arrNode.newNode = true;
    this.array[i][j].value = 0;
    this.score = this.score + arrNode.value;
    this.scoreText.text = this.score;
    if(this.score > this.best) {
      this.best = this.score;
      this.bestText.text = this.best;
    }
    // 渐渐透明后被kill掉
    var t1 = game.add.tween(arrNode.sprite).to({alpha: 0}, duration, Phaser.Easing.Linear.None, true);
    t1.onComplete.add(function() {
      this.sprite.kill();
      that.placeSquare(this.x, this.y, this.value);
      if(!that.canSwipe) {
        that.canSwipe = true;
        that.generateSquare();
      }
    }, arrNode);
    var t2 = game.add.tween(this.array[i][j].sprite).to({alpha: 0}, duration, Phaser.Easing.Linear.None, true);
    t2.onComplete.add(function() {
      this.kill();
      if(!that.canSwipe) {
        that.canSwipe = true;
        that.generateSquare();
      }
    }, this.array[i][j].sprite);
    game.add.tween(this.array[i][j].sprite).to(posJson, duration, Phaser.Easing.Linear.None, true);
    arrNode.sprite = this.array[i][j].sprite;
    this.array[i][j].sprite = undefined;
  } else if(arrNode.value == 0) {
    arrNode.value = this.array[i][j].value;
    this.array[i][j].value = 0;
    var t = game.add.tween(this.array[i][j].sprite).to(posJson, duration, Phaser.Easing.Linear.None, true);
    t.onComplete.add(function() {
      if(!that.canSwipe) {
        that.canSwipe = true;
        that.generateSquare();
      }
    });
    arrNode.sprite = this.array[i][j].sprite;
    this.array[i][j].sprite = undefined;
  } else if(condition) {
    nextArrNode.value = this.array[i][j].value;
    this.array[i][j].value = 0;
    var t = game.add.tween(this.array[i][j].sprite).to(nextPosJson, duration, Phaser.Easing.Linear.None, true);
    t.onComplete.add(function() {
      if(!that.canSwipe) {
        that.canSwipe = true;
        that.generateSquare();
      }
    });
    nextArrNode.sprite = this.array[i][j].sprite;
    this.array[i][j].sprite = undefined;
  }
};

其实在做滑动逻辑的时候，最好是先分别做完上下左右的逻辑，然后，再将公共的逻辑抽出，变成一个函数，这样会稍微简单一些。

另一个需要解决的问题，就是如何判断手势，也就是怎么判断上滑，下滑，左滑和右滑。这里我找到了网上的一个插件，使用起来还是很方便的。但是假如不用插件，我们其实也能做，无非就是判断一下按下和抬起的时候，点的相对位置而已。大家可以去看看插件的源码，也是这么做的，但是插件原来对滑动的判断并不敏感，我对参数做了一些改动，想省事的同学可以直接拿去用。关键代码就是：

// add swipe check
this.swipe = new Swipe(this.game, this.swipeCheck);

和

// swipe检测
this.swipeCheck = {
  up: this.swipeUp.bind(this),
  down: this.swipeDown.bind(this),
  left: this.swipeLeft.bind(this),
  right: this.swipeRight.bind(this)
};

其实把滑动检测和滑动逻辑做完之后，游戏基本就可以了。但是我还在方块的生成动画这里跌了一下，我希望方块生成的时候，从中心开始往外缩放。但是一开始设置了anchor竟然无效。一开始还以为无法实现，但是其实只是自己的几个精灵的组织关系没有写好，调整之后，很轻松就实现了。

// 在x,y位置放置一个值为value的方块
this.placeSquare = function(x, y, value) {
  var squareStyle = { font: "bold 20px Arial", fill: "#FFFFFF", boundsAlignH: "center", boundsAlignV: "middle" };
  var square = game.add.sprite();
  square.reset(this.transX(x), this.transY(y));
  var squareBackground = game.add.graphics(-45/2, -45/2);
  squareBackground.beginFill(this.colors[value]);
  squareBackground.drawRoundedRect(0, 0, 45, 45, 5);
  squareBackground.endFill();
  square.addChild(squareBackground);
  var squareText = game.add.text(-45/2, -45/2, value, squareStyle);
  squareText.setTextBounds(0, 0, 45, 45);
  square.addChild(squareText);
  this.array[x][y].value = value;
  this.array[x][y].sprite = square;
  square.anchor.setTo(0.5, 0.5);
  square.scale.setTo(0.0, 0.0);
  var tween = game.add.tween(square.scale).to({x:1.0, y:1.0}, 100, Phaser.Easing.Sinusoidal.InOut, true);
  tween.onComplete.add(function() {
    if(this.checkGameover()) {
      this.gameOver();
    }
  }, this);
};

好了，2048的讲解到这里就结束了，期待下一个小游戏！

转载请注明出处：http://www.phaser-china.com/tutorial-detail-6.html