Deleting lines after completion

tetris.js

@@ -2,7 +2,7 @@
 
 let tetris = function () {
     const grid_x = 10;
-    const grid_y = 30;
+    const grid_y = 20;
     const tetrimonios = [
         /*'I'*/{ mR:2,
               r:[
@@ -45,10 +45,10 @@ let tetris = function () {
             }
     ];
 
-    let timer, canvas, ctx, bs;
+    let timer, canvas, ctx, blockSize;
     let next_t;
     
-    let board;
+    let board, board_x, board_y;
     let t = {t:null,x:0,y:0,r:0};
 
 
@@ -69,10 +69,10 @@ let tetris = function () {
         p.t.r[p.r].forEach(b => drawBlock(p.x + b[0], p.y + b[1]));
     }
     function drawBlock_clean(x,y) {
-        ctx.fillRect(bs*(1+x), bs*(1+y), bs, bs);
+        ctx.fillRect(board_x + blockSize*x, board_y + blockSize*y, blockSize, blockSize);
     }
     function drawBlock_filled(x,y) {
-        ctx.fillRect(bs*(1+x), bs*(1+y), bs, bs);
+        ctx.fillRect(board_x + blockSize*x, board_y + blockSize*y, blockSize, blockSize);
     }
 
 
@@ -109,17 +109,33 @@ let tetris = function () {
     }
 
     function glue(p) {
-        p.t.r[p.r].forEach(b => { board[p.x+b[0]][p.y+b[1]]=1; } );
+        p.t.r[p.r].forEach(b => { board[p.y+b[1]][p.x+b[0]]=1; } );
         draw(t);
+        deleteRows( board.filter( r=>r.filter(c=>c==1).length==grid_x ) );
         dropShape(t);
     }
 
     function collision(p) {
         if ( p.x<0 || p.x>=grid_x || p.y<0 || p.y>=grid_y ) return true;
-        if ( p.t.r[p.r].filter(b => ( p.x+b[0]>=grid_x || p.y+b[1]>=grid_y || board[p.x+b[0]][p.y+b[1]]==1 ) ).length>0 ) return true;
+        if ( p.t.r[p.r].filter(b => ( p.x+b[0]>=grid_x || p.y+b[1]>=grid_y || board[p.y+b[1]][p.x+b[0]]==1 ) ).length>0 ) return true;
         return false
     }
 
+    function deleteRows(r) {
+        if (r.length>0) {
+            // ToDo: Stop timer
+            // ToDo: blinking
+
+            let newBoard = board.filter( r=>r.filter(c=>c==1).length<grid_x );
+            board = Array.from(Array(grid_y - newBoard.length), () => new Array(grid_x));
+            board = board.concat(newBoard);
+
+            cleanBoard();
+            ctx.fillStyle = "#666666";
+            board.forEach((r,y)=>r.forEach((c,x)=>{if(c==1)drawBlock_filled(x,y);}))
+        }
+    }
+
     function getNextT() {
         let tNum = Math.floor(Math.random() * tetrimonios.length);
         return tetrimonios[ tNum ];
@@ -134,11 +150,16 @@ let tetris = function () {
         next_t = getNextT();
     }
 
-    function newGame() {
+    function cleanBoard() {
         ctx.fillStyle = "#FFFFFF";
-        ctx.fillRect(0,0,canvas.getBoundingClientRect().width,canvas.getBoundingClientRect().height);
+        ctx.fillRect(board_x, board_y, blockSize*grid_x, blockSize*grid_y);
+    }
 
-        board = Array.from(Array(grid_x), () => new Array(grid_y));
+    function newGame() {
+        drawBackground();
+        cleanBoard();
+        
+        board = Array.from(Array(grid_y), () => new Array(grid_x)); // Board[Y][X]
         next_t = getNextT();
         dropShape( t );
         if (!timer) timer = setInterval(()=>moveDown(t), 1000);
@@ -146,19 +167,29 @@ let tetris = function () {
 
     function getBlockSize() {
         const space_top = 5;
-        const space_right = 20;
+        const space_right = 10;
         
         const { width, height } = canvas.getBoundingClientRect();
         return Math.floor( Math.min( height / (space_top + grid_y), width / (space_right + grid_x) ) );
     }
 
+    function drawBackground() {
+        ctx.fillStyle = "#FFFFFF";
+        ctx.fillRect(0,0,canvas.getBoundingClientRect().width,canvas.getBoundingClientRect().height);
+
+        ctx.strokeStyle = "#0074cc";
+        ctx.strokeRect(board_x -1, board_y - 1, blockSize*grid_x +2, blockSize*grid_y +2);
+    }
+
     function init() {
         canvas = document.getElementById("app");
         canvas.width = window.innerWidth
         canvas.height = window.innerHeight
 
         ctx = canvas.getContext("2d");
-        bs = getBlockSize();
+        blockSize = getBlockSize();
+        board_x = blockSize*1;
+        board_y = canvas.height - blockSize*grid_y - blockSize*1;
 
         document.addEventListener('keydown', control);
         newGame();