search

freeCodeCamp / CurriculumExpansion

Creative Commons Attribution Share Alike 4.0 International
313 stars 104 forks source link

Learn Intermediate React by Building Flappy Bird #117

Closed QuincyLarson closed 2 years ago

ykrueng commented 5 years ago

Would love to help with this project.

Marmiz commented 5 years ago

I'm working on a basic demo that involves no game engine, no canvas, and minimal physics, to keep things as simple as possible. I hope for it to be ready by next week (extra time is short right now).

I'll post an update as soon as I can.

QuincyLarson commented 5 years ago

Thanks for your patience.

@Marmiz Awesome! I am excited to see your demo once you build it.

@ykrueng I'd be interested in seeing your demo too if you get a chance to build it.

The first step is to build the project itself. Then you can work backward to break it down into steps, like this: https://github.com/freeCodeCamp/CurriculumExpansion/pull/135/files#diff-99314d694942b489d28d8a6f0c3bc5a3

scissorsneedfoodtoo commented 5 years ago

Hi @ykrueng and @Marmiz, just wanted to check in and see how everything's going with this project. Have either of you had a chance to work on it? Please feel free to reach out if you have any questions.

Marmiz commented 5 years ago

Hello @scissorsneedfoodtoo, sorry for the silence.

I am playing right now, so I'm ready to show a working demo. Just adding some final touch to the UI and should be ready for a first inspection.

I'll deploy it somewhere and post a link here with source code included since there are a couple of point I'd like to discuss.

scissorsneedfoodtoo commented 5 years ago

@Marmiz, no problem! Glad to hear that you have a working demo. Just post it when you can and I'd be happy to discuss those points with you.

Marmiz commented 5 years ago

Right, here we go:

playable demo here (gh page) repo here

Now I'd love if someone with experience in React and Teaching could spare its feedback, manly because the whole app...

doesn't feel "reacty" at all.

I work daily on a React project, but this demo was more about Math and Game physics that React, Components are minimal and with limited interaction. No event handlers (like onClick) besides some global listener for jumping, start ....

But I'd love to hear some feedback on it.

Note, the code has some fixed, arbitrary number that needs to be properly commented with the reason behind, they are not random values, I'll do that in the next days.

Example: the 16.66 ms on timeout are a way to fix the framerate to 60fps without the need of a game engine.

Looking forward to heart from the community.

p.s Side note: I may have made it way to hard/frustrating to play, I'll revisit the numbers and probably ease them 😄

EDIT: Perhaps adding a splash screen with a start game button would also help in covering conditional rendering / buttons and events. And also making it feel more like an actual videogame:

something like: Title Screen -> Countdown -> Play State -> Score -> (repeat to Countdown)

scissorsneedfoodtoo commented 5 years ago

@Marmiz, sorry for the late response. This looks great so far! Like you mentioned, adding a title screen, countdown, and those other elements would be a good way conditional events. And don't worry so much about the balance now -- that can be tweaked before you start breaking down the project into steps. I found it a bit difficult, but I'm not the best judge since I tend to play slower, turn based games.

I don't have a lot of experience with React, so the best way to get some feedback would be to post your project in the Contributor's Chatroom along with the link to this issue and ask for a review there.

scissorsneedfoodtoo commented 5 years ago

@Marmiz, just wanted to check in and see how things are going. I saw your post in the Contributor's Chatroom! Seems like there was some positive feedback.

Were you able to make any progress on the title screen, countdown, and other screens?

Marmiz commented 5 years ago

Hello @scissorsneedfoodtoo, I was waiting for some more feedback from the community about the game before proceeding, but at this point it's probably better to just complete the whole game with those extra features and then seek for more ideas.

I'll work on them in the upcoming days, I'll keep you posted. 👍

scissorsneedfoodtoo commented 5 years ago

@Marmiz, alright, sounds good! You have a really strong project here, so I agree that it's best to add some of those features and start breaking it down into short lessons.

Looking forward to playing the full game!

scissorsneedfoodtoo commented 5 years ago

Hi @Marmiz, just wanted to see how everything's going. Were you able to add those features to your project? If so, could you post an updated prototype here?

swyxio commented 5 years ago

i played it a bit, i do agree its a little too hard :) but hey its really great for a first react project regardless!

Marmiz commented 5 years ago

@scissorsneedfoodtoo still a WIP I'm afraid, I will post an update as soon as I am happy with the result.

@sw-yx glad you liked it. I will play around with game design and see how it could be eased. Imho the two main things are: the pipes goes too fast / the delta height of adjacent pipes couple can be too much. Anyway this can be a nice "extra" for future campers: make your own gameplay 😄

Lastly, I saw you are thinking of integrating hooks; this raise a good question: do we think that is worth to teach hook straight from the start, or is better to learn the "old" way first?

scissorsneedfoodtoo commented 5 years ago

@Marmiz, no problem! Thank you for the update. Reducing the speed and the height of the pipes would go a long way in reducing the difficulty. And that's a great idea -- maybe a short note at the end of the project inviting students to modify the project so the difficulty ramps up over time, or some other gameplay feature.

About hooks, I think it would be better to teach the older way first. You could introduce hooks later in the project, either by describing them before writing new code for the first time, or by refactoring some older code.

swyxio commented 5 years ago

i use hooks in my redux project :)

scissorsneedfoodtoo commented 5 years ago

@Marmiz, how's everything going? Were you able to adjust the difficulty of the game? Even if you weren't, this project is probably ready to be broken down into steps like the JavaScript RPG Game.

QuincyLarson commented 5 years ago

@Marmiz This is off to a great start. I encourage you to keep the code as simple as possible. Instead of having hotkeys to start / restart I would just have the game start as soon as it loads, then restart whenever the player crashes.

Remember that the learner is going to build this project line-by-line so we want to minimize the number of lines of code and thus the features.

Marmiz commented 5 years ago

Apologises for the late response.

@QuincyLarson I integrated those features mainly as an addition to the game engine, and I agree that they may be an overkill, perhaps those are more game development oriented.

I can start working on a step by step section as @scissorsneedfoodtoo pointed out. But before I start, is there any official resource / guide on how to do it?

Or is mainly up to my own discretion?

scissorsneedfoodtoo commented 5 years ago

@Marmiz, sounds good. Please take out those things and refer to the Contributor's Guide before you start breaking down this project into steps. You can also take a look at the JS RPG Game for a good example of how long and specific the instructions for each step should be.

Do you have 20-30 minutes to hop on a call? If so, please email me at kris@freecodecamp.org. We could talk more about your project and I can answer any questions you might have.

scissorsneedfoodtoo commented 5 years ago

Hey @Marmiz, just wanted to check in and see how things are going. Were you able to start breaking this project down into steps?