level and speed change.

public/index.html

@@ -17,7 +17,7 @@
             </p>
         </div>
         <div id="tetris" class="tetris">
-            <canvas id="tetris-canvas" width="200" height="400"></canvas>
+            <canvas id="tetris-canvas" width="300" height="600"></canvas>
         </div>
         <div class="last"></div>
     </div>

public/script/index.js

@@ -22,7 +22,7 @@ let leftInterval;
 let keyPress = [];
 
 let score = 0;
-let level = 1;
+let level = 0;
 let lines = 0;
 let speed = 1000;
 
@@ -98,6 +98,39 @@ const templateColor = [
     [255, 40, 130, 200]
 ];
 
+const speedSecondsToBotomPerLevel = [
+    15.974, //0
+    14.31,  //1
+    12.646, //2
+    10.982, //3
+    9.318,  //4
+    7.654,  //5
+    5.99,   //6
+    4.326,  //7
+    2.662,  //8
+    1.997,  //9
+    1.664,  //10
+    1.664,  //11
+    1.664,  //12
+    1.331,  //13
+    1.331,  //14
+    1.331,  //15
+    0.998,  //16
+    0.998,  //17
+    0.998,  //18
+    0.666,  //19
+    0.666,  //20
+    0.666,  //21
+    0.666,  //22
+    0.666,  //23
+    0.666,  //24
+    0.666,  //25
+    0.666,  //26
+    0.666,  //27
+    0.666,  //28
+    0.333   //29
+];
+
 let currentPiece = [];
 let color = []
 
@@ -304,6 +337,10 @@ function checkLine() {
                 }
             }
 
+            for (let k = 0; k < 10; k++) {
+                boardData[k][0] = [0, 0, 0, 255];
+            }
+
             lineFilled++;
         }
     }
@@ -322,6 +359,24 @@ function checkLine() {
     }
 
     scoreElement.innerText = score;
+    lines += lineFilled;
+    level = Math.floor(lines / 10);
+    initAndChangeSpeedDrop();
+}
+
+function initAndChangeSpeedDrop() {
+    if (level > 29) {
+        speed = (speedSecondsToBotomPerLevel[29]/20) * 1000;
+    } 
+    else {
+        speed = (speedSecondsToBotomPerLevel[level]/20) * 1000;
+    }
+    clearInterval(downInterval);
+    downInterval = setInterval(() => {
+        moveDown();
+
+        refresh();
+    }, speed);
 }
 
 function moveTo(x, y) {
@@ -380,6 +435,7 @@ function fasteDrop() {
 }
 
 img.onload = () => {
+    initAndChangeSpeedDrop();
     loadTetris();
     refresh();
 

public/style/index.css

@@ -29,8 +29,8 @@ body {
 }
 
 .tetris {
-    width: 200px;
+    width: 300px;
-    height: 400px;
+    height: 600px;
 }
 
 .first {