Conway's Game of Life

Fourth Devlog

I’ve received so many helpful comments from my first ship so I’ll make sure to fix all the problems people have had while testing my project….but, before fixing it I thought maybe I could first break it a little more. d=(´▽｀)=b

This time I’ve changed the core logic of counting neighbors and in it introduced a way to change how borders are handled.
At first the borders were always counted as dead cells, causing all life to die or stagnate when it hits an edge (as the gliders do in the right -> attachment) and so I wanted to make a way to switch the borders so that they wrap around to the opposite end of the map to make it possible for some cool effects (such as the gliders shown in the left <- attachment).

Progress:

Added:
A button for toggling Borderless mode on or off:
When toggled on, this button will cause the border cells to become neighbors and basically wrap the whole grid so that the processes are not bound by the edges of the grid, but can be carried out infinitely

Changed:
For the implementation of the borderless mechanic I wanted to first prep my main neighbor-counting logic so I rewrote it.
Before, it was using 9 if statements to manually check and count the alive neighbors, but now I’ve automated that process with 2 for loops and some additional checks - making my code much more readable and better for any future changes as it’s more modular

Attachments:

A side-by-side comparison of how the game behaves if you toggle the borderless mode on vs off. There are many kinds of shapes docummented throughout the time people have been playing around with Conway’s Game of Life.
In the gifs you’ll see a very simple glider that will move indefinitely if undisturbed. I’ve used them to showcase the way the borders change the game logic.

Third Devlog

The logic is done!!!Ｏ(≧▽≦)Ｏ
Now I have my first working project yayy
I’ve spent this time mainly in JS making the checking mechanism for the neighbours and the conditional logic

Progress:

Added:
A main function that checks nearby cells and a function that triggers it, updating all cells each timestep
A simulated grid as to not mess with the previous state and update the cells before it’s their turn
The functionality to stop and start the simulation via the button and interact with the paused state
Changed:
The colors and sizes of elements with inspiration from the theme of Flavortown
Fixed padding and border issues caused by elements sharing the same class when they shouldn’t
The assigment of the ‘active’ class to the button

Attachments:

The working verion of the site, it’s pretty limited for now. There’s a lot more I could expand upon such as adding guides for some famous seeds of life, more features and a better UI than the play and pause button.

Second Devlog

Helloo, I encountered a problem while trying to progress in my JS so i went back and after too much time figured out that I messed up the variable names completly (╯=▃=)╯︵┻━┻
I’ve probably fixed them all so I’m hoping that this will be a one-off issue, I’ll be more careful from now on

Progress so far:

Fixed incorrect var names across my documents, specificaly for the game_dimention variable and the src fot the script.js
Added a very basic for loop that populates the grid and toggles cells on/off when clicked

Attachments:

You’ll see the current progress on adding the actual grid for the simulation

First Devlog

Hi this is my first project in Hackclub and first time ever making anything with CSS and JS. I wanted to start with something a bit more logic focused for my debut but I’ve already spent just an hour setting up CSS. (ㅠ_ㅠ)
I’m gaining a new appreciation for WebDevs by the minute.( っ˶´ ˘ `)っ

Progress so far:

Made the html and style documents using tutorials and google
Understood and learned new contsepts and used Ai as a guide to explain what I didnt get at first

Attachments:

I’ve attached a gif to show what I’m trying to make and a picture of what i have so far, the colors are horrendeus but I’ll fix them after the script is done