#7 change number of next block 1 to 3

fpdjsns · Apr 29, 2020 · b992e21 · b992e21
1 parent 2f92ece
commit b992e21
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 542 deletions.
diff --git a/Tetris/js/canvas.js b/Tetris/js/canvas.js
@@ -8,7 +8,7 @@ if (canvas.getContext) {
 
     var ctxNextBlock = canvasNextBlock.getContext("2d");
     canvasNextBlock.width = BIG_BLOCK_SIZE;
-    canvasNextBlock.height = BIG_BLOCK_SIZE;
+    canvasNextBlock.height = BIG_BLOCK_SIZE * NEXT_BLOCK_SIZE;
 } else {
     console.log("browser not supported canvas");
 }
diff --git a/Tetris/js/constants.js b/Tetris/js/constants.js
@@ -1,10 +1,14 @@
 var canvas = document.getElementById("game");
 var canvasNextBlock = document.getElementById("nextBlock");
 
+const BLOCK_GAP = 1;
+
 const SMALL_BLOCK_NUM = 4;
 const SMALL_BLOCK_SIZE = 20;
 const BIG_BLOCK_SIZE = SMALL_BLOCK_SIZE * SMALL_BLOCK_NUM;
 
+const NEXT_BLOCK_SIZE = 3;
+
 const GAME_SCREEN_WIDTH_NUM = 10;
 const GAME_SCREEN_HEIGHT_NUM = 20;
 const GAME_SCREEN_WIDTH = GAME_SCREEN_WIDTH_NUM * SMALL_BLOCK_SIZE;
@@ -27,5 +31,3 @@ const NONE_DUPLICATED = 0;
 const LEFT_DUPLICATED = 1;
 const RIGHT_DUPLICATED = 2;
 const EITHER_DUPLICATED = 3;
-
-const BLOCK_GAP = 1;
diff --git a/Tetris/js/gameAlgorithm.js b/Tetris/js/gameAlgorithm.js
@@ -1,5 +1,5 @@
 var nowBlock;
-var nextBlockType = Math.floor(Math.random() * blockType.length);
+var nextBlockTypes = new NextBlock(NEXT_BLOCK_SIZE);
 var gameScreenArray = new Array(GAME_SCREEN_HEIGHT_NUM)
     .fill(-1)
     .map(row => new Array(GAME_SCREEN_WIDTH_NUM).fill(-1));
@@ -9,33 +9,36 @@ setInterval(function() {
 }, SPEED);
 
 var drawNewBlock = function() {
-    nowBlock = new Block(nextBlockType, BEGIN_X, BEGIN_Y);
+    nowBlock = new Block(nextBlockTypes.pop(), BEGIN_X, BEGIN_Y);
     if (nowBlock.isBottom(BEGIN_X, BEGIN_Y)) {
         gameEnd();
     }
     nowBlock.drawDown(BEGIN_X, BEGIN_Y);
-    nextBlockType = Math.floor(Math.random() * blockType.length);
-    drawNextBlock();
+    drawNextBlocks();
 };
 
-var drawNextBlock = function() {
-    var nextBlock = blockType[nextBlockType];
+var drawNextBlocks = function() {
+    var nextBlocks = nextBlockTypes.toArray();
     var x = 0;
     var y = 0;
-    for (var i = 0; i < SMALL_BLOCK_NUM; i++) {
-        for (var j = 0; j < SMALL_BLOCK_NUM; j++) {
-            if (nextBlock.shape[0][i][j] == 1) {
-                ctxNextBlock.fillStyle = nextBlock.color;
-            } else {
-                ctxNextBlock.fillStyle = "white";
+    for (var k = 0; k < NEXT_BLOCK_SIZE; k++) {
+        var nextBlock = blockType[nextBlocks[k]];
+        for (var i = 0; i < SMALL_BLOCK_NUM; i++) {
+            for (var j = 0; j < SMALL_BLOCK_NUM; j++) {
+                if (nextBlock.shape[0][i][j] == 1) {
+                    ctxNextBlock.fillStyle = nextBlock.color;
+                } else {
+                    ctxNextBlock.fillStyle = "white";
+                }
+                ctxNextBlock.fillRect(
+                    j * SMALL_BLOCK_SIZE + x + BLOCK_GAP,
+                    i * SMALL_BLOCK_SIZE + y + BLOCK_GAP,
+                    SMALL_BLOCK_SIZE - BLOCK_GAP,
+                    SMALL_BLOCK_SIZE - BLOCK_GAP
+                );
             }
-            ctxNextBlock.fillRect(
-                (x + j) * SMALL_BLOCK_SIZE + BLOCK_GAP,
-                (y + i) * SMALL_BLOCK_SIZE + BLOCK_GAP,
-                SMALL_BLOCK_SIZE - BLOCK_GAP,
-                SMALL_BLOCK_SIZE - BLOCK_GAP
-            );
         }
+        y += BIG_BLOCK_SIZE;
     }
 };