Hangman Game - Code Review

I Built This
1

Good morning all,

A few days ago I developed a hangman game with vanilla JS. There’s only so much you can do whilst reviewing your own code, so I’d be very grateful if you could take 5 minutes to review the code and provide some useful feedback on where it can be improved.

I didn’t spend any time on the actual design of the project, so you’ll have to excuse how it looks, as my focus was on the functionality offered (I’ll probably get back to the design at a later date).

The HTML and JS files can be found on GitHub (click here) or CodePen (click here).

Thanks for your time in advance :smiley:

2

Hi there,

Any chance you can put it up on CodePen or CodeSandbox? That’ll make it easy for people to play around with your game and give feedback on the code while it’s running (in contract, to static code review).

I’m not a good code reviewer, but I’ll have a look at your repo and see if there’s anything that can be improved.

3

Thanks, i’ve edited the original post with the link.

4

Alright, customary “take it with a grain of salt” alert.

Line 106-125, some duplicates for both switch cases

let gameResult = (outcome) => {
	switch (outcome){
		// Win
		case 1:
			gameState.inPlay = false;
			userDisplay();
			GAME_AREA.innerHTML = `<p class="game-info">Game Won! You guessed "${gameState.word}" in ${gameState.currentGuesses.length} 
				turns.</p>`;
			SUBMIT_BTN.disabled = true;
			GAME_INFO.innerHTML = "";
			break;
		// Lose
		case -1:
			gameState.inPlay = false;
			userDisplay();
			GAME_AREA.innerHTML = `<p class="game-info">Game Lost, you've run out of lives! The word was "${gameState.word}".</p>`;
			SUBMIT_BTN.disabled = true;
			break;
	}
}

And it looks like you’re not consistent with the usage of arrow functions and normal function. Is there a reason for that?

5

Is it your intention to not check if the users entered “Max Word Length” and difficulty level?

I can start the game even if I leave both blank. And when I entered 1 as the max word length, the game defaulted to 3 letters.

6

And one neat thing you might do to extend the game is to use a random words API to get your list of words.

Could be a great exercise if you’re up for it.

7

Thanks for your feedback, I find it really useful!

The inconsistency with the arrow functions is purely an oversight of mine - I need to go back and review to make it consistent!

The validation of the game settings (difficulty) also needs to be implemented, this is something i’d forgotten to include in my test cases. Whilst the game is playable if both fields are unanswered (it uses a default setting), it’s seems to be poorly designed if leaving them blank has no impact.

Thanks so much for the other feedback, I always find it difficult to go back and review my work (especially so soon after creating it as i’ll still be in the same mindset). I really appreciate your time on this.

8

No problem.

And if you review your code again, try making it more DRY (Don’t Repeat Yourself) along the way.

Duplicate codes are difficult to manage; it’s okay for small projects but as the project gets bigger and bigger, the mess will accumulate thus making it difficult to maintain.

Making a habit out of DRYing up code is difficult but with practice, I’m confident that you’ll get good at it.

That’s okay. I just recently learned about the difference between the two myself.

I’m not sure in which book, but You Don’t Know JS elaborated a lot about this.

Haha we’re the same. It’s very good that you seek feedback though because it’s difficult to see the flaws in our own codes.

Keep on being awesome.

9

Hi,

I played around the game. First thing I noticed is that the game doesn’t reset when a victory or defeat condition is reached. It just stuck there with the message you win or you lose.

Other that, the code is quite clean. Not much problem understanding what you did. I did cheat while guessing. LOL

10

Thanks for the feedback, I think I’ll add a “Play Again” option when the game is finished.