Merge pull request #12 from teamdev-c/feature-render-canvas-and-defin…

…e-tetromino

feat: ボタン押下時にcanvas要素をレンダリング、テトロミノを定義

scripts/main.js

@@ -1,74 +1,129 @@
 "use strict";
 
-var shape = [
-  [0,0,1,1],
-  [0,0,0,1],
-  [0,0,0,1],
-  [0,0,0,0]
-]
+// board rendering config
+const H = 600;
+const W = 300;
 
-var currentShape = shape
+// block rendering config
+const ROWS = 20;
+const COLS = 10;
+const BLOCK_H = H / ROWS;
+const BLOCK_W = W / COLS;
+const shapes = [
+  [
+    [1, 1, 1, 1],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+  ],
+  [
+    [2, 2, 2, 0],
+    [2, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+  ],
+  [
+    [3, 3, 3, 0],
+    [0, 0, 3, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+  ],
+  [
+    [4, 4, 0, 0],
+    [4, 4, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+  ],
+  [
+    [5, 5, 0, 0],
+    [0, 5, 5, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+  ],
+  [
+    [0, 6, 6, 0],
+    [6, 6, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+  ],
+  [
+    [0, 7, 0, 0],
+    [7, 7, 7, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+  ],
+];
+const colors = ["cyan", "orange", "blue", "yellow", "red", "green", "purple"];
+
+const entrance = document.getElementById("js-entrance");
+const game = document.getElementById("js-game");
+const gameStartButton = document.getElementById("js-game-start-button");
 
+const canvas = document.createElement("canvas");
+canvas.width = W;
+canvas.height = H;
+canvas.classList.add("canvas");
+const ctx = canvas.getContext("2d");
 
+let board = [];
+const randomIndex = Math.floor(Math.random() * shapes.length);
+const currentShape = shapes[randomIndex];
 
-var H = 600, W = 300;
-var ROWS = 20, COLS = 10;
-var BLOCK_H = H / ROWS, BLOCK_W = W / COLS;
+gameStartButton.addEventListener("click", () => {
+  newGame();
+});
 
-var canvas = document.querySelector('canvas');
-var ctx = canvas.getContext('2d');
-var board = [];
+function prepareBoard() {
+  entrance.classList.add("hidden");
+  game.append(canvas);
 
-function init() {
-  for ( var y = 0; y < ROWS; ++y ) {
-    var a = [];
-    for ( var x = 0; x < COLS; ++x ) {
+  // clear board by filling 0
+  for (let y = 0; y < ROWS; y++) {
+    const a = [];
+    for (let x = 0; x < COLS; x++) {
       a.push(0);
     }
     board.push(a);
   }
 }
+function newGame() {
+  prepareBoard();
+  renderBoard();
+  let intervalId = setInterval(tick, 1000);
+}
 
-init()
-var currentX = 0, currentY = 0;
+let currentX = 0;
+let currentY = 0;
 
-function drawBlock( x, y ) {
-  ctx.fillRect( BLOCK_W * x, BLOCK_H * y, BLOCK_W - 1 , BLOCK_H - 1 );
-  ctx.strokeRect( BLOCK_W * x, BLOCK_H * y, BLOCK_W - 1 , BLOCK_H - 1 );
+function drawBlock(x, y) {
+  ctx.fillRect(BLOCK_W * x, BLOCK_H * y, BLOCK_W - 1, BLOCK_H - 1);
+  ctx.strokeRect(BLOCK_W * x, BLOCK_H * y, BLOCK_W - 1, BLOCK_H - 1);
 }
 
-ctx.strokeStyle = 'black';
-var colors = [
-  'cyan', 'orange', 'blue', 'yellow', 'red', 'green', 'purple'
-];
+function renderBoard() {
+  ctx.clearRect(0, 0, W, H);
 
-function render() {
-  ctx.clearRect( 0, 0, W, H );
-
-  ctx.strokeStyle = 'black';
-  for ( var y = 0; y < ROWS; ++y ) {
-      for ( var x = 0; x < COLS; ++x ) {
-          if ( board[ y ][ x ] ) {
-              ctx.fillStyle = colors[ board[ y ][ x ] - 1 ];
-              drawBlock( x, y );
-          }
+  ctx.strokeStyle = "black";
+  for (let y = 0; y < ROWS; y++) {
+    for (let x = 0; x < COLS; x++) {
+      if (board[y][x]) {
+        ctx.fillStyle = colors[board[y][x] - 1];
+        drawBlock(x, y);
       }
+    }
   }
 
-  for ( var y = 0; y < 4; ++y ) {
-    for (var x = 0; x < 4; ++x ) {
-      if ( currentShape[y][x] ) {
-        ctx.fillStyle = colors[ currentShape[ y ][ x ] - 1 ];
-        drawBlock( x + currentX, y + currentY );
+  for (let y = 0; y < 4; y++) {
+    for (let x = 0; x < 4; x++) {
+      if (currentShape[y][x]) {
+        ctx.fillStyle = colors[currentShape[y][x] - 1];
+        drawBlock(x + currentX, y + currentY);
       }
     }
   }
 }
 
 function tick() {
   currentY++;
-  console.log(currentY)
-  render();
+  renderBoard();
 }
-
-var interval = setInterval( tick, 1000 )

styles/style.css

@@ -6,6 +6,7 @@
   --bg-color-sub-2: #7b90d2;
   --font-color-main: #0c0c0c;
   --font-color-sub-1: #fcfcfc;
+  --border-color-main: #0c0c0c;
 }
 
 .layout {
@@ -98,5 +99,8 @@
 /* エントランス画面ここまで */
 
 /* ゲーム画面ここから */
-
+.canvas {
+  background-color: var(--bg-color-sub-1);
+  border: 4px solid var(--border-color-main);
+}
 /* ゲーム画面ここまで */