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 π
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 βΊοΈ