DEV Community: Murilo Oliveira

How to create an awesome Github README

Murilo Oliveira — Tue, 14 Dec 2021 16:30:12 +0000

Versão em PT-BR aqui.

Introduction

Github is the most popular service used by developers in the world, or following the company slogan "Where the world builds software".

But, in addition to all the features, you can also, Github can be considered a developer's social network and just like all networks, its interessting you have a good profile in your main page.

So, you can create a "profile readme", a file with the same name that your @, it's fully custom and you can use Markdown and HTML to do this.

Today I'll show you hot to write a cool personal readme file for your profile, with a lot of integrations and features, like this.

OBS.: There is a lot of ways to do this, I'll just explain some of them today, but I'll let some usefull links to others options.

Let's Start

To active this resource, you just need to create a repository with the same name of your @ and create a READE.md file inside:

Now, you can open the file to start to put your readme code. If you never worked with Markdown files, you can follow this guide here.

There are a lot of models to your README, I'll let some examples bellow to get you inspired:

Awesome GitHub Profile README

Awesome GitHub Profile README Template Collection

Badges

You can add Badges in your profile to represent your social medias, your technologies of interest, your tools, etc.

The best website to get or generate a custom badge is Shields.io.

Also, there are two others very cool repositories with a copy and paste system, to you get your badges:

Markdown Badges by Ileriayo Adebiyi

Badges by Aleen

You can also add your tecnologies as a simple image, following this repo:

Tech-Icons by Workshape.io

All of the ways will generate a line of code that you can copy and paste in your README.

Stats

Another cool feature to you add on your profile, is your statistics (numbers of commits, techs more used, pull requests, etc).

Just like the badges, you just need to put a line of code inside your file, following the repository tutorial:

GitHub Readme Stats by Anurag Hazra

Waka Readme Stats by Anmol Pratap Singh - It is necessary to create an account

Integrations

In addition to "decorations" and styles, you can also integrate other services in your profile, I'll leave the most common and popular ones below:

Discord - Discord Banner - you will need to access your discord profile, activate developer mode, and redeem your API Key to make this integration.

Spotify - Spotify Github Profile - just click the Connect with Spotify button and enable the integration.

DEV.to - Latest Post

Images

You can add images and animations on your profile too, this can be do using the native Markdown resource (just create a folder to upload the images and reference them). But there are some cool alternatives too:

Readme Typing SVG

README Header Image Generator

Ok, now you can create an awesome Github Readem Profile, please share the link in comments if you want.

I hope you enjoyed it, see you. ✌️

Como criar um README para o seu perfil do Github

Murilo Oliveira — Tue, 14 Dec 2021 15:21:30 +0000

English version here.

Introdução

O Github é um dos serviços mais utilizados por desenvolvedores em todo o mundo, ou como o próprio slogan diz "Onde o mundo constrói seus softwares".

Porém, além de todas as funcionalidades que você já deve conhecer, o Github pode também ser considerado uma rede social para desenvolvedores e, como toda rede social, é interessante ter um bom perfil inicial, para que as pessoas possam te conhecer melhor logo no primeiro acesso.

Para isso, seu perfil pode possuir um "profile readme", um arquivo com o seu nome que será exibido em sua página inicial, ele é totalmente customizável, visto que é um arquivo Markdown que suporta tags HTML e outros recursos.

Hoje vou mostrar a vocês como podemos criar um README bem legal com diversas integrações e funcionalidades, assim como o meu.

OBS.: Existem inúmeros recursos que podem ser adicionados ao seu README, irei explicar apenas alguns que utilizo ou utilizei, mas deixarei links para todos os outros.

Mão na Massa

Para ativar esse recurso em seu perfil, basta criar um repositório com o mesmo nome do seu perfil (seu @ no caso), e criar um arquivo README.md dentro dele, dessa forma:

Feito isso, abra o arquivo que criou, no editor do Github mesmo, e começaremos a editar. Caso não tenha experiência em arquivos Markdown, pode acessar a esse guia da linguagem e acompanhar por ele, é bem tranquilo.

Existem milhares de modelos e maneiras de criar seu README, deixarei abaixo alguns repositórios com ideias que podem te inspirar:

Awesome GitHub Profile README

Awesome GitHub Profile README Template Collection

Alguns são bem simples e objetivos, outros são mais completos e cheios de recursos, veremos alguns deles a seguir.

Badges

Você pode adicionar Badges ao seu perfil, para representar suas redes sociais, tecnologias que domina ou está aprendendo, projetos e estados de projetos e diversas outras coisas.

O melhor site para gerar e adicionar essas badges, é o Shields.io. Nele você pode criar e editar suas próprias badges, ou selecionar alguma já pronta.

Existe também 2 repositórios muito interessantes, com badges prontas e em um sistema de copia e cola:

