Restore deleted logic.

- background to checked pattern #1
- keep block #4

Tetris/js/blockType.js

@@ -1,4 +1,4 @@
-var blockType = [
+const blockType = [
     {
         name: "O",
         color: "skyblue",
@@ -30,7 +30,7 @@ var blockType = [
     },
     {
         name: "T",
-        color: "yellow",
+        color: "#FFD300",
         shape: [
             [[0, 0, 0, 0], [0, 1, 1, 1], [0, 0, 1, 0], [0, 0, 0, 0]],
             [[0, 0, 1, 0], [0, 0, 1, 1], [0, 0, 1, 0], [0, 0, 0, 0]],
@@ -58,4 +58,13 @@ var blockType = [
             [[0, 0, 1, 0], [0, 0, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0]]
         ]
     }
-];
+];
+
+const blockTypeMap = blockType.reduce((map, type, index, array) => {
+    map[type.name] = index;
+    return map;
+}, new Map());
+
+var getBlockTypeIndex = function(blockType) { 
+    return blockTypeMap[blockType.name];
+}

Tetris/js/canvas.js

@@ -3,8 +3,8 @@ var canvasNextBlock = document.getElementById("nextBlock");
 
 if (canvas.getContext) {
     var ctx = canvas.getContext("2d");
-    canvas.width = GAME_SCREEN_WIDTH;
-    canvas.height = GAME_SCREEN_HEIGHT;
+    canvas.width = GAME_SCREEN_WIDTH + BLOCK_GAP;
+    canvas.height = GAME_SCREEN_HEIGHT + BLOCK_GAP;
 
     var ctxNextBlock = canvasNextBlock.getContext("2d");
     canvasNextBlock.width = BIG_BLOCK_SIZE;

Tetris/js/constants.js

@@ -31,3 +31,5 @@ const NONE_DUPLICATED = 0;
 const LEFT_DUPLICATED = 1;
 const RIGHT_DUPLICATED = 2;
 const EITHER_DUPLICATED = 3;
+
+const LINE_COLOR = "black";

Tetris/js/gameAlgorithm.js

@@ -1,5 +1,6 @@
 var nowBlock;
 var nextBlockTypes = new NextBlock(NEXT_BLOCK_SIZE);
+var keepBlockType;
 var gameScreenArray = new Array(GAME_SCREEN_HEIGHT_NUM)
     .fill(-1)
     .map(row => new Array(GAME_SCREEN_WIDTH_NUM).fill(-1));
@@ -8,13 +9,23 @@ setInterval(function() {
     nowBlock.drawDown(nowBlock.x, nowBlock.y + 1);
 }, SPEED);
 
-var drawNewBlock = function() {
-    nowBlock = new Block(nextBlockTypes.pop(), BEGIN_X, BEGIN_Y);
-    if (nowBlock.isBottom(BEGIN_X, BEGIN_Y)) {
-        gameEnd();
+// blockType 있는 경우 블럭 생성 x. blockType을 제일 위부터 떨어뜨리기만 한다.
+// blockType 없는 경우 새로운 블럭 생성
+var drawNewBlock = function(blockType) {
+    if(blockType == undefined){
+        nowBlock = new Block(nextBlockTypes.pop(), BEGIN_X, BEGIN_Y);
+        if (nowBlock.isBottom(BEGIN_X, BEGIN_Y)) {
+            gameEnd();
+        }
+        nowBlock.drawDown(BEGIN_X, BEGIN_Y);
+        drawNextBlocks();
+    } else {
+        nowBlock = drawNewBlock(blockType, BEGIN_X, BEGIN_Y);
+        if (nowBlock.isBottom(BEGIN_X, BEGIN_Y)) {
+            gameEnd();
+        }
+        nowBlock.drawDown(BEGIN_X, BEGIN_Y);
     }
-    nowBlock.drawDown(BEGIN_X, BEGIN_Y);
-    drawNextBlocks();
 };
 
 var drawNextBlocks = function() {
@@ -74,10 +85,10 @@ var eraseRow = function(row) {
 
 var eraseOneBlock = function(x, y) {
     ctx.clearRect(
-        x * SMALL_BLOCK_SIZE,
-        y * SMALL_BLOCK_SIZE,
-        SMALL_BLOCK_SIZE,
-        SMALL_BLOCK_SIZE
+        x * SMALL_BLOCK_SIZE + BLOCK_GAP,
+        y * SMALL_BLOCK_SIZE + BLOCK_GAP,
+        SMALL_BLOCK_SIZE - BLOCK_GAP,
+        SMALL_BLOCK_SIZE - BLOCK_GAP
     );
 };
 
@@ -91,6 +102,27 @@ var drawOneBlockWithColor = function(x, y, colorName) {
     );
 }
 
+var drawWhiteLineOnBackground = function() {
+    ctx.fillStyle = LINE_COLOR;
+    for (var i = 0; i <= GAME_SCREEN_WIDTH_NUM; i++) {
+        ctx.fillRect(
+            i * SMALL_BLOCK_SIZE,
+            0,
+            BLOCK_GAP,
+            GAME_SCREEN_HEIGHT
+        );
+    }
+    for (var i = 0; i <= GAME_SCREEN_HEIGHT_NUM; i++) {
+        ctx.fillRect(
+            0,
+            i * SMALL_BLOCK_SIZE,
+            GAME_SCREEN_WIDTH,
+            BLOCK_GAP
+        );
+    }
+}
+
+
 var drawOneBlock = function(x, y, colorType) {
     drawOneBlockWithColor(x, y, blockType[colorType].color);
 };
@@ -143,3 +175,25 @@ var setBlockInGameScreen = function(block) {
         }
     }
 };
+
+const keepOrLoadBlock = function() {
+    // 이미 불러온 블럭인 경우. 다시 저장이 불가능하다.
+    if(nowBlock.isLoaded) return false;
+
+    nowBlock.eraseBeforeBlock();
+    const willKeepType = nowBlock.type; // 저장될 블럭 타입
+
+    // 불러올 블럭 타입이 있는 경우
+    if(keepBlockType) {
+        nowBlock = new Block(getBlockTypeIndex(keepBlockType), BEGIN_X, BEGIN_Y);
+        nowBlock.isLoaded = true;
+    }
+    else { // 불러올 블럭 타입이 없는 경우
+        drawNewBlock(); // 새로운 블럭 생성
+    }
+
+    // 현재 블럭 타입 저장
+    keepBlockType = willKeepType;
+
+    return true;
+}

Tetris/js/gameMain.js

@@ -6,6 +6,7 @@ $(window).load(function() {
 var gameStart = function(){
     //alert("game start!");
     drawNewBlock();
+    drawWhiteLineOnBackground();
 }
 
 var gameEnd = function() {