ng2048源码阅读

Tutorial: http://www.ng-newsletter.com/posts/building-2048-in-angularjs.html

Github: https://github.com/fullstackio/ng2048.git

本地不部署项目一直卡在node-sass不成功的问题上，需要的css文件没办法生成，我的目的是弄清设计原理，学习ng的用法，所以直接用sass编译sass文件为css文件，丢到项目文件夹下跑起来。

sass编译css文件

npm install node-sass -g

sass D:\GitHub\ng2048\app\styles\main.scss D:\GitHub\ng2048\app\styles\main.css

启动项目

这个项目是grunt构建的, 使用--force忽略sass编译的错误继续执行

grunt serve --force

这个列子有些小复杂，看看能学到啥

1. 数据传递，指令的使用，ng-if的使用

grid的使用，通过ng-model传递到指令内部的独立scope

<!-- 显示格子 -->

<div grid ng-model='ctrl.game' class="row"></div>

Grid中包含tile，tile指令也是通过ng-model传递到指令内部的独立scope，注意这里的ng-repeat迭代的对象的传递

<div id="game-{{ ngModel.gameSize }}">

  <div class="grid-container">

    <div class="grid-cell" ng-repeat="cell in ngModel.grid track by $index"></div>

  </div>

  <div class="tile-container">

    <div tile

          ng-model='tile'

          ng-repeat='tile in ngModel.tiles track by $id(tile.id || $index)'></div>

  </div>

</div>

tile的模板

<div ng-if='ngModel' class="tile position-{{ ngModel.x }}-{{ ngModel.y }} tile-{{ ngModel.value }}"

  ng-class="{ 'tile-merged': ngModel.merged}">

  <div class="tile-inner">

    {{ ngModel.value }}

  </div>

</div>

2. 通用的游戏键盘控制服务

服务init的时候这个keydown什么也不做，通过on订阅事件，将自己的处理程序加到服务的keyEventHandlers列表中完成事件的定制。这个服务就通用的了，你只需要写好自己的控制程序，然后通过on订阅就可以了。这也算是一种设计技巧了。

'use strict';

angular.module('Keyboard', [])

.service('KeyboardService', function($document) {

  var UP    = 'up',

      RIGHT = 'right',

      DOWN  = 'down',

      LEFT  = 'left';

  var keyboardMap = {

    37: LEFT,

    38: UP,

    39: RIGHT,

    40: DOWN

  };

  this.init = function() {

    var self = this;

    this.keyEventHandlers = [];

    $document.bind('keydown', function(evt) {

      var key = keyboardMap[evt.which];

      if (key) {

        // An interesting key was pressed

        evt.preventDefault();

        self._handleKeyEvent(key, evt);

      }

    });

  };

  this.on = function(cb) {

    this.keyEventHandlers.push(cb);

  };

  this._handleKeyEvent = function(key, evt) {

    var callbacks = this.keyEventHandlers;

    if (!callbacks) {

      return;

    }

    evt.preventDefault();

    if (callbacks) {

      for (var x = 0; x < callbacks.length; x++) {

        var cb = callbacks[x];

        cb(key, evt);

      }

    }

  };

});

//初始化

KeyboardService.init();

//订阅事件

KeyboardService.on(function(key) {

    self.game.move(key);

});

3. 设计思路和实现思路

代码看完了，游戏的思路和我设想的差不多，但是在实现上跟我想的有些不一样，大致也就是两层循环挨个的处理格子，但是实现上感觉还是有些技巧的。

3.1 根据方向确定坐标的偏移量

    var vectors = {

      'left': { x: -1, y: 0 },

      'right': { x: 1, y: 0 },

      'up': { x: 0, y: -1 },

      'down': { x: 0, y: 1 }

    };

3.2 根据方向确定两层循环的索引序列，[0,1,2,3]还是[3,2,1,0]

    this.traversalDirections = function(key) {

      var vector = vectors[key];

      var positions = {x: [], y: []};

      for (var x = 0; x < this.size; x++) {

        positions.x.push(x);

        positions.y.push(x);

      }

      if (vector.x > 0) {

        positions.x = positions.x.reverse();

      }

      if (vector.y > 0) {

        positions.y = positions.y.reverse();

      }

      return positions;

    };

3.3 一次性拿到可以直接移动到的位置和紧跟的进行碰撞的位置

    this.calculateNextPosition = function(cell, key) {

      var vector = vectors[key];

      var previous;

      do {

        previous = cell;

        cell = {

          x: previous.x + vector.x,

          y: previous.y + vector.y

        };

      } while (this.withinGrid(cell) && this.cellAvailable(cell));

      //没有越界，并且cell是空的

      return {

        newPosition: previous,

        next: this.getCellAt(cell)

      };

    };