Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 16, 2022 01:20 pm GMT

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


Original Link: https://dev.to/developerioweb/light-out-game-day-12-2m6h

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To