add win condition
[2048.git] / js / html_actuator.js
Gabriele Cirulli
Gabriele Cirulli


Gabriele Cirulli

Gabriele Cirulli

Gabriele Cirulli
Gabriele Cirulli

Gabriele Cirulli
Gabriele Cirulli
Gabriele Cirulli






Gabriele Cirulli
Gabriele Cirulli


Gabriele Cirulli

Gabriele Cirulli

Gabriele Cirulli
Gabriele Cirulli


Gabriele Cirulli



Gabriele Cirulli
Gabriele Cirulli
Gabriele Cirulli


Gabriele Cirulli
Gabriele Cirulli
Gabriele Cirulli


Gabriele Cirulli





Gabriele Cirulli




Gabriele Cirulli











Gabriele Cirulli
Gabriele Cirulli

Gabriele Cirulli













Gabriele Cirulli

Gabriele Cirulli


Gabriele Cirulli

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
function HTMLActuator() {
  this.tileContainer  = document.getElementsByClassName("tile-container")[0];
  this.gameContainer  = document.getElementsByClassName("game-container")[0];
  this.scoreContainer = document.getElementsByClassName("score-container")[0];
 
  this.score = 0;
}
 
HTMLActuator.prototype.actuate = function (grid, metadata) {
  var self = this;
 
  window.requestAnimationFrame(function () {
    self.clearContainer(self.tileContainer);
 
    grid.cells.forEach(function (column) {
      column.forEach(function (cell) {
        if (cell) {
          self.addTile(cell);
        }
      });
    });
 
    self.updateScore(metadata.score);
 
    if (metadata.over) {
      self.gameOver();
    }
  });
};
 
HTMLActuator.prototype.clearContainer = function (container) {
  while (container.firstChild) {
    container.removeChild(container.firstChild);
  }
};
 
HTMLActuator.prototype.addTile = function (tile) {
  var self = this;
 
  var element   = document.createElement("div");
  var position  = tile.previousPosition || { x: tile.x, y: tile.y };
  positionClass = this.positionClass(position);
 
  element.classList.add("tile", "tile-" + tile.value, positionClass);
  element.textContent = tile.value;
 
  this.tileContainer.appendChild(element);
 
  if (tile.previousPosition) {
    window.requestAnimationFrame(function () {
      element.classList.remove(element.classList[2]);
      element.classList.add(self.positionClass({ x: tile.x, y: tile.y }));
    });
  } else if (tile.mergedFrom) {
    element.classList.add("tile-merged");
    tile.mergedFrom.forEach(function (merged) {
      self.addTile(merged);
    });
  } else {
    element.classList.add("tile-new");
  }
};
 
HTMLActuator.prototype.normalizePosition = function (position) {
  return { x: position.x + 1, y: position.y + 1 };
};
 
HTMLActuator.prototype.positionClass = function (position) {
  position = this.normalizePosition(position);
  return "tile-position-" + position.x + "-" + position.y;
};
 
HTMLActuator.prototype.updateScore = function (score) {
  this.clearContainer(this.scoreContainer);
 
  var difference = score - this.score;
  this.score = score;
 
  this.scoreContainer.textContent = this.score;
 
  if (difference) {
    var addition = document.createElement("div");
    addition.classList.add("score-addition");
    addition.textContent = "+" + difference;
 
    this.scoreContainer.appendChild(addition);
  }
};
 
HTMLActuator.prototype.gameOver = function () {
  this.gameContainer.classList.add("game-over");
};
 
comments