An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
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
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
Original Link: https://dev.to/developerioweb/light-out-game-day-12-2m6h
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To