JavaScript WEB 114 Final

Build a JavaScript Game About JavaScript!

The subject of your game is JavaScript!

Your final project challenge: To use all of the objects, methods, properties, events, functions, and programming constructs you've learned in WEB 114, JavaScript I, to create a JavaScript game in a web page about JavaScript!

html issues are in blue

css issues are in green

JavaScript issues are in red

General instructions are in black.

General Steps:

  1. Plan and break down the requirements of this project into smaller tasks that you can demonstrate with HTML and JavaScript.
  2. Your JavaScript game needs to have JavaScript as the subject of the entire game, but you might also want to wrap it up with a creative theme that reflects your own creative juices. What are you into? Animals, sports, super heros, travel, children? Your game must be professional, but you can also dress it up with a creative theme.
  3. Keep building your web page and modifying it with JavaScript until all requirements are accomplished.
  4. Once the HTML and JavaScript are working, write CSS to add a pleasing and responsive web site per the details below as well as the amount of time and effort you want to put into this.
  5. For grading purposes, put your efforts into knocking off all of the JavaScript requirements below. But yes, to allow your individuality and creative juices shine, also work hard on your theme so that the wording of your questions, your images, and your styles raise your "game" as exciting as desired.


  1. Create a well-formed, semantically correct html page. Include appropriate wireframe tags.
  2. Include a div to wrap all content in the body.
  3. Set the width of wrapper div to less than 100% and center the div.
  4. Review the list of required items below, incorporating them into your JavaScript game.
  5. Validate your html.
  6. Validate your css.
  7. Spell check all content.
  8. Your page should follow responsive web design principles.
    • All measurements should be flexible. (em and % or other responsive units of measure).
    • Images should be flexible. e.g. { max-width: 100% }, no height= or width= attributes in html. Incorporate at least two images in your game!
    • meta viewport tag should be added. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • Two media queries for tablet and phone size should be added. I don't care if you code it with max-width queries for a traditional approach or with min-width queries for a mobile-first approach, but the media queries should make significant and appropriate styling changes at the three basic screen sizes of mobile - tablet - laptop. Ideas:
      • 2 columns at laptop size, 1 column at tablet/phone
      • not full width at laptop size, use more width at tablet, use full width at phone size
      • darker backgrounds / sharper text contrast as the screen gets smaller
      • more content at laptop size, but hide non-critical content at smaller screen sizes
      • different navigation capabilities at smaller screen sizes
  9. All css and JavaScript should be stored in external files.
  10. All files should be properly documented with your name and the current date.
  11. NOTE! You MUST present your project to the rest of the class to get full credit. I will announce at least 4 different options for this a couple weeks before the end of the semester. If none of those times works it is your responsibility to contact me to schedule an alternative time. No exceptions! Thanks!

Your game should demonstrate and use this list of JavaScript knowledge (but it is not limited to this list):

Some ideas you might want to incorporate into your game, as well as some final thoughts: