Commits

Pedro Ferreira committed 874b062

- add a range input that changes the grid's size
- use a single SIZE value, instead of separate columns/lines (the grid always have the same number of columns/lines)

Comments (0)

Files changed (4)

static/scripts/game_menu.js

     };
 
 
+var size = document.querySelector( '#size' );
+var sizeValue = document.querySelector( '#sizeValue' );
+
+sizeValue.innerHTML = G.SIZE;
+
+size.value = G.SIZE;
+size.onchange = function()
+    {
+    setGridSize( size.value );
+
+    sizeValue.innerHTML = size.value;
+    };
+
+
 START = start;
 };
 

static/scripts/main.js

     CANVAS: null,
     STAGE: null,
     MAP: [],
-    COLUMNS: 20,
-    LINES: 20,
+    SIZE: 20,
     COUNT_TIME: 0,
     UPDATE_TIME: 300,
     INIT_PHASE: true
 
 G.INIT_PHASE = true;
 
-for (var a = 0 ; a < G.COLUMNS ; a++)
+for (var column = 0 ; column < G.SIZE ; column++)
     {
-    G.MAP[ a ] = [];
+    G.MAP[ column ] = [];
 
-    for (var b = 0 ; b < G.LINES ; b++)
+    for (var line = 0 ; line < G.SIZE ; line++)
         {
-        G.MAP[ a ][ b ] = new Square( a, b );
+        G.MAP[ column ][ line ] = new Square( column, line );
         }
     }
 
 };
 
 
+function setGridSize( size )
+{
+clearGame();
+
+var column, line;
+
+    // clear the current map
+for (column = 0 ; column < G.SIZE ; column++)
+    {
+    for (line = 0 ; line < G.SIZE ; line++)
+        {
+        G.MAP[ column ][ line ].remove();
+        }
+    }
+
+G.MAP.length = 0;
+
+    // init. the map with the new size
+G.SIZE = size;
+
+for (column = 0 ; column < G.SIZE ; column++)
+    {
+    G.MAP[ column ] = [];
+
+    for (line = 0 ; line < G.SIZE ; line++)
+        {
+        G.MAP[ column ][ line ] = new Square( column, line );
+        }
+    }
+}
+
 
 
 function startGame()
 {
 G.INIT_PHASE = false;
 
-for (var column = 0 ; column < G.COLUMNS ; column++)
+for (var column = 0 ; column < G.SIZE ; column++)
     {
-    for (var line = 0 ; line < G.LINES ; line++)
+    for (var line = 0 ; line < G.SIZE ; line++)
         {
         G.MAP[ column ][ line ].removeClickEvent();
         }
 {
 var change = [];
 
-for (var column = 0 ; column < G.COLUMNS ; column++)
+for (var column = 0 ; column < G.SIZE ; column++)
     {
-    for (var line = 0 ; line < G.LINES ; line++)
+    for (var line = 0 ; line < G.SIZE ; line++)
         {
         var square = G.MAP[ column ][ line ];
 
 {
 G.INIT_PHASE = true;
 
-for (var column = 0 ; column < G.COLUMNS ; column++)
+for (var column = 0 ; column < G.SIZE ; column++)
     {
-    for (var line = 0 ; line < G.LINES ; line++)
+    for (var line = 0 ; line < G.SIZE ; line++)
         {
         var square = G.MAP[ column ][ line ];
 
 
 var endColumn = square.column + 1;
 
-if ( endColumn > G.COLUMNS - 1 )
+if ( endColumn > G.SIZE - 1 )
     {
     endColumn = square.column;
     }
 
 var endLine = square.line + 1;
 
-if ( endLine > G.LINES - 1 )
+if ( endLine > G.SIZE - 1 )
     {
     endLine = square.line;
     }

static/scripts/square.js

 };
 
 
+Square.prototype.remove = function()
+{
+this.removeClickEvent();
+
+G.STAGE.removeChild( this.shape );
+};
+
+
 window.Square = Square;
 
 }(window));
     <div id="start" class="button">Start</div>
     <div id="reset" class="button">Reset</div>
 
+    <label for="size">Grid size</label>
+    <input id="size" type="range" min="10" max="20" step="1" />
+    <span id="sizeValue"></span>
+
 </body>
 </html>