Commits

Pedro Ferreira committed b5439dd

- center the value text in the middle of the block
- center the canvas and game menu horizontally
- resize the canvas according to the grid length

  • Participants
  • Parent commits 8004a27

Comments (0)

Files changed (4)

     {
     margin: 0 10px;
     }
+
+body
+    {
+    text-align: center;
+    }
+
+#Canvas
+    {
+    margin-bottom: 30px;
+    }
     valueElement;
     containerElement;
 
-    static size = 50;
+    static size = 70;
     static colors = {
         '2': 'rgb(243,243,241)',
         '4': 'rgb(192,243,241)',
 setupShape()
     {
     var background = new createjs.Shape();
-    var value = new createjs.Text( '', '30px monospace' );
+    var textSize = 30;
+    var value = new createjs.Text( '', textSize + 'px monospace' );
+
+    var size = Block.size;
+
+    value.textAlign = 'center';
+    value.x = size / 2;
+    value.y = size / 2 - textSize / 2;
 
     var container = new createjs.Container();
 
 {
 clear();
 
-G.MAP_LENGTH = length;
-
-var mapLength = length;
 var blockSize = Block.size;
 var lineSize = G.GRID_LINE_SIZE;
 
-for (var column = 0 ; column < mapLength ; column++)
+G.MAP_LENGTH = length;
+
+G.CANVAS.width = length * blockSize;
+G.CANVAS.height = length * blockSize;
+
+
+for (var column = 0 ; column < length ; column++)
     {
     BLOCKS[ column ] = [];
 
-    for (var line = 0 ; line < mapLength ; line++)
+    for (var line = 0 ; line < length ; line++)
         {
         BLOCKS[ column ][ line ] = null;
         }
     }
 
 
-for (var a = 1 ; a < mapLength ; a++)
+for (var a = 1 ; a < length ; a++)
     {
     var position = blockSize * a + (a - 1) * lineSize;
-    var lineLength = mapLength * blockSize + (mapLength - 1) * lineSize;
+    var lineLength = length * blockSize + (length - 1) * lineSize;
 
     drawLine( position, 0, lineSize, lineLength );
     drawLine( 0, position, lineLength, lineSize );
     - when 2 tiles combine, we add the resulting value to the score
     - game is won when a tile with a value of 2048 appears
     - game ends when there's no more possible moves (no empty spaces, and no adjacent tiles with the same value)
-
-    - to doo:
-
-        - center the grid
-        - resize the canvas according to the grid length
  */
 
 var G = {
 G.CANVAS = document.querySelector( '#Canvas' );
 G.STAGE = new createjs.Stage( G.CANVAS );
 
-G.CANVAS.width = 600;
-G.CANVAS.height = 400;
 
 Game.init();