For this assignment you’ll be combining examples 13 and 14 from the book into a tech demo (still not actually a game).
While they are both good examples that demonstrate some of the basic features of the <canvas> element and its 2d context, they suffer from a few deficincies. Fix these as you rewrite and combine them. Do as you see fit, you’ll be expanding on these examples for the second homework (HTML5 - Programming Assignment #2), so better to code well now than suffer through bad code later.
Use FLOSS development practices while working on this. From the start, keep your code in a git repository linked to github. “Commit early and commit often.” You’ll need to create a new repository on github for this.
As far as combining the examples goes, your demo will need to feature the ability to:
- Place and destroy buildings.
As far as fixing up deficiencies, you need to:
- Convert the code from a half-procedural/half-object-oriented pattern to be fully object-oriented. You should have differenet objects here and not just cram everything into the Game object from example 14.
- Replace the event handling and listening with jQuery.
- Replace the style attribute manipulation on DOM elements outside the <canvas> element also with jQuery.
- For example, the lines where they set className = null and use .setAttribute(...) are so five years ago.
Write a blog post explaining what changes you made and why you made them.
Simply include a link to your github repository for proof of your work.
Here are some examples of frameworks you could use: