DEV Community

Cover image for Light Out game | Day 12
Jayant
Jayant

Posted on

Light Out game | Day 12

Today I have made a Light Out Game , Not From the Scratch πŸ˜…
It was an Exercise of the React Course BY Colt Steele.
The Game Look Like This πŸ‘‡
Light out Game

Working

When you clicks on any cell it will toggles his neighbouring cells. When all the Cells are off you won the Game.

Your Task is to First Make a Board which have cells in it and you can use the Table to show the Cells in the Board(as a table Data.)

Once you are done with that You have to do that every time You Refreshes the site the cell will randomly be on/off.

After that you have to apply that whenever u click on a particular cell it will also toggles it's neighbouring cells.

Component Design

App
As often, this is a very simple component. It just renders the Board component.

Board
The most sophisticated component. It will hold the state that represents the in-memory grid of true/false for lights-on/off. Since the state for the board lives here, this is also were the setState() calls will need to go β€” and therefore, all the functions that call setState().
Cell
A simpler component. This will simply render a div, where the CSS classes will indicate whether this cell is lit or unlit. This is what the user clicks on β€” but it will need to call a function it receives from the Board, since that will need to update the state.

When the game is won, the board should not be shown, but a simple β€œYou Won” message should show in its place.

Happy Coding ☺️

Latest comments (2)

Collapse
 
mishabka profile image
Mishab Ka

where is the link bro

Collapse
 
jay818 profile image
Jayant

Day 12 Completed πŸŽ‰