Markdown Badges do Ileriayo Adebiyi

Badges do Aleen

Você também pode adicionar suas tecnologias e ferramentas de interesse/domínio como simples imagens, para isso existem os repositórios:

Tech-Icons da Workshape.io

Todas as opções vão gerar uma linha de código, basta inserir no seu arquivo README.

Stats

Outra opção legal de adicionar em seu perfil, são as estatísticas de linguagens utilizadas, número de commits, repositórios, pull requests e afins.

Assim como as badges, basta adicionar um linha de código em seu perfil README, seguindo os repositórios abaixo e adicionando seu @, para que suas estatísticas sejam geradas:

GitHub Readme Stats do Anurag Hazra

Waka Readme Stats do Anmol Pratap Singh - Necessário criar uma conta

Integrações

Além de "decorações" e estilos, você também pode integrar outros serviços em seu perfil, deixarei abaixo os mais comuns e populares:

Discord - Discord Banner - você precisará acessar seu perfil no discord, ativar o modo desenvolvedor e resgatar sua API Key, para fazer essa integração.

Spotify - Spotify Github Profile - basta clicar no botão Connect with Spotify e permitir a integração.

DEV.to - Latest Post

Imagens

Você também pode utilizar imagens e animações em seu perfil, isso pode ser feito utilizando o recurso nativo de imagens do Markdown (basta criar uma basta no seu repositório, adicionar as imagens e referenciar elas). Mas também existem alternativas bem legais para isso:

Readme Typing SVG

README Header Image Generator

Pronto, com isso você conseguirá montar um readme show, fique a vontade de compartilhar seu perfil nos comentários.

Espero que tenham gostado, até mais. ✌️

Learning HTML, CSS and Javascript Vanilla - Reproducing the John Conway's Game of Life

Murilo Oliveira — Fri, 03 Dec 2021 14:29:32 +0000

Versão PT-BR aqui.

Introduction:

Hi there, are you looking for cool projects to improve your Javascript, CSS and HTML skills?

In this tutorial I will teach how you can do your own version of the Game of Life, a game idea developed by the british mathematic John Conway.

This game is a part of an tag called “cellular automata”,which according to wikipedia mean: "simpler temporal evolution models capable of exhibiting complicated behavior"

But don't worry about this complex explanation, we're basically going to make a game without players, almost like it's alive.

This is the final result, a field populated by blocks that change their state based on predefined rules.

This is my Github repository below, to help you:

https://github.com/akadot/game-of-life

Okay, let's do it.

Construction:

To build this project, we will use a powerfull HTML resource called Canvas API, which allows shapes 2D or 3D forms using only Vanilla Javascript. But don't worry about this, everything is very simple, the Canvas API is a native HTML tag.

The first step is create the three files that we will use, starting by the HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Jogin da Vida</title>
  </head>
  <body>
    <canvas id="board"></canvas>

    <script src="game.js"></script>
  </body>
</html>

We will just use a <canvas> tag, with an idreference to use in our JS file.

Now we'll create a simple CSS file:

* {
  padding: 0;
  margin: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000000;
}

#board {
  border: 5px solid #5c3ec9;
  border-radius: 5px;
  background-color: #f8f8f2;
  box-shadow: 0px 0px 10px #5c3ec9;
}

Done, now we can open on our browser and...

Okay, I know, it's just an empty board, but I promise it will be very cool.

Now we need to set the Canvas properties, there are a lot of ways to do this, but I prefer to do everything inside the Javascript file.

Logic:

Let's really get your hands on the code. First we need to reference the <canvas> tag id in our JS file, to define what context we will work (2D or 3D):

const canvas = document.querySelector("#board");
const ctx = canvas.getContext("2d"); 
//ctx define o contexto do nosso canvas, no caso será 2D

Then, we set some constants that will help us along the code:

const GRID_WIDTH = 500;             
const GRID_HEIGHT = 500;       
const RES = 5;                     
const COL = GRID_WIDTH / RES;    
const ROW = GRID_HEIGHT / RES;

Now, we can use this constants to define the canvas height and width:

canvas.width = GRID_WIDTH;
canvas.height = GRID_HEIGHT;

Done, now I promisse we will can see something. But to get sure, let's put an addEventListener() around the code, to wait our HTML content load before code runs:

