This content originally appeared on DEV Community and was authored by Web.Developer.io
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 ☺️
This content originally appeared on DEV Community and was authored by Web.Developer.io
Web.Developer.io | Sciencx (2022-01-16T13:20:04+00:00) Light Out game | Day 12. Retrieved from https://www.scien.cx/2022/01/16/light-out-game-day-12/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.