Creating Hangman in PHP and JavaScript

It is a fact: my advisor/primary instructor likes making games for his programming classes projects. Last semester, I developed a Tic-tac-toe game in JavaScript for him. Although it was part of the class, I created a game of Battleship in JavaScript, and he and I talked about how he once made the game using PHP and radio buttons. So when my final project in PHP class came in on 10 March, I was not very surprised to see the suggested projects:

As I knew creating Tic-tac-toe in PHP would be an absolute pain (making it in JavaScript was already painful enough), I decided to tackle Hangman. Within a few hours, I had a random word and corresponding hint selector (using simple a text file for the dictionary) and within two days I had a WIP page layout, not to mention trying to add some humor to development:

I then began working on the game logic, starting on communicating with the PHP backend. Using an OO architecture was a must, as was easily displaying content, as I had a feeling from the very beginning simply echoing to the page would not provide the layout control I needed.

I devised two ways of accomplishing this goal: treat the page as a form, POSTing to the PHP and reloading the page with the updated content, or using AJAX to POST to the PHP and JavaScript to inject the returned content onto the page.

  • As stated, POSTing to the page in a form-like manner required a page reload order to process the guess and display new content. I was not particularly fond of this method, as it would get annoying fast and require keeping track of the game state by storing the values in $_SESSION on object destruction (and subsequently restore them on object creation).
  • At the time, I assumed the second, preferred method of using AJAX for the request and JS for the page content would not require me to keep track of the object’s state, as it would be preserved between requests. This method not only removed the page reload, it also made it much easier for me to display the content (obviously PHP has no knowledge of your DOM structure, whereas JavaScript can and often does.). This method is additionally more “real-world”. Websites commonly POST to PHP scripts for data processing then use JavaScript to display information. However, the benefit with this method was also the primary problem: JavaScript. After all, the class was called “PHP Programming I”, and I did not know if my instructor would accept this method.

That Monday (16 March, to give some bit of a timeline), I presented these ideas to my instructor and asked for permission to use the second method. After a bit of discussion, he agreed with me and allowed me to proceed with my desired plan. With permission granted, that afternoon I whipped up some quick JavaScript to interact with my game logic. One month and many changes later, I finished Hangman with roughly two weeks before due date.

As this was my first big (or even real) project using PHP, I did learn some things in the process.

  • If something can break, it will break.

    Too many times I had things break that should not have broken. For example, once my letter white list, designed to not make players type certain characters (spaces and dashes) broke while I worked on code that did not relate to or interact with it. Yes, random breakage can happen in any code base, but it seemed to happen more frequently with Hangman.

  • PHP is confusing and convoluted as all get out.

    Look, I have read many blog posts on this topic. Some say PHP is bad, others good, and still others say it is getting better. As you know, I am of the opinion PHP is absolutely crazy. I have never had so much trouble figuring out what function to call, what syntax is correct (is it -> or =>?), nor why all the aforementioned random breaking kept occurring. Could I use PHP in further programming? Probably so, but I will make sure to have plenty of candy and breaks to relieve the intense stress and pain when writing PHP. 😛

  • Just like with Tic-tac-toe, Hangman is simple to play but hard to convert to code. Though not near as complex as Tic-tac-toe, yet again it is proven that creating a game, even something as simple as Hangman and Tic-tac-toe, is more complex than first imagined. The primary issue for me was determining the current score, e.g., correct or incorrect answer, continue guessing or game over. Things your brain already understands has to be reimplemented in code, and that was probably the most challenging part of this project.

If you are wondering if you can play my Hangman game, the answer is yes! I have open sourced it on GitHub under the MIT License and hosted a copy on my website. If you like to try it out youself,, it should run under practically any PHP environment as it uses no libraries or platform specific code. Developed under PHP 5.4 and tested under PHP 5.6 and PHP 7.0. Do note Hangman, like Tic-tac-toe before it, is not super-mobile-optimized, and layout issues are likely to be present. 🙂

Next possible code project: convert the game to be HTML5 powered.

-Caleb

Advertisements

Triangular Reactions

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s