document.addEventListener("DOMContentLoaded", () => {
  const canvas = document.querySelector("#board");
  const ctx = canvas.getContext("2d");

  const GRID_WIDTH = 500;
  const GRID_HEIGHT = 500;
  const RES = 5;
  const COL = GRID_WIDTH / RES;
  const ROW = GRID_HEIGHT / RES;

  canvas.width = GRID_WIDTH;
  canvas.height = GRID_HEIGHT;
}

The next step is draw our blocks. They will be simples squares inside an 2D array, like a cell inside a Excel grid or an Google Sheets file.

We will create a function called createGrid(), that will receive the numbers of rows and columns. Then, the function will return a new empty array with the length equal the number of the columns and, for each position insite this array, it will be created a new array with the same number of the rows but filled filled with 0 or 1 randomly:

function createGrid(cols, rows) {
    return new Array(cols)
      .fill(null)
      .map(() => new Array(rows)
                 .fill(null)
                 .map(() => Math.round(Math.random())));
}

let grid = createGrid(COL, ROW); //we will keep the array inside a variable "grid"

We can start to draw our blocks now, based on the cell values, where the numbers 1 will be filled and the numbers 0 will be blanked:

To do it, we need a new function called drawGrid(), that will receive our grid, our rows and columns and our block resolution/size:

function drawGrid(grid, cols, rows, reslution) {
    ctx.clearRect(0, 0, cols, rows);
    for (let i = 0; i < cols; i++) {
      for (let j = 0; j < rows; j++) {
        const cell = grid[i][j];
        ctx.fillStyle = cell ? "#5c3ec9" : "#f8f8f2";
        ctx.fillRect(i * reslution, j * reslution, reslution, reslution);
      }
    }
  }
});

As you can see, to paint the cells fisrt we need to run the Canvas API native function clearRect(), that will clear our board before everything. It's receive on two first parameters the initial coordinates to start the cleaning, and on the last two parameters, we need to set the full size of our board, where the function will stop the cleaning.

Once that's done, let's do two repeat loops, to go through our entire array. For each loop, we will keep the current cell inside a constant called cell and, with a ternary if, we will check if the cell has a 0 or an 1.

If the cell's value is 1, we will apply a color #5c3ec9, using another Canvas API native property called fillStyle, else we just apply the same color of our background (remeber, in JS the value 1 means true/existing, and the value 0 means false/nonexistent).

On the next line, another native tag, but this time we will usa the function fillRect(), that will draw our square following 4 parameters:

First: the X coordinate where the square inits (in this case, we will put our resolution * the current array position);
Second: the Y coordinate where the square inits (in this case, we will put our resolution * the current array position again);
Third: the square width (our resolution);
Fourth: the square heigth (our resolution again).

Now we can draw our squares inside the canvas:

drawGrid(grid, COL, ROW, RES);

Explaining the Game Rules

Before we proceed, we need to understand the rules proposed by John Conway, so that the game is actually "self-playing".

There are four simple rules to do this, that defines if a cell is alive (our purple/1 cells), or dead (our black/0 cells). The rules are:

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

Following this rules, let's create our function to do this. It's will go through our entire array, apply the rules and generate a new array to be drawn by the drawGrid() function.

At each repetition of this cycle, we will consider that the new array is a new generation of cells that inherit the last generation conditions.

This function will be called nexGen() and, as a first step we will keep the last geeration in a constant.

