Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:22Length:2 hours
Practical react fundamentals 400x277
  • Overview
  • Transcript

6.3 Final Changes and Extension Points

The game is basically complete. But there are a few points you can spend some time improving to make the game a little more enjoyable. Let's talk about ways to improve the game in this lesson.

6.3 Final Changes and Extension Points

The final thing that I wanna show you is when you lose the game, I want to display what the actual word was that you didn't get. So the final thing that we're going to do here is we're going to go into our GameBoard and down in our render function. You're gonna see here that the logic that we put in here as far as showing the data where it's found for that letter is basically just going off of the show property of our letter map which is up here in our state. And that's fine for normal playing, but what happens if the game is over? Well, if the game is over, then I just want to show them all. So I'm just gonna show all the letters. So all I really have to do to make this work is come in here and change this to say this.state.status. If that status is = Game Over, because that's what I'm setting it to win the game is over, then we're simply going to say true. If the game is not over, then we're going to honor that show flag. So if I go ahead and save this, that should take care of that little problem and when I save that it's going to re render with a new word and it's a long one. So I can go through here and start to try to guess some letters and you're gonna see fairly quickly I'm gonna get down to 3, 2, 1 and if I don't hit this last one as you can see here, remaining misses zero game over. And the full word here is long sleeves. And this does bring about one of the things that I want to talk to you about, at least for an enhancement of this game. There's a couple things to think about. Obviously, if I'm playing this game right now I can't handle this type of a word. So one of the extension points you can use for this game is to add in additional options for the buttons that show up down here on the bottom of the screen, so if I refresh it's going to reload. I could put in some additional things in here like hyphens, like ampersands, like spaces, and that really allows you to extend this game to maybe allow for you to put in sentences if you allow for spaces. Hyphenated words like that last example where it was long sleeves. That really kind of brings the game up a level and allows you to kind of do some more interesting things with it. So that's definitely one thing to take into consideration. And another extension point that you could use is, if you've started to follow along and you're following along and writing the code with me, you'll notice that if I start to type in a letter that doesn't exist, like, B does not exist, I can continue to click this. And every time I click this, it's going to say remaining misses and it's going to bring that number down a level. Maybe you want it to be that way, maybe you don't want it to be that way. If you don't want it to be that way, then you can go ahead and augment the code and track all of the letters that the person is guessing. Maybe put them into some sort of list or an array and then when you go into that click letter function. When you come in here, one of the first things that you can do is you can check to see if the letter that was clicked already exist in that guest letters array, and if it was already in there, then just ignore it then we can do a return statement and pop back out. So maybe you allow the user some graces if they continue to hit a letter that doesn't exist because right now I could end the game this way and you could see that it was a word that I couldn't guess. So those are couple of interesting little extension points and things that you can do to take this game to the next level. And obviously you can throw in some styling as well. So there you have it, there's your Hangman Clone game. Hopefully you've enjoyed building this with me and you enjoy continuing to build on this sample application to really have fun with it and continue to learn about React.

Back to the top