JavaScript Hangman Game
Play online at:
https://vtchris.github.io/hangman/
This game uses onkeyup to determine your guessed letter. I noticed that this did not work on mobile devices since there was no textbox to trigger the mobile keyboard. To address this issue I have a textbox that is displayed on smaller screens using an @media query. Once the letter is captured, I clear the text-box. Press ESC to move to the next word. Thanks for playing, have fun!
In this assignment, you’ll create one of two possible computer games: Word Guess or Psychic. These apps will run in the browser, and feature dynamically updated HTML and CSS powered by your JavaScript code.
Create a new GitHub repo called Word Guess Game or Psychic-Game, in accordance with the assignment you choose to complete. Then, clone it to your computer.
Inside your local git repository, create an index.html.
While still in your local git repo, create a directory called assets.
cd your way into the assets folder, then make three additional folders: javascript, css and images.
javascript folder, make a file called game.js. Use the src attribute of the script tag to link to this file, rather than embedding the code directly in your HTML document.css folder, make a file called style.css.css folder, make a file called reset.css. Paste into it the code from the Meyerweb reset stylesheet. If you opt to use Bootstrap instead of writing your own CSS, skip this step, and simply include a link to Bootstrap via CDN.images folder, save whatever images you plan on using.
├── assets| ├── css| | └── style.css| ├── images| └── javascript| └── game.js└── index.html
Push the above changes to GitHub.
Choose whichever game you’d like to build. Making the Psychic game will prove less challenging than coding Word Guess. However, as the challenge of the Word Guess exercise provides a more comprehensive review of this unit’s material, we suggest attempting that assignment first.
Note: There’s no shame if you’d prefer submitting Psychic—it’s still a proper challenge.
Push your selected game to Github Pages.
Choose a theme for your game! In the demo, we picked an 80s theme: 80s questions, 80s sound and an 80s aesthetic. You can choose any subject for your theme, though, so be creative!
Use key events to listen for the letters that your players will type.
Display the following on the page:
Press any key to get started!
Wins: (# of times user guessed the word correctly).
If the word is madonna, display it like this when the game starts: _ _ _ _ _ _ _.
As the user guesses the correct letters, reveal them: m a d o _ _ a.
Number of Guesses Remaining: (# of guesses remaining for the user).
Letters Already Guessed: (Letters the user has guessed, displayed like L Z Y H).
After the user wins/loses the game should automatically choose another word and make the user play it.
Pseudocode your program and break the app down into tiny, manageable fragments. This will make the coding process much less frustrating and a veritable Mach number faster. Otherwise, you’ll be chipping away at a giant chunk of abstraction for way too many hours.
When you encounter bugs (and we all do), console.log will become your best friend. Regularly check your console to make sure your app is spitting out the right values.
Try your best to deliver a ‘working/playable game’ by the end of the deadline. If you’re not making progress with Word Guess, switch gears to the Psychic game. Contact your TA/Instructor if you’re not making progress after 2 hours. We’re here to help!
Substance over style! Submitting a working game matters more that making a broken app that at least looks pretty. We’re focusing on game mechanics, not just on the look and feel of your app.
That said, coding a functional app that also looks pretty would be impressive.
Always commit your work and back it up with GitHub pushes. You don’t want to lose hours of your work because you didn’t push it to GitHub every half hour or so.
Turn in anything you have! Even if you don’t finish, we still want to see what you were able to accomplish in the time we gave you. This will help us know what concepts we could help you with, as well as what topics we should focus on in the coming lectures.
Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Adding a README.md as well as adding this homework to your portfolio are required as well and more information can be found below.
After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an ‘A’ on any assignment, you must link to it from your portfolio.
If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you’re still having trouble, you can come to office hours for assistance from your instructor and TAs.
Good Luck!