JavaScript Game

This project is intended for you to learn the basics of programming in basic JavaScript.

Games used to be written in Java or Flash in order to run on the web, but those technologies suffered from security holes and performance issues. Now with the canvas element in HTML5 and the ever increasing performance enhancements to JavaScript, it makes a lot of sense to write games directly for the web using JavaScript.

Breakout is a popular game to assign students to write in introductory classes since it is reasonably complex but not overwhelming. So I am suggesting you write a game of similar complexity to Breakout (or exactly Breakout, which itself has a lot or variations, if you are not feeling creative about coming up with something basic on your own). It does not need to be the greatest game ever created, or even have sophisticated graphics, but it does have to meet a few basic requirements:

• It should be interactive, with clear winning and losing conditions.
  
• It should have elements that move about the game area algorithmically and interact with the player.
• It should allow the player to interact with the game using either the mouse or keys or both.
  
• It should not start until the user clicks or presses a key to signal they are ready to start playing.
• It should clearly display the player's score and/or remaining lives as appropriate.
• It should include useful and documented cheat keys (this is to help debug your game and the course staff to play your games :)

To accompany your game, it should appear within a web page that contains the following:

• advertisement for your game, as you might find on the cover of the shrink wrapped box your software will come in
• directions of how to use your version of the game (e.g., how to interact with the game, how to win or lose the game, etc.)

You should use plain JavaScript to draw directly on an HTML canvas for this project, not any kind of framework that claims to make it easier to program games or even easier to use JavaScript itself. While using JavaScript 6 classes is not required, it will help you get used to them since we will use them extensively throughout the course. I have created a small starter example of the game Pong.

I strongly suggest design your game iteratively: making a few small changes at a time and using the Developer Tools Breakpoints and the Console to see what is happening.

Resources

• HTML Game Example
• No Tears Guide to HTML5 Games (uses some jQuery, which you will not be able to use)
• Web Game Development Technologies

Submission: Adding your Pages to your Portfolio

This project will be added to your assignments-portfolio-GIT_SCREEN_NAME repository so there is one single place we can go to find your work during the semester.

To submit this project

• create a new folder within your assignments-portfolio-GIT_SCREEN_NAME folder named game
• within that folder put
  • HTML page and the CSS style and JavaScript file(s) it refers to
  • any local images used to make your page
  • a README file (in plain text or Markdown format) describing your work on the project
• then add a very obvious link on your Portfolio web site to the page you have made

Your files must display the way you expect in the latest version of Chrome. You are expected to follow the standard coding conventions for HTML, CSS, and JavaScript (within reason). Your code must validate using the W3C HTML, CSS, and JavaScript (within reason) validators online.

Only what is in your assignments-portfolio-GIT_SCREEN_NAME repository on GitHub at the deadline will be considered for your submission.