Added colors and some game code

script.js

@@ -18,15 +18,57 @@ const FONT_WIDTH = 0.6 * FONT;
 
 const COLOR_BORDER_THICK = '#000';
 const COLOR_BORDER_THIN = '#000';
+const COLOR_BORDER_LETTERS = '#fff';
 const COLOR_LETTERS = '#000';
 const COLOR_SQUARE_BLACK = '#000';
 const COLOR_SQUARE_WHITE = '#fff';
 const COLOR_PIECE_BLACK = '#000';
 const COLOR_PIECE_WHITE = '#fff';
 
-init();
-drawGameBoard();
-drawPieces();
+const game = {
+    pieces: [
+        {position: 'A1', color: 'black', isKing: false},
+        {position: 'A3', color: 'black', isKing: false},
+        {position: 'B2', color: 'black', isKing: false},
+        {position: 'C1', color: 'black', isKing: false},
+        {position: 'C3', color: 'black', isKing: false},
+        {position: 'D2', color: 'black', isKing: false},
+        {position: 'E1', color: 'black', isKing: false},
+        {position: 'E3', color: 'black', isKing: false},
+        {position: 'F2', color: 'black', isKing: false},
+        {position: 'G1', color: 'black', isKing: false},
+        {position: 'G3', color: 'black', isKing: false},
+        {position: 'H2', color: 'black', isKing: false},
+        {position: 'A7', color: 'white', isKing: false},
+        {position: 'B6', color: 'white', isKing: false},
+        {position: 'B8', color: 'white', isKing: false},
+        {position: 'C7', color: 'white', isKing: false},
+        {position: 'D6', color: 'white', isKing: false},
+        {position: 'D8', color: 'white', isKing: false},
+        {position: 'E7', color: 'white', isKing: false},
+        {position: 'F6', color: 'white', isKing: false},
+        {position: 'F8', color: 'white', isKing: false},
+        {position: 'G7', color: 'white', isKing: false},
+        {position: 'H6', color: 'white', isKing: false},
+        {position: 'H8', color: 'white', isKing: false}
+    ]
+};
+
+gameStart();
+
+// Game
+
+function gameStart() {
+    init();
+    gameUpdate();
+}
+
+function gameUpdate() {
+    drawGameBoard();
+    drawPieces();
+}
+
+// Graphics
 
 function init() {
     ctx = canvas.getContext('2d');
@@ -36,7 +78,8 @@ function drawGameBoard() {
     // Borders
     ctx.fillStyle = COLOR_BORDER_THICK;
     ctx.fillRect(0, 0, SIZE, SIZE);
-    ctx.clearRect(THICK_BORDER, THICK_BORDER, SIZE - 2*THICK_BORDER, SIZE - 2*THICK_BORDER);
+    ctx.fillStyle = COLOR_BORDER_LETTERS;
+    ctx.fillRect(THICK_BORDER, THICK_BORDER, SIZE - 2*THICK_BORDER, SIZE - 2*THICK_BORDER);
     ctx.fillStyle = COLOR_BORDER_THIN;
     ctx.strokeRect(BORDER, BORDER, SIZE - 2*BORDER, SIZE - 2*BORDER);
 
@@ -67,31 +110,9 @@ function drawGameBoard() {
 }
 
 function drawPieces() {
-    drawPiece('A1', 'black');
-    drawPiece('A3', 'black');
-    drawPiece('B2', 'black');
-    drawPiece('C1', 'black');
-    drawPiece('C3', 'black');
-    drawPiece('D2', 'black');
-    drawPiece('E1', 'black');
-    drawPiece('E3', 'black');
-    drawPiece('F2', 'black');
-    drawPiece('G1', 'black');
-    drawPiece('G3', 'black');
-    drawPiece('H2', 'black');
-
-    drawPiece('A8', 'white');
-    drawPiece('A6', 'white');
-    drawPiece('B7', 'white');
-    drawPiece('C8', 'white');
-    drawPiece('C6', 'white');
-    drawPiece('D7', 'white');
-    drawPiece('E8', 'white');
-    drawPiece('E6', 'white');
-    drawPiece('F7', 'white');
-    drawPiece('G8', 'white');
-    drawPiece('G6', 'white');
-    drawPiece('H7', 'white');
+    game.pieces.forEach(function (piece) {
+        drawPiece(piece.position, piece.color, piece.isKing);
+    });
 }
 
 function drawPiece(position, color, isKing) {