CompSci 290.2
Spring 2018
Web Application Development

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:

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

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.


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

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.