function nextGen(grid) {
    const nextGen = grid.map((arr) => [...arr]);

In case you don't already know, in the [...arr] excerpt we use the SPREAD operator, which was added to Javascript from version 6 and is intended to store a greater number of information at once, widely used with arrays and objects. You can also use the .push() or .slice() functions instead of the spread operator, there's no problem with that.

The next step is to start the loops, that will go through the array to apply the game rules. As we did above, we need to run through all the lines, using grid.length and then all the columns, using grid[col].length (the col parameter is just the name I gave the for control variable, but you can use the letters i and j as usual).

We'll take the opportunity to capture the initial cell in a constant and create a variable to count the number of living neighbor cells.

 for (let col = 0; col < grid.length; col++) {
      for (let row = 0; row < grid[col].length; row++) {
        const currentCell = grid[col][row];
        let sumNeighbors = 0;

The next step is, for each cell, to go through all its 8 neighbors and check whether they are alive or not.It might seem a little difficult to understand the code at first glance, but here's an explanation with screenshot:

Yes, I used Google Sheets for that, but the important thing is that our next loop will iterate through the values between -1 and 1, finding the number of live neighbors.

for (let i = -1; i < 2; i++) {
 for (let j = -1; j < 2; j++) {
   if (i === 0 && j === 0) {
     continue; 
   }

We put the condition if (i === 0 && j === 0), because this is the position of the current cell, which we don't want to add to the number of neighbors.

The next section will deal with the "corners" of our field. Think about it like this, if a cell is pasted on the left side of our canvas, we won't be able to access the neighbors that are in a column before it, that is, the leftmost one, as they don't exist. So, we're going to add values to the sumNeighbors variable only if its coordinates are within the bounds of the canvas.

const x = col + i
const y = row + j;

if (x >= 0 && y >= 0 && x < COL && y < ROW) {
    const currentNeighbor = grid[col + i][row + j];
    sumNeighbors += currentNeighbor;

Once the conditions are satisfied, the sumNeighbors variable will receive its previous value, plus the value of the live cells, remembering that the dead cells here receive the value zero, which does not impact the sum.

Once that's done, we can apply the rules described by John Conway with a simple if/else:

if (currentCell === 0 && sumNeighbors === 3) {
   nextGen[col][row] = 1;
} else if (currentCell === 1 && (sumNeighbors < 2 || sumNeighbors > 3)){
    nextGen[col][row] = 0;
}

Explaining, the first condition tests if the current cell is empty and if it has 3 neighbors, if it is true the next generation will receive in that same position the value 1 or alive.

The second condition gathers the other rules into one, testing whether the current cell is live and;if there are less than two neighbors next generation will receive zero, if there are more than 3 neighbors the next generation will also receive zero.

Finally, just return the next generation return nextGen;, and the function will look like this:


  function nextGen(grid) {
    const nextGen = grid.map((arr) => [...arr]); //make a copy of grid with spread operator

    for (let col = 0; col < grid.length; col++) {
      for (let row = 0; row < grid[col].length; row++) {
        const currentCell = grid[col][row];
        let sumNeighbors = 0; //to verify the total of neighbors

        //Verifying the 8 neigbours of current cell
        for (let i = -1; i < 2; i++) {
          for (let j = -1; j < 2; j++) {
            if (i === 0 && j === 0) {
              continue; // because this is the current cell's position
            }

            const x = col + i;
            const y = row + j;

            if (x >= 0 && y >= 0 && x < COL && y < ROW) {
              const currentNeighbor = grid[col + i][row + j];
              sumNeighbors += currentNeighbor;
            }
          }
        }

        //Aplying rules
        if (currentCell === 0 && sumNeighbors === 3) {
          nextGen[col][row] = 1;
        } else if (
          currentCell === 1 &&
          (sumNeighbors < 2 || sumNeighbors > 3)
        ) {
          nextGen[col][row] = 0;
        }
      }
    }
    return nextGen;
  }

By doing this, we are almost close to finishing our project, the next step is very simple, we will create a function called update() to execute all the created functions in order, and we will use the requestAnimationFrame() function, native Javascript, to repeat the looping process in the browser.

requestAnimationFrame(update);

function update() {
  grid = nextGen(grid);
  drawGrid(grid, COL, ROW, RES);
  requestAnimationFrame(update); //running again to repeat the loop
}

Okay, now everything is ready and your file should have looked like this:

document.addEventListener("DOMContentLoaded", () => {
  const canvas = document.querySelector("#board");
  const ctx = canvas.getContext("2d");

  const GRID_WIDTH = 500;
  const GRID_HEIGHT = 500;
  const RES = 5;
  const COL = GRID_WIDTH / RES;
  const ROW = GRID_HEIGHT / RES;

  canvas.width = GRID_WIDTH;
  canvas.height = GRID_HEIGHT;

  //Making a grid and filling with 0 or 1
  function createGrid(cols, rows) {
    return new Array(cols)
      .fill(null)
      .map(() =>
        new Array(rows).fill(null).map(() => Math.round(Math.random()))
      );
  }

  let grid = createGrid(COL, ROW);

  requestAnimationFrame(update);
  function update() {
    grid = nextGen(grid);
    drawGrid(grid, COL, ROW, RES);
    requestAnimationFrame(update);
  }

  //Generate nex generation
  function nextGen(grid) {
    const nextGen = grid.map((arr) => [...arr]); //make a copy of grid with spread operator

    for (let col = 0; col < grid.length; col++) {
      for (let row = 0; row < grid[col].length; row++) {
        const currentCell = grid[col][row];
        let sumNeighbors = 0; //to verify the total of neighbors

        //Verifying the 8 neigbours of current cell
        for (let i = -1; i < 2; i++) {
          for (let j = -1; j < 2; j++) {
            if (i === 0 && j === 0) {
              continue; // because this is the current cell's position
            }

            const x = col + i;
            const y = row + j;

            if (x >= 0 && y >= 0 && x < COL && y < ROW) {
              const currentNeighbor = grid[col + i][row + j];
              sumNeighbors += currentNeighbor;
            }
          }
        }

        //Aplying rules
        if (currentCell === 0 && sumNeighbors === 3) {
          nextGen[col][row] = 1;
        } else if (
          currentCell === 1 &&
          (sumNeighbors < 2 || sumNeighbors > 3)
        ) {
          nextGen[col][row] = 0;
        }
      }
    }
    return nextGen;
  }

  //Draw cells on canvas
  function drawGrid(grid, cols, rows, reslution) {
    ctx.clearRect(0, 0, cols, rows);
    for (let i = 0; i < cols; i++) {
      for (let j = 0; j < rows; j++) {
        const cell = grid[i][j];
        ctx.fillStyle = cell ? "#5c3ec9" : "#f8f8f2";
        ctx.fillRect(i * reslution, j * reslution, reslution, reslution);
      }
    }
  }
});

Now just run the HTML file to see this (or something better in your case, as I had some problems recording my screen):

Final Considerations

Although it doesn't seem like a big deal, this project is very interesting to train the basic knowledge of HTML, CSS and JS, mainly in the manipulation of arrays.In case you're interested, I'll leave some links to larger projects that used the same concepts as this game.

Creating the Game of Life in Excel - https://github.com/asgunzi/JogodaVidaExcel

The Video that inspired me, from the youtube channel O Programador (PT/BR) - https://youtu.be/qTwqL69PK_Y

I hope you enjoyed it and that you were able to learn something cool, always remember what Bob Ross said: "as long as you are learning, you are not failing".

Just keep going, however slowly.

See you. ✌️

Praticando HTML, CSS e Javascript Vanilla - Reproduzindo o Jogo da Vida de John Conway

Murilo Oliveira — Thu, 02 Dec 2021 18:27:16 +0000

English version here.

Introdução:

E ae, se você está procurando projetos legais para praticar seus conhecimentos em Javascript, CSS e HTML, neste tutorial eu vou te ensinar (ou tentar) como reproduzir sua própria versão do Jogo da Vida, do matemático britânico John Conway.

Caso você nunca tenha ouvido falar desse jogo, ele faz parte de uma categoria chamada “autómatos celulares”, que de acordo com a nossa querida Wikipédia: “são os modelos de evolução temporal mais simples com capacidade para exibir comportamento complicado”.

Mas não se preocupe com essas definições complicadas, basicamente o que vamos construir é um jogo que não precisa de jogador, que “se joga sozinho”, quase como se você criasse algo vivo e observasse sua evolução (daí o nome).

O resultado final consiste em um campo preenchido aleatoriamente por quadrados iguais que, ao decorrer do tempo e seguindo algumas regras de sobrevivência, podem gerar estruturas fascinantes e imprevisíveis, como a figura abaixo.

Ok, sem mais enrolação, bora fazer essa bagaça. Deixarei abaixo o link do meu repositório com o projeto finalizado:

https://github.com/akadot/game-of-life

Construção:

Para construir esse projeto, usaremos um recurso bastante poderoso do HTML chamado Canvas API, que permite desenhar formas 2D e até 3D utilizando somente Javascript puro. Mas não se assuste, não precisaremos configurar nada e nem elaborar modelos matemáticos de álgebra linear complexos, o Canvas API é uma simples tag nativa do HTML e esse projeto vai depender puramente de lógica.

O primeiro passo é preparar os três arquivos que iremos utilizar, começando pela estrutura do HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Jogin da Vida</title>
  </head>
  <body>
    <canvas id="board"></canvas>

    <script src="game.js"></script>
  </body>
</html>

Como pode ver, usaremos apenas uma tag <canvas> com um id de referência para o JS.

Em seguida, podemos preparar o arquivo CSS, aqui vai da criatividade de cada um:

* {
  padding: 0;
  margin: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000000;
}

#board {
  border: 5px solid #5c3ec9;
  border-radius: 5px;
  background-color: #f8f8f2;
  box-shadow: 0px 0px 10px #5c3ec9;
}

Pronto, agora é só abrir o arquivo HTML em seu navegador e...

Eu sei, parece só um quadrado comum, mas eu prometo que vao se tornar algo legal. Para isso devemos começar a definir as propriedades e funcionalidades desse Canvas.
Existem várias maneiras de definir as propriedades de um Canva, porém optaremos por fazer tudo no nosso arquivo Javascript. É o que iremos fazer a seguir.

Implementando a Lógica:

Hora de construir de fato as coisas. O primeiro passo é referenciar a tag <canva> no nosso arquivo de Javascript e, logo depois, informar se queremos trabalhar com o canva 2D ou 3D (no nosso caso é o 2D):

const canvas = document.querySelector("#board");
const ctx = canvas.getContext("2d"); 
//ctx define o contexto do nosso canvas, no caso será 2D

Em seguida, definiremos algumas constantes que nos ajudarão no decorrer do código, como altura, largura e a resolução dos blocos:

const GRID_WIDTH = 500;             //largura do campo
const GRID_HEIGHT = 500;           //altura do campo
const RES = 5;                    //tamanho dos lados dos quadrados
const COL = GRID_WIDTH / RES;    //quantidade de colunas
const ROW = GRID_HEIGHT / RES;  //quantidade de linhas

Feito isso, vamos utilizar essas constantes para definir as informações do canvas:

canvas.width = GRID_WIDTH;
canvas.height = GRID_HEIGHT;

Pronto, agora eu prometo que vamos conseguir visualizar algo no navegador, mas para ter certeza que tudo carregará corretamente, colocarei nosso código dentro de um evento, que só irá disparar quando todo o HTML estiver carregado. Assim não precisaremos nos preocupar caso o código inicie antes das criação do canvas:

document.addEventListener("DOMContentLoaded", () => {
  const canvas = document.querySelector("#board");
  const ctx = canvas.getContext("2d");

  const GRID_WIDTH = 500;
  const GRID_HEIGHT = 500;
  const RES = 5;
  const COL = GRID_WIDTH / RES;
  const ROW = GRID_HEIGHT / RES;

  canvas.width = GRID_WIDTH;
  canvas.height = GRID_HEIGHT;
}

O próximo passo é desenhar nossos blocos dentro do nosso campo. Para isso, criaremos um array, com duas dimensões, que irá armazenar a mesma quantidade de linhas e colunas do nosso canvas, além do tamanho dos nossos blocos.

Para isso, definiremos uma função chamada createGrid(), que vai receber o número de linhas (ROW) e colunas (COL). Em seguida retornaremos um novo array com o mesmo tamanho do número de colunas e, para cada item/coluna nesse array, criaremos um novo array do mesmo tamanho das nossas linhas. Pode parecer complexo mas é bem simples na prática, aproveitaremos também para preencher todos os valores desses arrays com zero (0) e um (1) de forma aleatória, mas explicarei isso mais tarde:

function createGrid(cols, rows) {
    return new Array(cols)
      .fill(null)
      .map(() => new Array(rows)
                 .fill(null)
                 .map(() => Math.round(Math.random())));
}

let grid = createGrid(COL, ROW); //por fim, executamos a função e armazenamos os arrays em uma variável grid

Com nosso array criado, podemos começar a desenhar os blocos na tela, baseado no valor de cada célula dentro do array, onde os valores 1 serão pintados e os valores 0 ficarão apagados.

Para isso, precisaremos de uma função que percorra todo o array e desenhe no canvas seguindo essas regras. Criaremos então a função drawGrid(), que receberá nosso grid, as linhas e colunas do nosso canvas e a resolução/dimensão dos nossos blocos:

function drawGrid(grid, cols, rows, reslution) {
    ctx.clearRect(0, 0, cols, rows);
    for (let i = 0; i < cols; i++) {
      for (let j = 0; j < rows; j++) {
        const cell = grid[i][j];
        ctx.fillStyle = cell ? "#5c3ec9" : "#f8f8f2";
        ctx.fillRect(i * reslution, j * reslution, reslution, reslution);
      }
    }
  }
});

Como podem ver, primeiramente executaremos a função clearRect() nativa do Canvas API, que tem o papel de limpar o canvas antes de começarmos a desenhar. Ela recebe nos dois primeiros parâmetros, as coordenadas de onde deverá começar a limpar, já nos dois últimos, onde deve terminar sua limpeza.

Feito isso, criamos dois laços de repetição for que percorrerá as linhas e colunas do nosso array (eu sei que dava pra fazer algo melhor ou usar a função *.map(), mas ficaremos no for por enquanto)*. Dentro do laço, adicionaremos a célula atual em uma constante **cell, para logo em seguida verificar se ela possui um 0 ou um 1 usando um if ternário.

Nessa linha usamos outra propriedade nativa do Canvas API, o fillStyle, que recebe a cor que usaremos para pintar nossos blocos. No nosso caso, ele pode receber a cor #5c3ec9 caso a célula possua um valor 1 (que no javascript significa verdadeiro/true) ou um valor 0 (que no javascript significa vazio/falso/inexistente).

Na linha abaixo, mai uma tag nativa, mas dessa vez é a função fillRect(), que irá desenhar de fato nosso bloco, que será um simples retângulo. Essa função precisa de 4 parâmetros:

Primeiro: a coordenada X de onde o retângulo deverá ser iniciado (no nosso caso será a resolução x a posição no array);
Segundo: a coordenada Y de onde o retângulo será iniciado (no nosso caso será a resolução x a posição no array);
Terceiro: a largura do retângulo (a resolução);
Quarto: a altura do retângulo (a resolução);

Feito isso, agora você pode desenhar os quadrados dentro do canvas, executando a função que acabamos de criar desse jeito:

drawGrid(grid, COL, ROW, RES);

Explicando as Regras do Jogo

Antes de prosseguirmos, precisamos entender as regras propostas por John Conway, para que o jogo seja de fato "auto-jogável".

Felizmente, existem apenas 4 regras bem simples, tanto de entender quanto de implementar, que definem se uma célula está "viva", que no nosso caso serão as células roxas, ou "morta", que aqui serão as células vazias. Para isso, as condições propostas são:

1: Qualquer célula viva com menos de dois vizinhos vivos morre de solidão;
2: Qualquer célula viva com mais de três vizinhos vivos morre de superpopulação;
3: Qualquer célula morta com exatamente três vizinhos vivos se torna uma célula viva;
4: Qualquer célula viva com dois ou três vizinhos vivos continua no mesmo estado para a próxima geração.

Seguindo essas regras, vamos desenvolver uma função que aplique todas essas condições ao passar do tempo que o jogo está executando. Ela terá o papel de percorrer todas as células do array, aplicar as condições de vida ou morte e gerar um novo array que será novamente desenhado na tela com a função drawGrid().

A cada repetição desse ciclo, consideraremos que o array gerado é uma nova geração de indivíduos que herdaram as condições da geração anterior. Agora vamos começar a implementar essa função.

Chamaremos a função responsável pela aplicação das regras de nexGen() e, como primeiro passo para não afetarmos o grid anterior, definiremos uma constante capaz de armazenar uma cópia da geração anterior a ela.

function nextGen(grid) {
    const nextGen = grid.map((arr) => [...arr]);

Caso ainda não conheça, no trecho [...arr] utilizamos o operador SPREAD, que foi adicionado ao Javascript a partir da versão 6 e tem como finalidade, armazenar um maior número de informações de uma vez só, muito utilizado com arrays e objetos. Você também pode utilizar as funções .push() ou .slice() ao invés do operador spread, não há problema algum nisso.

O próximo passo é começar os loops que irão percorrer o array para aplicar as regras do jogo. Como fizemos lá em cima, precisamos percorrer todas as linhas, utilizando o grid.length e depois todas as colunas, utilizando o grid[col].length (o parâmetro col é apenas o nome que eu dei a variável de controle do for, mas você pode usar as letras i e j como normalmente é feito).

Já aproveitaremos para capturar a célula inicial em uma constante e criaremos uma variável para contabilizar o número de células vizinha vivas.

 for (let col = 0; col < grid.length; col++) {
      for (let row = 0; row < grid[col].length; row++) {
        const currentCell = grid[col][row];
        let sumNeighbors = 0;

A próxima etapa é, para cada célula, percorrer todos os seus 8 vizinhos e verificar se eles estão vivos ou não. Pode parecer um pouco difícil de entender o código a primeira vista, mas aqui vai uma explicação com imagens:

Sim, eu utilizei o Google Sheets para isso, mas o importante é que nosso próximo loop vai percorrer os valores entre -1 e 1, localizando o número de vizinhos vivos.

for (let i = -1; i < 2; i++) {
 for (let j = -1; j < 2; j++) {
   if (i === 0 && j === 0) {
     continue; 
   }

Colocamos a condição if (i === 0 && j === 0), pois essa é a posição da célula atual, que não queremos somar no número de vizinhos.

O próximo trecho vai tratar dos "cantos" do nosso campo. Pense assim, se uma célula está colada na lateral esquerda do nosso canvas, não teremos como acessar os vizinhos que estão em uma coluna anterior a ela, ou seja, mais a esquerda, pois eles não existem. Sendo assim, vamos somar valores à variável sumNeighbors somente se suas coordenadas estiverem dentro dos limites do canvas.

const x = col + i
const y = row + j;

if (x >= 0 && y >= 0 && x < COL && y < ROW) {
    const currentNeighbor = grid[col + i][row + j];
    sumNeighbors += currentNeighbor;

Satisfeitas as condições, a variável sumNeighbors receberá seu valor anterior, mais o valor das células vivas, lembrando que as células mortas aqui recebem o valor zero, que não impacta na soma.

Feito isso, podemos aplicar as regras descritas pelo John Conway com um simples if/else:

if (currentCell === 0 && sumNeighbors === 3) {
   nextGen[col][row] = 1;
} else if (currentCell === 1 && (sumNeighbors < 2 || sumNeighbors > 3)){
    nextGen[col][row] = 0;
}

Explicando, a primeira condição testa se a célula atual está vazia e se ela possui 3 vizinhos, se for verdadeiro a próxima geração receberá nessa mesma posição o valor 1 ou vivo.

Já a segunda condição reúne as demais regras em uma só, testando se a célula atual está viva e; se existirem menos de dois vizinhos próxima geração receberá zero, se existirem mais do que 3 vizinhos a próxima geração também receberá zero.

Por fim basta retornar a próxima geração return nextGen;, e a função ficará assim:


  function nextGen(grid) {
    const nextGen = grid.map((arr) => [...arr]); //make a copy of grid with spread operator

    for (let col = 0; col < grid.length; col++) {
      for (let row = 0; row < grid[col].length; row++) {
        const currentCell = grid[col][row];
        let sumNeighbors = 0; //to verify the total of neighbors

        //Verifying the 8 neigbours of current cell
        for (let i = -1; i < 2; i++) {
          for (let j = -1; j < 2; j++) {
            if (i === 0 && j === 0) {
              continue; // because this is the current cell's position
            }

            const x = col + i;
            const y = row + j;

            if (x >= 0 && y >= 0 && x < COL && y < ROW) {
              const currentNeighbor = grid[col + i][row + j];
              sumNeighbors += currentNeighbor;
            }
          }
        }

        //Aplying rules
        if (currentCell === 0 && sumNeighbors === 3) {
          nextGen[col][row] = 1;
        } else if (
          currentCell === 1 &&
          (sumNeighbors < 2 || sumNeighbors > 3)
        ) {
          nextGen[col][row] = 0;
        }
      }
    }
    return nextGen;
  }

Fazendo isso, estamos quase perto de finalizar nosso projeto, o próximo passo é bem simples, criaremos uma função chamada update() para executar todas as funções criadas em ordem, e utilizaremos a função requestAnimationFrame(), nativa do Javascript, para repetir o processo em loop no navegador.

requestAnimationFrame(update);

function update() {
  grid = nextGen(grid);
  drawGrid(grid, COL, ROW, RES);
  requestAnimationFrame(update); //executando novamente para que o loop não pare
}

Pronto, agora está tudo pronto e seu arquivo deve ter ficado assim:

document.addEventListener("DOMContentLoaded", () => {
  const canvas = document.querySelector("#board");
  const ctx = canvas.getContext("2d");

  const GRID_WIDTH = 500;
  const GRID_HEIGHT = 500;
  const RES = 5;
  const COL = GRID_WIDTH / RES;
  const ROW = GRID_HEIGHT / RES;

  canvas.width = GRID_WIDTH;
  canvas.height = GRID_HEIGHT;

  //Making a grid and filling with 0 or 1
  function createGrid(cols, rows) {
    return new Array(cols)
      .fill(null)
      .map(() =>
        new Array(rows).fill(null).map(() => Math.round(Math.random()))
      );
  }

  let grid = createGrid(COL, ROW);

  requestAnimationFrame(update);
  function update() {
    grid = nextGen(grid);
    drawGrid(grid, COL, ROW, RES);
    requestAnimationFrame(update);
  }

  //Generate nex generation
  function nextGen(grid) {
    const nextGen = grid.map((arr) => [...arr]); //make a copy of grid with spread operator

    for (let col = 0; col < grid.length; col++) {
      for (let row = 0; row < grid[col].length; row++) {
        const currentCell = grid[col][row];
        let sumNeighbors = 0; //to verify the total of neighbors

        //Verifying the 8 neigbours of current cell
        for (let i = -1; i < 2; i++) {
          for (let j = -1; j < 2; j++) {
            if (i === 0 && j === 0) {
              continue; // because this is the current cell's position
            }

            const x = col + i;
            const y = row + j;

            if (x >= 0 && y >= 0 && x < COL && y < ROW) {
              const currentNeighbor = grid[col + i][row + j];
              sumNeighbors += currentNeighbor;
            }
          }
        }

        //Aplying rules
        if (currentCell === 0 && sumNeighbors === 3) {
          nextGen[col][row] = 1;
        } else if (
          currentCell === 1 &&
          (sumNeighbors < 2 || sumNeighbors > 3)
        ) {
          nextGen[col][row] = 0;
        }
      }
    }
    return nextGen;
  }

  //Draw cells on canvas
  function drawGrid(grid, cols, rows, reslution) {
    ctx.clearRect(0, 0, cols, rows);
    for (let i = 0; i < cols; i++) {
      for (let j = 0; j < rows; j++) {
        const cell = grid[i][j];
        ctx.fillStyle = cell ? "#5c3ec9" : "#f8f8f2";
        ctx.fillRect(i * reslution, j * reslution, reslution, reslution);
      }
    }
  }
});

Agora basta executar o arquivo HTML para vermos isso (ou algo melhor no seu caso, pois tive alguns problemas para gravar minha tela):

Considerações Finais

Apesar de não parecer grande coisa, esse projeto é muito interessante para treinar os conhecimentos básicos de HTML, CSS e JS, principalmente na manipulação de arrays. Caso tenha se interessado, vou deixar alguns links de projetos maiores que utilizaram os mesmos conceitos desse jogo.

Criando o Jogo da Vida em Excel - https://github.com/asgunzi/JogodaVidaExcel

O Vídeo que me Inspirou, do canal O Programador - https://youtu.be/qTwqL69PK_Y

Espero que tenha gostado e que tenha conseguido aprender algo legal, lembre-se sempre do que Bob Ross dizia: "contanto que esteja aprendendo, você não está falhando".

Apenas continue, mesmo que devagar.

Até mais. ✌️