colorize block/add ghost

board.js

@@ -16,7 +16,12 @@ function drawBoard() {
     for(let i=20; i<40; i++) for(let j=0; j<10; j++) {
         ctx.strokeRect(10+30*j, 10+30*(i-20), 30, 30);
     }
+    ctx.strokeStyle = "#888";
     for(let i=0; i<40; i++) for(let j=0; j<10; j++) {
-        if(board[i][j]) ctx.fillRect(10+30*j, 10+30*(i-20), 30, 30);
+        if(board[i][j]) {
+            ctx.fillStyle = color[board[i][j]];
+            ctx.fillRect(10+30*j, 10+30*(i-20), 30, 30);
+            ctx.strokeRect(10+30*j, 10+30*(i-20), 30, 30);
+        }
     }
 }

color.js

@@ -0,0 +1,9 @@
+color = {
+    S: "limegreen",
+    Z: "orangered",
+    L: "sandybrown",
+    J: "deepskyblue",
+    I: "powderblue",
+    O: "khaki",
+    T: "mediumpurple"
+}

game.js

@@ -11,21 +11,22 @@ class Block {
         this.r = 0;
         this.x = 3;
         this.y = 19;
-
-        this.harddrop = () => {
-            while(!collide(board, this)) this.y++;
-            this.y--;
-        };
-        this.fix = () => {
-            for(let i=0; i<4; i++) for(let j=0; j<4; j++) {
-                if(tetromino[this.mino][this.r][i][j]) board[this.y+i][this.x+j]=true;
-            }
-            block = nextblock();
-            wasHolded=false;
-        };
     }
 }
 
+function harddrop(board, block) {
+    while(!collide(board, block)) block.y++;
+    block.y--;
+};
+
+function fix() {
+    for(let i=0; i<4; i++) for(let j=0; j<4; j++) {
+        if(tetromino[block.mino][block.r][i][j]) board[block.y+i][block.x+j]=block.mino;
+    }
+    block = nextblock();
+    wasHolded=false;
+};
+
 let bag=Object.keys(tetromino);
 let nextbag=Object.keys(tetromino);
 shuffle(nextbag);
@@ -87,11 +88,14 @@ function drawHold() {
     const canvas = document.getElementById("hold");
     const ctx = canvas.getContext("2d");
     ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = color[hold];
+    ctx.strokeStyle = "#888";
     if(hold==null) return;
     else {
         for(let i=0; i<4; i++) for(let j=0; j<4; j++) {
             if(tetromino[hold][0][i][j]) {
                 ctx.fillRect(10+20*j, 10+20*i, 20, 20);
+                ctx.strokeRect(10+20*j, 10+20*i, 20, 20);
             }
         }
     }
@@ -100,30 +104,52 @@ function drawHold() {
 function drawBlock() {
     const canvas = document.getElementById("block");
     const ctx = canvas.getContext("2d");
+    ctx.fillStyle = color[block.mino];
+    ctx.strokeStyle = "#888";
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     for(let i=0; i<4; i++) for(let j=0; j<4; j++) {
-        if(tetromino[block.mino][block.r][i][j]) ctx.fillRect(10+30*(block.x+j), 10+30*(block.y+i-20), 30, 30);
+        if(tetromino[block.mino][block.r][i][j]) {
+            ctx.fillRect(10+30*(block.x+j), 10+30*(block.y+i-20), 30, 30);
+            ctx.strokeRect(10+30*(block.x+j), 10+30*(block.y+i-20), 30, 30);
+        }
     }
 }
 
 function drawNext() {
     const canvas = document.getElementById("next");
     const ctx = canvas.getContext("2d");
     ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = "#888";
     for(let i=1; i<=5; i++) for(let j=0; j<4; j++) for(let k=0; k<4; k++){
         if(blockcount%7+i<7) {
+            ctx.fillStyle = color[bag[blockcount%7+i]];
             if(tetromino[bag[blockcount%7+i]][0][j][k]) {
                 ctx.fillRect(10+20*k, 10+20*((i-1)*4+j), 20, 20);
+                ctx.strokeRect(10+20*k, 10+20*((i-1)*4+j), 20, 20);
             }
         }
         else {
+            ctx.fillStyle = color[nextbag[blockcount%7+i-7]];
             if(tetromino[nextbag[blockcount%7+i-7]][0][j][k]) {
                 ctx.fillRect(10+20*k, 10+20*((i-1)*4+j), 20, 20);
+                ctx.strokeRect(10+20*k, 10+20*((i-1)*4+j), 20, 20);
             }
         }
     }
 }
 
+function drawGhost() {
+    const ghost = {...block};
+    harddrop(board, ghost);
+    const canvas = document.getElementById("ghost");
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = color[ghost.mino];
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for(let i=0; i<4; i++) for(let j=0; j<4; j++) {
+        if(tetromino[ghost.mino][ghost.r][i][j]) ctx.fillRect(10+30*(ghost.x+j), 10+30*(ghost.y+i-20), 30, 30);
+    }
+}
+
 let gravity = 50;
 let gravcount = 0;
 let das = 10;
@@ -170,7 +196,7 @@ function frame() {
         moved.y++;
         if(!collide(board, moved)) block.y++;
         else {
-            block.fix();
+            fix();
             checkFilled();
         }
     }
@@ -229,9 +255,9 @@ function frame() {
     }
 
     if(isPressed["hd"] && !wasPressed["hd"]) {
-        block.harddrop();
+        harddrop(board, block);
         gravcount=0;
-        block.fix();
+        fix();
         checkFilled();
     }
 
@@ -245,6 +271,7 @@ window.onload = () => {
             if(isgameover) return;
             drawHold();
             drawBoard();
+            drawGhost();
             drawBlock();
             drawNext();
         }, 1000/60);

index.html

@@ -12,10 +12,12 @@
     <script src="./tetromino.js"></script>
     <script src="./game.js"></script>
     <script src="./kicktable.js"></script>
+    <script src="./color.js"></script>
 </head>
 <body>
     <canvas id="hold" width="100" height="100"></canvas>
     <canvas id="board" width="320" height="620"></canvas>
+    <canvas id="ghost" width="320" height="620"></canvas>
     <canvas id="block" width="320" height="620"></canvas>
     <canvas id="next" width="100" height="400"></canvas>
     <canvas id="keyview" width="430" height="190"></canvas>

style.css

@@ -10,6 +10,13 @@
     left: 120px;
 }
 
+#ghost {
+    position: absolute;
+    bottom: 20px;
+    left: 120px;
+    opacity: 0.4;
+}
+
 #block {
     position: absolute;
     bottom: 20px;
@@ -23,12 +30,12 @@
 
 #next {
     position: absolute;
-    bottom: 240px;
+    bottom: 220px;
     left: 440px;
 }
 
 #hold {
     position: absolute;
-    bottom: 540px;
+    bottom: 520px;
     left: 20px;
 }