modify canvas size, erasing before block

fpdjsns · Jul 27, 2018 · 7fb25bb · 7fb25bb
1 parent 7ca8f6b
commit 7fb25bb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/Tetris/js/main.js b/Tetris/js/main.js
@@ -43,19 +43,24 @@ var nextBlockType = Math.floor(Math.random() * blockType.length);
 const BEGIN_X = 30;
 const BEGIN_Y = 30;
 const SPEED = 10;
-const WIDTH = canvas.clientWidth;
-const HEIGHT = canvas.clientHeight;
-const CANVAS_LEFT = canvas.clientLeft;
-const CANVAS_RIGHT = canvas.clientLeft + WIDTH;
-const CANVAS_TOP = canvas.clientTop;
-const CANVAS_BOTTOM = canvas.clientTop + HEIGHT;
+
 const SMALL_BLOCK_SIZE = 20;
 const BIG_BLOCK_SIZE = SMALL_BLOCK_SIZE * 4;
 
+const GAME_SCREEN_WIDTH = 10 * SMALL_BLOCK_SIZE;
+const GAME_SCREEN_HEIGHT = 20 * SMALL_BLOCK_SIZE;
+
+const GAME_SCREEN_LEFT = canvas.clientLeft;
+const GAME_SCREEN_RIGHT = canvas.clientLeft + GAME_SCREEN_WIDTH;
+const GAME_SCREEN_TOP = canvas.clientTop;
+const GAME_SCREEN_BOTTOM = canvas.clientTop + GAME_SCREEN_HEIGHT;
+
 const WAIT_NEXTBLOCK_TIME = 500;
 
 if (canvas.getContext) {
     var ctx = canvas.getContext("2d");
+    canvas.width = GAME_SCREEN_WIDTH;
+    canvas.height = GAME_SCREEN_HEIGHT;
 } else {
     console.log("browser not supported canvas");
 }
@@ -93,17 +98,18 @@ function Block(blockTypeIndex, x, y) {
     this.y = y;
 
     this.drawBlock = function(nx, ny) {
-        ctx.clearRect(this.x, this.y, BIG_BLOCK_SIZE, BIG_BLOCK_SIZE);
-        if (nx < CANVAS_LEFT || nx + BIG_BLOCK_SIZE > CANVAS_RIGHT) nx = this.x;
-        if (ny + BIG_BLOCK_SIZE > CANVAS_BOTTOM) {
+        this.eraseBeforeBlock();
+        if (nx < GAME_SCREEN_LEFT || nx + BIG_BLOCK_SIZE > GAME_SCREEN_RIGHT)
+            nx = this.x;
+        if (ny + BIG_BLOCK_SIZE > GAME_SCREEN_BOTTOM) {
             ny = this.y;
             setTimeout(drawNewBlock(), WAIT_NEXTBLOCK_TIME);
         }
 
         // Change colors just before drawing to avoid affecting the previous or next block color.
         ctx.fillStyle = this.type.color;
-        for (var i = 0; i < 4; i++) {
-            for (var j = 0; j < 4; j++) {
+        for (var i = 0; i < this.type.shape.length; i++) {
+            for (var j = 0; j < this.type.shape[i].length; j++) {
                 if (this.type.shape[i][j] == 1)
                     ctx.fillRect(
                         nx + i * SMALL_BLOCK_SIZE,
@@ -117,4 +123,18 @@ function Block(blockTypeIndex, x, y) {
         this.x = nx;
         this.y = ny;
     };
+
+    this.eraseBeforeBlock = function() {
+        for (var i = 0; i < this.type.shape.length; i++) {
+            for (var j = 0; j < this.type.shape[i].length; j++) {
+                if (this.type.shape[i][j] == 1)
+                    ctx.clearRect(
+                        this.x + i * SMALL_BLOCK_SIZE,
+                        this.y + j * SMALL_BLOCK_SIZE,
+                        SMALL_BLOCK_SIZE,
+                        SMALL_BLOCK_SIZE
+                    );
+            }
+        }
+    };
 }
diff --git a/Tetris/main.html b/Tetris/main.html
@@ -8,7 +8,7 @@
 
 <body>
     <div id="main">
-        <canvas id="game" width="400" height="600" style="background-color:pink"></canvas>
+        <canvas id="game" style="background-color:pink"></canvas>
     </div>
 
     <script src="http://code.jquery.com/jquery-latest.js"></script>