In this exercise you will work with existing, working code for which you are asked to implement an enhancement. The application is a JavaScript version of a classic simulation, called [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life).

From Wikipedia:

As illustrated in the picture below, the game is a two-dimensional grid where cells come alive and die, depending on certain rules. These rules as summarized in the Wikipedia article as follow:

1. Any live cell with two or three live neighbors survives.

2. Any dead cell with three live neighbors becomes a live cell.

3. All other live cells die in the next generation. Similarly, all other dead cells stay dead.

In the exercise code a new generation of cells replaces the previous one every 200ms. For each cell of the new generation life or death is determined by applying the above rules on the state of that same cell in the current generation.


| Methods | Description |

|----------|-------------|

| `constructor()` | Creates a two-dimensional array (i.e., an array of arrays) that represents a grid of cells that evolve over time. |

| `createCell()` | (`static` method) Creates a JavaScript object representing a cell with `x` (column number) and `y` (row number) properties and a boolean `aLive` property that is randomly initialized to `true` or `false`. |

| `forEachCell()` | Executes a callback function for each cell in the two-dimensional grid array, passing the cell as parameter to the callback. |

| `drawCell()` | Takes a cell object as a parameter and draws the cell on the canvas. The visual representation depends on whether the cell is alive or dead. |

| `isAlive()` | Determines whether a cell at the given coordinates is alive or dead. The coordinates could potentially be off-grid. Off-grid cells are presumed dead. The function returns one if the given cell is alive or zero if its dead. |

| `countLivingNeighbors()` | Counts the number of living neighbors for a given cell. Each cell has eight neighbors, some of which may be off-grid if the cell is located at an edge or a corner of the grid. |

| `updateGrid()` | Iterates through all cells of the grid and computes the new state of each cell by applying the rules of the Game Of Life. |

| `renderGrid()` | Iterates through all cells of the grid and draws each cell onto the canvas. |

| `gameLoop()` | Executes one life cycle of the game (i.e., `updateGrid()` followed by `renderGrid()`) and then reschedules itself to run again after a delay. |

| `start()` | The `start()` function creates the initial grid, renders it to the web page by calling `renderGrid()` and calls `gameLoop()` to kickstart the game. |

The `main()` function gets a reference to the `canvas` element hard-coded in the `index.html` file and resizes the canvas to the desired size. It then instantiates a GameOfLife object and starts the game engine. The function `main()` itself is executed when the browser has finished loading the page.

The diagram below visualizes the overall call hierarchy of the various functions. The `main()` function calls `createGame()`, which in turn creates a closure enclosing the `grid` array and a couple of functions that operate on that `grid`. Then, `main()` calls the `start()` function to start the game.

The `start()` method creates the initial grid, renders it to the web page by calling `renderGrid()` and calls `gameLoop()` to kickstart the game.

The `gameLoop()` method calls `updateGrid()` to update (each cell of) the grid according to the game rules (see above) and the calls `renderGrid()` to render the updated grid to the web page. It then schedules a call to itself using `setTimeout()`. This causes the game to keep evolving the grid according to the game rules every 200ms until the page is closed.

Note: The use of [`window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is not essential for the functioning of the game but helps to avoid screen flicker.


In the supplied JavaScript code (file: `index.js`) the color of all living cells is a single shade of blue. This is in contrast to the illustration above where living cells have different shades of blue, depending on their life time. Your job is as follows:

1. In function `createCell()`, add a numeric `lifeTime` property to the object and assign it the value of one if the cell is initially alive or zero if it is initially dead.

2. In function `drawCell()`, replace [`rgb()`](<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb()>) with [`rgba()`](<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgba()>) that adds a fourth parameter indicating `opacity` to the `rgb` value like this:

```js

context.fillStyle = `rgba(24, 215, 236, ${opacity})`;

```

The `opacity` of each rendered cell should depend on the cell's `lifeTime` property, as specified in this table:

| lifeTime | opacity |

| :------: | :-----: |

| 1 | 0.25 |

| 2 | 0.5 |

| 3 | 0.75 |

| 4+ | 1 |

3. In function `updateGrid()` add code to update the `lifeTime` value of each cell:

- A living cell that remains living should have its `lifeTime` incremented by one.

- A living cell that dies should have its `lifeTime` reset to zero.

- A dead cell that is brought to life should have its `lifeTime` reset to one.

Here is a visual check that you can use to verify that the life time enhancement is correctly implemented. Most of the time, if you wait long enough, the game will "stabilize" to "still life" and "oscillator" patterns, as shown in the GIF below (see the Wikipedia article for more information about the Game Of Life patterns).


- Cells in a still life pattern remain living indefinitely and should therefore stabilize at the highest opacity.

- The oscillating parts of an oscillator pattern continually switch between life and death and, when briefly living, should have the lowest opacity. The stable parts should be at the highest opacity.

_Have fun!_

const CELL_SIZE = 10;

const NUM_COLUMNS = 75;

const NUM_ROWS = 40;

function createCell(x, y) {

const alive = Math.random() > 0.5;

return {

x,

y,

alive,

};

export function createGame(context, numRows, numColumns) {

/** @type {GridRow[]} */

const grid = [];

// Create the grid as a two-dimensional array (i.e. an array of arrays)

function createGrid() {

for (let y = 0; y < numRows; y++) {

/** @type {GridRow} */

const row = [];

for (let x = 0; x < numColumns; x++) {

const cell = createCell(x, y);

row.push(cell);

}

grid.push(row);

}

}

/**

function forEachCell(callback) {

grid.forEach((row) => {

row.forEach((cell) => callback(cell));

});

}

/**

function drawCell(cell) {

// Draw cell background

context.fillStyle = '#303030';

context.fillRect(

cell.x * CELL_SIZE,

cell.y * CELL_SIZE,

CELL_SIZE,

CELL_SIZE

);

if (cell.alive) {

// Draw living cell inside background

context.fillStyle = `rgb(24, 215, 236)`;

context.fillRect(

cell.x * CELL_SIZE + 1,

cell.y * CELL_SIZE + 1,

CELL_SIZE - 2,

CELL_SIZE - 2

);

}

}

/**

function isAlive(x, y) {

// Out-of-border cells are presumed dead

if (x < 0 || x >= numColumns || y < 0 || y >= numRows) {

return 0;

}

return grid[y][x].alive ? 1 : 0;

}

/**

function countLivingNeighbors(cell) {

const { x, y } = cell;

return (

isAlive(x - 1, y - 1) +

isAlive(x, y - 1) +

isAlive(x + 1, y - 1) +

isAlive(x - 1, y) +

isAlive(x + 1, y) +

isAlive(x - 1, y + 1) +

isAlive(x, y + 1) +

isAlive(x + 1, y + 1)

);

}

/**

function updateGrid() {

// Loop over all cells to determine their next state.

forEachCell((cell) => {

// Count number of living neighboring cells

const numAlive = countLivingNeighbors(cell);

if (numAlive === 2) {

// Living cell remains living, dead cell remains dead

cell.nextAlive = cell.alive;

} else if (numAlive === 3) {

// Dead cell becomes living, living cell remains living

cell.nextAlive = true;

} else {

// Living cell dies, dead cell remains dead

cell.nextAlive = false;

}

});

// Apply the newly computed state to the cells

forEachCell((cell) => {

cell.alive = cell.nextAlive ?? false;

});

}

//

/**

function renderGrid() {

// Draw all cells in the grid

forEachCell(drawCell);

}

/**

function gameLoop() {

// Update the state of cells in the grid

updateGrid();

// Render the updated grid

renderGrid();

// Schedule the next generation

setTimeout(() => {

window.requestAnimationFrame(gameLoop);

}, 200);

}

/**

function start() {

// Create initial grid

createGrid();

// Render the initial generation

renderGrid();

// Kick-start the gameLoop

window.requestAnimationFrame(gameLoop);

}

return { grid, updateGrid, start };

function main() {

// Resize the canvas to accommodate the desired number of cell rows and

// columns

const canvas = document.getElementById('canvas');

if (!(canvas instanceof HTMLCanvasElement)) {

throw new Error('Canvas element not found');

}

canvas.height = NUM_ROWS * CELL_SIZE;

canvas.width = NUM_COLUMNS * CELL_SIZE;

// Obtain a context that is needed to draw on the canvas

const context = canvas.getContext('2d');

if (!(context instanceof CanvasRenderingContext2D)) {

throw new Error('Context not found');

}

// Create the game "engine"

const { start } = createGame(context, NUM_ROWS, NUM_COLUMNS);

// Start the game

start();

try {

window.addEventListener('load', main);

} catch {

// ignore if running in node with jest

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Game of Life</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link href="./style.css" rel="stylesheet" />

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"

integrity="sha512-Oy18vBnbSJkXTndr2n6lDMO5NN31UljR8e/ICzVPrGpSud4Gkckb8yUpqhKuUNoE+o9gAb4O/rAxxw1ojyUVzg=="

crossorigin="anonymous"

/>

</head>

<body>

<article class="markdown-body">

<h1>Conway's Game of Life</h1>

<canvas id="canvas">

Your browser does not support the HTML5 canvas tag.

</canvas>

<h3>

Adapted from:

<a

href="https://spicyyoghurt.com/tutorials/javascript/conways-game-of-life-canvas"

>SPICY YOGHURT - Create Conway's Game of Life in JavaScript

</a>

</h3>

<h3>

See also:

<a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life"

>Wikipedia - Conway's Game of Life</a

>

</h3>

<script src="index.js" type="module"></script>

</article>

</body>