Hey everyone,
Im trying to create this game using React as practice. However when it comes to building things from scratch I have trouble planning things out. Like what should be a class component? What should I have as states? I’ve included my pen nothing works now just a shell. Just have trouble with what needs to go where and how to approach making this game with React. https://codepen.io/SangT/pen/GExBzz?editors=0110
Not trying to sound like a dick, but if you don’t know where to start, maybe this is above your pay grade.
That being said, I’m no expert but, without delving into your code, my approach is usually logic -> layout -> prettification. I do a minimal layout just to get started and then I work through all the logic, making sure I can make it work. I go step by step, testing every step of the way. Then I work on the layout - make sure everything is positioned the way I want. Then I prettify - make sure all the fonts and colors and borders are what I want. (It always amazes me when people ask for help and they’ve clearly spent hours and hours on the layout and fonts and colors but don’t even know how to begin on the logic. To me, I want things as spartan as possible when I’m working on the logic so it doesn’t get in the way.)
That being said, with React, you have to plan a little so you know what the components are and how they will communicate. I would be thinking along the lines of:
app
header
game
lights
light
controls
buttons
button
readout
footer
That would be my layout. I would keep my state in game because that is the first ancestor of anything that needs access to anything (for me, header and footer are usually just static information.)
Then I would work on my logic. How will I keep the turns? Maybe an array of numbers 0-3 (for each of the lights). Then I would create a dummy list of moves and see if I can get the lights and sounds to fire off in the correct order with the correct timing. I would test everything as I go. Test, test, test. And just keep building on that logic.
make a grid / nested array. the grid can be part of the state. next to lives, strenght, wapon, eye-color, etc.
inside the grid have values 0,1,2,3 or a,b,c
0 could be wall, 1 could be monster. you pick
next: let it display something: probably divs
1 becomes a red background, 2 a green, what you like
next step: realise: if you change the grid, the view also changes. so, you have to change the grid.
2 things: monsters move and user moves.
monsters move on interval, user moves on keyboard
before move: check go-to-square (is there a wall, no move, etc)
you can do it. ur paygrade is godunov.