Update connect-four.js

connect-four.js

@@ -9,15 +9,11 @@ function start_game() {
     h3.remove()
     h1.remove();
     button.remove();
-
-    // game parameters
-    const DELAY_COMP = 0.5; // seconds for the computer to take its turn
-    const GRID_CIRCLE = 0.7; // circle size as a fraction of cell size
-    const GRID_COLS = 7; // number of game columns
-    const GRID_ROWS = 6; // number of game rows
-    const MARGIN = 0.02; // margin as a fraction of the shortest screen dimension
-
-    // colour variables
+    const DELAY_COMP = 0.5;
+    const GRID_CIRCLE = 0.7;
+    const GRID_COLS = 7;
+    const GRID_ROWS = 6;
+    const MARGIN = 0.02;
     const COLOR_BACKGROUND = "mintcream";
     const COLOR_COMP = "yellow";
     const COLOR_COMP_DRK = "olive";
@@ -28,14 +24,10 @@ function start_game() {
     const COLOR_TIE = "darkgrey";
     const COLOR_TIE_DRK = "black";
     const COLOR_WIN = "black";
-
-    // text variables
     const TEXT_COMP = "Computer";
     const TEXT_PLAY = "YOU";
     const TEXT_TIE = "DRAW";
     const TEXT_WIN = "WON!";
-
-    // cell class
     class Cell {
         constructor(left, top, w, h, row, col) {
             this.bot = top + h;
@@ -57,26 +49,14 @@ function start_game() {
         contains(x, y) {
             return x > this.left && x < this.right && y > this.top && y < this.bot;
         }
-
-        // draw the circle or hole
         draw(/** @type {CanvasRenderingContext2D} */ ctx) {
-
-            // owner colour
             let color = this.owner == null ? COLOR_BACKGROUND : this.owner ? COLOR_PLAY : COLOR_COMP;
-
-            // draw the circle
             ctx.fillStyle = color;
             ctx.beginPath();
             ctx.arc(this.cx, this.cy, this.r, 0, Math.PI * 2);
             ctx.fill();
-
-            // draw highlighting
             if (this.winner || this.highlight != null) {
-            
-                // colour
                 color = this.winner ? COLOR_WIN : this.highlight ? COLOR_PLAY : COLOR_COMP;
-
-                // draw a circle around the perimeter
                 ctx.lineWidth = this.r / 4;
                 ctx.strokeStyle = color;
                 ctx.beginPath();
@@ -85,80 +65,58 @@ function start_game() {
             }
         }
     }
-
-    // set up the canvas and context
     var canv = document.createElement("canvas");
     document.body.appendChild(canv);
     var ctx = canv.getContext("2d");
-
-    // game variables
     var gameOver, gameTied, grid = [], playersTurn, timeComp;
-
-    // dimensions
     var height, width, margin;
     setDimensions();
-
-    // event listeners
     canv.addEventListener("click", click);
     canv.addEventListener("mousemove", highlightGrid);
     window.addEventListener("resize", setDimensions);
-
-    // game loop
     var timeDelta, timeLast;
     requestAnimationFrame(loop);
 
     function loop(timeNow) {
-        // initialise timeLast
         if (!timeLast) {
             timeLast = timeNow;
         }
-
-        // calculate the time difference
         timeDelta = (timeNow - timeLast) / 1000; // seconds
         timeLast = timeNow;
 
-        // update
         goComputer(timeDelta);
 
-        // draw
         drawBackground();
         drawGrid();
         drawText();
 
-        // call the next frame
         requestAnimationFrame(loop);
     }
 
     function checkWin(row, col) {
-    
-        // get all the cells from each direction
+
         let diagL = [], diagR = [], horiz = [], vert = [];
         for (let i = 0; i < GRID_ROWS; i++) {
             for (let j = 0; j < GRID_COLS; j++) {
-            
-                // horizontal cells
+
                 if (i == row) {
                     horiz.push(grid[i][j]);
                 }
 
-                // vertical cells
                 if (j == col) {
                     vert.push(grid[i][j]);
                 }
 
-                // top left to bottom right
                 if (i - j == row - col) {
                     diagL.push(grid[i][j]);
                 }
 
-                // top right to bottom left
                 if (i + j == row + col) {
                     diagR.push(grid[i][j]);
                 }
             }
         }
 
-        // if any have four in a row, return a win!
         return connect4(diagL) || connect4(diagR) || connect4(horiz) || connect4(vert);
     }
 
@@ -167,29 +125,24 @@ function start_game() {
         let winningCells = [];
         for (let i = 0; i < cells.length; i++) {
 
-            // no owner, reset the count
             if (cells[i].owner == null) {
                 count = 0;
                 winningCells = [];
             }
 
-            // same owner, add to the count
             else if (cells[i].owner == lastOwner) {
                 count++;
                 winningCells.push(cells[i]);
             }
 
-            // new owner, new count
             else {
                 count = 1;
                 winningCells = [];
                 winningCells.push(cells[i]);
             }
 
-            // set the lastOwner
             lastOwner = cells[i].owner;
 
-            // four in a row is a win
             if (count == 4) {
                 for (let cell of winningCells) {
                     cell.winner = true;
@@ -217,24 +170,20 @@ function start_game() {
     function createGrid() {
         grid = [];
 
-        // set up cell size and margins
         let cell, marginX, marginY;
 
-        // portrait
         if ((width - margin * 2) * GRID_ROWS / GRID_COLS < height - margin * 2) {
             cell = (width - margin * 2) / GRID_COLS;
             marginX = margin;
             marginY = (height - cell * GRID_ROWS) / 2;
         }
 
-        // landscape
         else {
             cell = (height - margin * 2) / GRID_ROWS;
             marginX = (width - cell * GRID_COLS) / 2;
             marginY = margin;
         }
 
-        // populate the grid
         for (let i = 0; i < GRID_ROWS; i++) {
             grid[i] = [];
             for (let j = 0; j < GRID_COLS; j++) {
@@ -252,7 +201,6 @@ function start_game() {
 
     function drawGrid() {
 
-        // frame and butt
         let cell = grid[0][0];
         let fh = cell.h * GRID_ROWS;
         let fw = cell.w * GRID_COLS;
@@ -261,7 +209,6 @@ function start_game() {
         ctx.fillStyle = COLOR_FRAME_BUTT;
         ctx.fillRect(cell.left - margin / 2, cell.top + fh - margin / 2, fw + margin, margin);
 
-        // cells
         for (let row of grid) {
             for (let cell of row) {
                 cell.draw(ctx);
@@ -274,7 +221,6 @@ function start_game() {
             return;
         }
 
-        // set up text parameters
         let size = grid[0][0].h;
         ctx.fillStyle = gameTied ? COLOR_TIE : playersTurn ? COLOR_PLAY : COLOR_COMP;
         ctx.font = size + "px dejavu sans mono";
@@ -284,7 +230,6 @@ function start_game() {
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
 
-        // draw the text
         let offset = size * 0.55;
         let text = gameTied ? TEXT_TIE : playersTurn ? TEXT_PLAY : TEXT_COMP;
         if (gameTied) {
@@ -303,7 +248,6 @@ function start_game() {
             return;
         }
 
-        // count down till the computer makes its selection
         if (timeComp > 0) {
             timeComp -= delta;
             if (timeComp <= 0) {
@@ -312,74 +256,61 @@ function start_game() {
             return;
         }
 
-        // set up the options array
         let options = [];
-        options[0] = []; // computer wins
-        options[1] = []; // block the player from winning
-        options[2] = []; // no significance
-        options[3] = []; // give away a win
+        options[0] = [];
+        options[1] = [];
+        options[2] = [];
+        options[3] = [];
 
-        // loop through each column
         let cell;
         for (let i = 0; i < GRID_COLS; i++) {
             cell = highlightCell(grid[0][i].cx, grid[0][i].cy);
 
-            // column full, go to the next column
             if (cell == null) {
                 continue;
             }
 
-            // first priority, computer wins
             cell.owner = playersTurn;
             if (checkWin(cell.row, cell.col)) {
                 options[0].push(i);
             } else {
-        
-                // second priority, block the player
+
                 cell.owner = !playersTurn;
                 if (checkWin(cell.row, cell.col)) {
                     options[1].push(i);
                 } else {
                     cell.owner = playersTurn;
 
-                    // check the cell above
                     if (cell.row > 0) {
                         grid[cell.row - 1][cell.col].owner = !playersTurn;
 
-                        // last priority, let player win
                         if (checkWin(cell.row - 1, cell.col)) {
                             options[3].push(i);
                         }
 
-                        // third priority, no significance
                         else {
                             options[2].push(i);
                         }
 
-                        // deselect cell above
                         grid[cell.row - 1][cell.col].owner = null;
                     }
 
-                    // no row above, third priority, no significance
                     else {
                         options[2].push(i);
                     }
                 }
             }
 
-            // cancel highlight and selection
             cell.highlight = null;
             cell.owner = null;
         }
 
-        // clear the winning cells
         for (let row of grid) {
             for (let cell of row) {
                 cell.winner = false;
             }
         }
 
-        // randomly select a column in priority order
         let col;
         if (options[0].length > 0) {
             col = options[0][Math.floor(Math.random() * options[0].length)];
@@ -391,10 +322,8 @@ function start_game() {
             col = options[3][Math.floor(Math.random() * options[3].length)];
         }
 
-        // highlight the selected cell
         highlightCell(grid[0][col].cx, grid[0][col].cy);
 
-        // set the delay
         timeComp = DELAY_COMP;
     }
 
@@ -403,10 +332,8 @@ function start_game() {
         for (let row of grid) {
             for (let cell of row) {
 
-                // clear existing highlighting
                 cell.highlight = null;
 
-                // get the column
                 if (cell.contains(x, y)) {
                     col = cell.col;
                 }
@@ -417,7 +344,6 @@ function start_game() {
             return;
         }
 
-        // highlight the first unoccupied cell
         for (let i = GRID_ROWS - 1; i >= 0; i--) {
             if (grid[i][col].owner == null) {
                 grid[i][col].highlight = playersTurn;
@@ -457,12 +383,10 @@ function start_game() {
             }
         }
 
-    // don't allow selection if no highlighting
     if (!highlighting) {
         return;
     }
 
-        // check for a tied game
         if (!gameOver) {
             gameTied = true;
             OUTER: for (let row of grid) {
@@ -474,13 +398,11 @@ function start_game() {
                 }
             }
 
-            // set game over
             if (gameTied) {
                 gameOver = true;
             }
         }
 
-        // switch the player if no game over
         if (!gameOver) {
             playersTurn = !playersTurn;
         }
@@ -494,4 +416,4 @@ function start_game() {
         margin = MARGIN * Math.min(height, width);
         newGame();
     }
-}
+}