This weekend seems to have come and gone in the blink of an eye. In fact, time seems to be disappearing faster and faster. I almost never feel like I have enough of it to do what I want to do, but just enough to do what I need to do most days. Fortunately this weekend has sustained my wants and needs! I rocked the weekend project and even did some extra ‘hard mode’ tasks as well as fixing a HUGE bug I found in my marvel game from last weekend (it looks so much better since the last time you guys have seen it)!
I got pretty lucky this weekend in that our project was based off something I had already spent hours on in the front end – a hangman game! The unlucky part is that since we are programming strictly on the server-side basically nothing I had written previously would do me any good. I didn’t mind much though, and since I have learned so much in just the couple weeks since I last wrote the logic of my original hangman game, I was able to implement everything I had learned in this version which included cutting the logic of the game itself way down and calling functions that live outside the main logic and could easily be re-usable!
When you first load the page you get to choose your mode: easy, normal or hard. This will determine the length of the word you are guessing! Once you click the play button you head over to the main game page. This is where your ‘session’ gets started. Expression-session is an npm module that you can load into your node.js application. It assists you in storing session data including cookies. Cookies were not used for this project, but with session they easily could’ve been! You play until you either win or lose. If you win, you have the option of adding your name to the ‘Hall of Fame’ which is actually a permanent json file that the server writes to when someone enters their name! Super cool stuff. At both the win and lose screen there is an option to play again. Once you click that button your session has restarted with all new data! Basically a session is a giant object that lives on the ‘request’ (the server ‘requests’ information from the browser and then ‘responds’ accordingly). You can add any key and value pair you’d like to the object such as the magic word itself or the number of guesses the player has remaining.Before you start judging, the design of this game was not supposed to be heavily considered. The magic is in the code! Here’s a slideshow of what the player will see:
Now let’s walk through the fun stuff!
Loading all the dependencies, setting up a file path to the json file where the winners live, setting up all the dependencies so they are usable and setting up the mustache engine. Basically the configuration of the application itself:
This is where I set up session! Session needs these as the bare minimum to be used but there’s a ton of other cool stuff session can do!
This is where I set up my easy, normal and hard modes. Basically I have a huge file that is all the words in the dictionary. I need to run through all those words and sort them based on their length which is exactly what the function determineMode does! It then pushes the word to it’s appropriate array. I also needed this function to run on application start up so I set it outside of all my page loads and made it an IIFE (immediately invoked function expression) so that it will call itself!
Once you load the root directory, this little post function will determine whether you have selected easy, normal or hard and then choose your word based on that decision! ‘Post’ allows us to grab any information that was entered on the webpage and manipulate it when it gets back to the server. Finally it will redirect you to the game page. Using request.session.newWord means that the game page will have access to your word! Request.body allows me to select elements of the body of the html and access their value!
This get function is used to create the game you’re about to play! It sets up all the necessary variables and stores them on the session object so that we will be able to modify and access them throughout the duration of the game! There’s even a loop that sets up our dashes to be equal to the number of letters in our magic word!
This is where all the magic happens. Our game post function! Every time the user presses enter this little guy will run! The first several lines are for checking against invalid guesses. I could’ve used a validator to do this, but I felt for my own understanding it was helpful to do it manually. If you notice the very first line in the function resets the error to an empty string, so that you aren’t continuously bombarded with expired errors. After the error conditionals, the users guess gets pushed to an array that contains all guesses, if the guess is in the word, two functions are called. The screenshot and explanation of those is a bit further down, but I want to point out how much cleaner the code is since the functions were called inside the conditional instead of writing out even more conditionals in this block. The next block determines whether or not there are any letters left to guess, and if there aren’t it redirects the user to the win page, otherwise, the game page is loaded again with the session object that has been updated with the user’s guess! If the letter guessed was not in the magic word, the guess gets pushed to an array of incorrect guesses and a guess is deducted from the guess counter. The next block determines whether or not the user has any guesses left. If not, the ‘lost’ page will be rendered and passed the session object so the user can see what the word actually was, otherwise the game page is loaded again with the session object that has been updated!
So the top block of code here is where the server will grab the name of the winner, if entered, and push it to the array inside of the json file called winners. This file does not get written over when the session ends. We have to convert the object to a string in order for json to work correctly and we also must determine the filepath to that object.
The next function takes in the magic word as an array and the current guess. It looks through the array and determines whether or not the guess is any of the letters it finds in the array. If it is, it removes that letter from the array. Doing this allows us to simply check for any remaining letters to determine if the user has won. It then returns the updated array back to us.
The last little function does basically the same thing except it takes in the dashes array as well. This will replace the dashes the user sees with the letter in the correct index of the magic word. It replaces the guessed letter with a ‘/’ in the correct word array so that the loop can continue to check for that letter (in case a letter appears more than once the magic word). In the back of my mind is a question of whether or not those two functions can be compounded to one…
Well, that’s all I’ve got for now. I’m pumped that the concept of sessions is making sense to me, and I’m excited for the week ahead! Until next time!
When Fire Meets Code 