remove debug logging
remove debug logging

function GameManager(size, InputManager, Actuator) { function GameManager(size, InputManager, Actuator) {
this.size = size; // Size of the grid this.size = size; // Size of the grid
this.inputManager = new InputManager; this.inputManager = new InputManager;
this.actuator = new Actuator; this.actuator = new Actuator;
   
this.startTiles = 2; this.startTiles = 2;
this.grid = new Grid(this.size); this.grid = new Grid(this.size);
   
this.inputManager.on("move", this.move.bind(this)); this.inputManager.on("move", this.move.bind(this));
   
this.setup(); this.setup();
} }
   
// Set up the game // Set up the game
GameManager.prototype.setup = function () { GameManager.prototype.setup = function () {
this.addStartTiles(); this.addStartTiles();
   
// Update the actuator // Update the actuator
this.actuate(); this.actuate();
}; };
   
// Set up the initial tiles to start the game with // Set up the initial tiles to start the game with
GameManager.prototype.addStartTiles = function () { GameManager.prototype.addStartTiles = function () {
for (var i = 0; i < this.startTiles; i++) { for (var i = 0; i < this.startTiles; i++) {
this.addRandomTile(); this.addRandomTile();
} }
}; };
   
// Adds a tile in a random position // Adds a tile in a random position
GameManager.prototype.addRandomTile = function () { GameManager.prototype.addRandomTile = function () {
if (this.grid.cellsAvailable()) { if (this.grid.cellsAvailable()) {
var value = Math.random() < 0.9 ? 2 : 4; var value = Math.random() < 0.9 ? 2 : 4;
var tile = new Tile(this.grid.randomAvailableCell(), value); var tile = new Tile(this.grid.randomAvailableCell(), value);
   
this.grid.insertTile(tile); this.grid.insertTile(tile);
} }
}; };
   
// Sends the updated grid to the actuator // Sends the updated grid to the actuator
GameManager.prototype.actuate = function () { GameManager.prototype.actuate = function () {
this.actuator.actuate(this.grid); this.actuator.actuate(this.grid);
}; };
   
// Saves all the current tile positions // Saves all the current tile positions
GameManager.prototype.saveTilePositions = function () { GameManager.prototype.saveTilePositions = function () {
this.grid.eachCell(function (x, y, tile) { this.grid.eachCell(function (x, y, tile) {
if (tile) { if (tile) {
tile.savePosition(); tile.savePosition();
} }
}); });
}; };
   
// Move a tile and its representation // Move a tile and its representation
GameManager.prototype.moveTile = function (tile, cell) { GameManager.prototype.moveTile = function (tile, cell) {
this.grid.cells[tile.x][tile.y] = null; this.grid.cells[tile.x][tile.y] = null;
this.grid.cells[cell.x][cell.y] = tile; this.grid.cells[cell.x][cell.y] = tile;
tile.x = cell.x; tile.x = cell.x;
tile.y = cell.y; tile.y = cell.y;
}; };
   
// Move tiles on the grid in the specified direction // Move tiles on the grid in the specified direction
GameManager.prototype.move = function (direction) { GameManager.prototype.move = function (direction) {
// 0: up, 1: right, 2:down, 3: left // 0: up, 1: right, 2:down, 3: left
var self = this; var self = this;
   
var cell, tile; var cell, tile;
   
var vector = this.getVector(direction); var vector = this.getVector(direction);
var traversals = this.buildTraversals(vector); var traversals = this.buildTraversals(vector);
   
// Save the current tile positions (for actuator awareness) // Save the current tile positions (for actuator awareness)
this.saveTilePositions(); this.saveTilePositions();
   
// Traverse the grid in the right direction and move tiles // Traverse the grid in the right direction and move tiles
traversals.x.forEach(function (x) { traversals.x.forEach(function (x) {
traversals.y.forEach(function (y) { traversals.y.forEach(function (y) {
cell = { x: x, y: y }; cell = { x: x, y: y };
tile = self.grid.cellContent(cell); tile = self.grid.cellContent(cell);
   
if (tile) { if (tile) {
var pos = self.findFarthestPosition(cell, vector); var pos = self.findFarthestPosition(cell, vector);
console.log(pos);  
self.moveTile(tile, pos); self.moveTile(tile, pos);
} }
}); });
}); });
   
this.addRandomTile(); this.addRandomTile();
console.log(16 - this.grid.availableCells().length);  
this.actuate(); this.actuate();
}; };
   
// Get the vector representing the chosen direction // Get the vector representing the chosen direction
GameManager.prototype.getVector = function (direction) { GameManager.prototype.getVector = function (direction) {
// Vectors representing tile movement // Vectors representing tile movement
var map = { var map = {
0: { x: 0, y: -1 }, // up 0: { x: 0, y: -1 }, // up
1: { x: 1, y: 0 }, // right 1: { x: 1, y: 0 }, // right
2: { x: 0, y: 1 }, // down 2: { x: 0, y: 1 }, // down
3: { x: -1, y: 0 } // left 3: { x: -1, y: 0 } // left
}; };
   
return map[direction]; return map[direction];
}; };
   
