HTML5 - Programming Assignment #1¶
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
<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:
<script>tags and into its own
- 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
Gameobject 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 = nulland 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.
Optional - use a framework¶
Here are some examples of frameworks you could use: