Conway's Game of Life 🎮 on JavaScript

#javascript #gamedev #programming #webdev

Hi, last night I was watching video on YouTube with title "Math Has a Fatal Flaw". I saw Conway's Game of Life there.

I think every programmer should write the game, but for 4 years of programming experience I have never written this 😔.

The Post about How did I write Conway's Game of Life on JavaScript.

Last night I thought that I cannot write this game and It was sad 😵‍💫 but I was able.

For start I define constants.

const START_NUMBERS_OF_CELL = 2000
const CELL_SIZE = 10

const LIFE_WIDTH = document.documentElement.offsetWidth
const LIFE_HEIGHT = document.documentElement.offsetHeight

const GAME_BOARD_BACKGROUND_COLOR = "#000000";

I am using the screen size of the user's device for the size of the game board. I defined START_NUMBERS_OF_CELL, CELL_SIZE and GAME_BOARD_BACKGROUND_COLOR too so I can to configuration my game.

Cell's Class

I am using ECMAScript classes in my JavaScript code and canvas for drawing game for users.

I wanna start for Cell's class because this class is very simple class.

In order to draw Cell on canvas I need canvas context and x and y coordinates

class Cell {
    //...

    constructor(ctx, x, y) {
        this.ctx = ctx

        this.x = x
        this.y = y
    }

    //...
}

I know that I should kill cell If cell has not 2 or 3 neighbors so I need draw and dead methods.

class Cell {
    //...

    get position() {
        return [
            this.x * CELL_SIZE,
            this.y * CELL_SIZE,
            CELL_SIZE,
            CELL_SIZE,
        ]
    }

    draw(color = "#ffffff") {
        this.ctx.fillStyle = color
        this.ctx.fillRect(...this.position)
    }

    dead() {
        this.ctx.fillStyle = GAME_BOARD_BACKGROUND_COLOR
        this.ctx.fillRect(...this.position)
    }

    //...
}

I defined neighbors variable like privet variable and did setter and getter methods for work with it.

class Cell {
    #neighbors = 0

    //...

    set neighbors(neighbors) {
        this.#neighbors = neighbors
    }

    get neighbors() {
        return this.#neighbors
    }
}

Life's Class

Let's start Life class.

In Life class' constructor I passed HTMLCanvasElement and define canvas context, draw background and define array of cell. I have array of arrays so that I filled this.cells a empty items.

class Life {
    constructor(canvas) {
        this.canvas = canvas

        this.canvasWidth = LIFE_WIDTH / CELL_SIZE
        this.canvasHeight = LIFE_HEIGHT / CELL_SIZE

        this.canvas.width = LIFE_WIDTH
        this.canvas.height = LIFE_HEIGHT

        this.ctx = this.canvas.getContext("2d")

        this.ctx.fillStyle = GAME_BOARD_BACKGROUND_COLOR
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

        this.cells = []

        for (let i = 0; i < this.canvasWidth; i++) {
            this.cells[i] = []

            for (let j = 0; j < this.canvasHeight; j++) {
                this.cells[i][j] = undefined
            }
        }

        //...
    }

    //...
}

After that I did cycle from 0 to our START_NUMBERS_OF_CELL constant so that I fill of cells the game board. I generate random random position for cells and check If the cell is not in this.cells I create new a cell and drawing it. After that I need run the game. I am using requestAnimationFrame.

class Life {
    constructor(canvas) {
        //...

        for (let i = 0; i < START_NUMBERS_OF_CELL; i++) {
            const cellXPosition = Math.floor(Math.random() * this.canvasWidth)
            const cellYPosition = Math.floor(Math.random() * this.canvasHeight)

            if (!this.cells[cellXPosition][cellYPosition]) {
                this.cells[cellXPosition][cellYPosition] = new Cell(this.ctx, cellXPosition, cellYPosition, false)

                this.cells[cellXPosition][cellYPosition].draw()
            }
        }

        this.deadWave = this.deadWave.bind(this)

        requestAnimationFrame(this.deadWave)
    }

    deadWave() {
        //...
    }
}

After initialization the game board I have left write rules of the game in deadWave method:

Any live cell with fewer than two live neighbours dies, as if by underpopulation.
Any live cell with two or three live neighbours lives on to the next generation.
Any live cell with more than three live neighbours dies, as if by overpopulation.
Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

In deadWave method I have cycle for check cell neighbor and boring new cells using rules and cycle for dead cells

Cycles start like that

//...

deadWave() {
    for (let i = 0; i < this.canvasWidth; i++) {
        for (let j = 0; j < this.canvasHeight; j++) {
            //...
        }
    }

    for (let i = 0; i < this.canvasWidth; i++) {
        for (let j = 0; j < this.canvasHeight; j++) {
            //...
        }
    }
}

//...

In first cycle in start of iteration I check that cell by i, j address is exist and if it is I set neighbor of cell is 0.

Next I check every neighbor cell (in total is 8) and If neighbor cell is exist I count it.

In the end of cycle I check that cell is exist and if it is I set count of neighbors to cell If cell is not exist I do boring of cell and set neighbor is 2 because next cycle If cell have not neighbor cell will be dead.

//...

deadWave() {
    for (let i = 0; i < this.canvasWidth; i++) {
        for (let j = 0; j < this.canvasHeight; j++) {
            if (this.cells[i][j]) {
                this.cells[i][j].neighbors = 0
            }

            let countAroundCells = 0

            //...

            if (this.cells[i][j]) {
                this.cells[i][j].neighbors = countAroundCells
            } else if (countAroundCells === 3) {
                this.cells[i][j] = new Cell(this.ctx, i, j)

                this.cells[i][j].draw(this.randomColor)
            }
        }
    }

    //...
}

//...

Next cycle if a cell is exist I check that the cell is newborn and if is it I set newborn false value. If the cell is not newborn I kill the cell.

//...

deadWave() {
    //...

    for (let i = 0; i < this.canvasWidth; i++) {
        for (let j = 0; j < this.canvasHeight; j++) {
            if (this.cells[i][j]) {
                if (this.cells[i][j].newborn) {
                    this.cells[i][j].newborn = false;
                } else if (this.cells[i][j].neighbors !== 2 && this.cells[i][j].neighbors !== 3) {
                    this.cells[i][j].dead()

                    this.cells[i][j] = undefined
                }
            }
        }
    }
}

//...