Gameplay in HTML5: Homework #6

Game View

  1. You will need to obtain or create graphics files representing the playing cards. The PNG format is best for use in the game, but it is good if they are created from an SVG format, so that various-sized versions can be produced.
    You can obtain files on the Internet that are free for use, some only for non-commercial purposes. One source is (I have used the small version of the SVG Deck (Fuchs and Hart, using SVG cards by David Bellot). Another set of SVG cards, by Chris Aguilar, can be found at
  2. Modify Loader.js to load the card images, keeping track of the loading progress. Also provide a function to get the URL of a card image, given a card object.
  3. Modify your splash screen to display a loading progress bar.
  4. Create a FreeCellCanvasView.js module where you will write the code for displaying the game using HTML5 Canvas.
    1. Write a setup function that creates the canvas for the game and sets the coordinates and related constants that determine where the tableaux, cells, and foundations are to be drawn.
    2. Write a function to update the screen (canvas) to render the current state of the game (the model).
    3. Later we will work on showing cards in motion, but for now, how might you show that a card has been picked up?
  5. Archive your files. E.g.:
    tar -czvf Gameplay_6_MyName.tgz directory
    (Please do not include jquery.js or modernizr.js files in the archive. Links are OK.)
    E-mail the archive to the instructor.