// Build a list of positions to traverse in the right order // Build a list of positions to traverse in the right order
GameManager.prototype.buildTraversals = function (vector) { GameManager.prototype.buildTraversals = function (vector) {
var traversals = { x: [], y: [] }; var traversals = { x: [], y: [] };
   
for (var pos = 0; pos < this.size; pos++) { for (var pos = 0; pos < this.size; pos++) {
traversals.x.push(pos); traversals.x.push(pos);
traversals.y.push(pos); traversals.y.push(pos);
} }
   
// Always traverse from the farthest cell in the chosen direction // Always traverse from the farthest cell in the chosen direction
if (vector.x === 1) traversals.x = traversals.x.reverse(); if (vector.x === 1) traversals.x = traversals.x.reverse();
if (vector.y === 1) traversals.y = traversals.y.reverse(); if (vector.y === 1) traversals.y = traversals.y.reverse();
   
return traversals; return traversals;
}; };
   
GameManager.prototype.findFarthestPosition = function (cell, vector) { GameManager.prototype.findFarthestPosition = function (cell, vector) {
var previous; var previous;
   
// Progress towards the vector direction until an obstacle is found // Progress towards the vector direction until an obstacle is found
do { do {
previous = cell; previous = cell;
cell = { x: previous.x + vector.x, y: previous.y + vector.y }; cell = { x: previous.x + vector.x, y: previous.y + vector.y };
} while (cell.x >= 0 && cell.x < this.size && } while (cell.x >= 0 && cell.x < this.size &&
cell.y >= 0 && cell.y < this.size && cell.y >= 0 && cell.y < this.size &&
this.grid.cellAvailable(cell)); this.grid.cellAvailable(cell));
   
return previous; return previous;
}; };
   
function HTMLActuator() { function HTMLActuator() {
this.tileContainer = document.getElementsByClassName("tile-container")[0]; this.tileContainer = document.getElementsByClassName("tile-container")[0];
} }
   
HTMLActuator.prototype.actuate = function (grid) { HTMLActuator.prototype.actuate = function (grid) {
var self = this; var self = this;
   
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
self.clearContainer(); self.clearContainer();
   
grid.cells.forEach(function (column) { grid.cells.forEach(function (column) {
column.forEach(function (cell) { column.forEach(function (cell) {
if (cell) { if (cell) {
self.addTile(cell); self.addTile(cell);
} }
}); });
}); });
}); });
}; };
   
HTMLActuator.prototype.clearContainer = function () { HTMLActuator.prototype.clearContainer = function () {
while (this.tileContainer.firstChild) { while (this.tileContainer.firstChild) {
this.tileContainer.removeChild(this.tileContainer.firstChild); this.tileContainer.removeChild(this.tileContainer.firstChild);
} }
}; };
   
HTMLActuator.prototype.addTile = function (tile) { HTMLActuator.prototype.addTile = function (tile) {
var self = this; var self = this;
   
var element = document.createElement("div"); var element = document.createElement("div");
var position = tile.previousPosition || { x: tile.x, y: tile.y }; var position = tile.previousPosition || { x: tile.x, y: tile.y };
positionClass = this.positionClass(position); positionClass = this.positionClass(position);
   
element.classList.add("tile", "tile-" + tile.value, positionClass); element.classList.add("tile", "tile-" + tile.value, positionClass);
element.textContent = tile.value; element.textContent = tile.value;
   
this.tileContainer.appendChild(element); this.tileContainer.appendChild(element);
   
   
if (tile.previousPosition) { if (tile.previousPosition) {
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
// console.log( + " === " + positionClass);  
element.classList.remove(element.classList[2]); element.classList.remove(element.classList[2]);
element.classList.add(self.positionClass({ x: tile.x, y: tile.y })); element.classList.add(self.positionClass({ x: tile.x, y: tile.y }));
}); });
} else { } else {
element.classList.add("tile-new"); element.classList.add("tile-new");
} }
   
}; };
   
HTMLActuator.prototype.normalizePosition = function (position) { HTMLActuator.prototype.normalizePosition = function (position) {
return { x: position.x + 1, y: position.y + 1 }; return { x: position.x + 1, y: position.y + 1 };
}; };
   
HTMLActuator.prototype.positionClass = function (position) { HTMLActuator.prototype.positionClass = function (position) {
position = this.normalizePosition(position); position = this.normalizePosition(position);
return "tile-position-" + position.x + "-" + position.y; return "tile-position-" + position.x + "-" + position.y;
}; };
   
comments