Project 1: Arcade Game in HTML5 with a Twist
|
Collaboration Policy - Read carefully you must work on this project individually, you may discuss this assignment with other students in the class and ask and provide help in useful ways, preferable over our email list so we can all benefit from your great ideas. You may consult (but not copy) any outside resources you including books, papers, web sites and people. If you use resources other than the class materials, indicate / cite what you used along with your answer.
Assignment Day | January 26, 2016 (midnight) |
Due Date & Demo
|
Wednesday February 10, 2016 (Demonstrate on laptop in class, you must attend class, if you feel there may be a conflict, you will need to schedule your demo at an earlier date). [the demonstration will be either Feb 10 or Feb 11 (We or Thu), you will need to be ready to go on We). Showcase will follow, after demo in class. (volunteers showcase their projects in class and it will fullfill as a 'demo' grade). |
Objectives:
The purpose of this assignment is to highlight basic aspects of game programming, and it must illustrate at a minimum:- definition of graphical game objects,
- animation of graphical game objects,
- interaction (e.g., collision) between graphical game objects,
- user interaction with graphical game objects, and
- keeping score.
- and embed a personal twist.
Description:
For this assignment you will program a classic arcade game but with a twist in HTML5, and demonstrate fundamental aspects of game programming (see list above). Your game needs to be more advanced than the pong-like game demonstrated in class. It is expected that you select from classic games of varied sophistication, and it is excpted that you select a game that more sophisticated than pong demonstrated in class, up to the sophistication level of Pac-Man or (see Arcade Game Site). Both Pac-Man or Asteroids, are vievewed as challenging game, but they should be do-able games for this assignment.
Submission:
(for the below you may change the extension .txt if not plain text e.g., .doc, .pdf)
GRADING.txt: A description on how you met the grading rubric (see below table). You may copy paste these from REPORT.txt.
REPORT.txt should include minimally:
A description of your game (about 1 page), including the objective of the game, the graphical objects, how they animate, how they interact and how scoring work.
A set of screenshots of your game in action highlighting key events (minimally 1 screenshot).
User documentation, i.e. instructions for a new user on how to use your game
README.txt should includelist of files required to run your game, and how to get your code up and running (e.g., HTML5 file, CSS file - if separate, and image files needed).
SCREENSHOT.PNG: Provide a few screen shot of your games, illustrating important ascepts of the game (e..g, start screen, shot (hit)). These may be part of REPORT.txt.
A Gallery: You need to start a web page containing a gallery of your games that you will implement fo the class.
Grading Rubrics (subject to change until Feb 02, 2016)
Requirements |
Example / Entity |
Score/Points |
Definition of Game Objects | Ball / Paddle / Ghost / Pacman | 10 |
Animation of Game Objects | Moving ball, Paddle, Ghosts | 20 |
Interaction between Game Objects | Ball hits paddle, ghosts eats pacman | 20 |
Keeping Score (Some objective) | 10 |
|
Complexity (Fixing poing is the baseline) | Implementing Pong with some added sophistication, is the baseline and meets requirements for a maximum of an 80 pts, to go beyond 80 you will need to pick a more sophisticated game, e.g., Pacman or Asteroids can get you to 100. If you go beyond the Pacman, or A you may earn bonus points, up to 5 points. | 0-20 |
Documentation / Files | Readme file describe here how you fulfilled the rubrics), programming files (HTML5, CSS, Images), commented code | 15 |
Demo / Project Gallery | Web page / Prepared Demo | 6 |
Not Present During Demo -10 automatic deduction (separate criteria from being prepared). | ||
No | 101 |
Potential amendments to grade criteria:
* (the majority or a portion) of art work must be your own. [InkScape)
* effectiveness of the personal
twist - e..g, embed yourself into the game
* revision of the sophistication of the baseline.
Submission mechanics will be detailed next week.
Resources:
Learning Game Programming in HTML5
There are 4 environments/languages that you should get to know in order to be able to program in HTML5:- HTML - Hyper-Text Markup Language: the fundamental language interpreted by browsers
- CSS - Cascading Style Sheets: denes how things look in a web page
- JavaScript - - client-side scripting that denes how things behave in a web page
- HTML5 | newest whiz-bang version of HTML that includes expanded types of elements
HTML
These pages both discuss beginning, intermediate and advanced features of HTML.
CSS
If you know some HTML, but don't know any CSS, then start with a CSS Beginner tutorial, like this one:These pages both discuss beginning, intermediate and advanced features of CSS.
JavaScript
-
If you don't know any JavaScript, then start with a JavaScript Basics tutorial, like this one:
- http://www.w3schools.com/js/
HTML5
You should also go through the HTML5 Canvases class exercises.
Books
If you want more detail than the tutorials provide, then here are some good in-depth books, some form O'Reeilly, which should be available both in print and electronic format:- JavaScript: The Definitive Guide, 6th Edition. by David Flanagan. O'Reilly Media, 2011
- CSS: The Definitive Guide, 3rd Edition. by Eric A. Meyer. O'Reilly Media, 2006
- Introducing HTML5 Game Development, by Jesse Freeman. O'Reilly Media, 2012. (recommended, may be required, instructor uses this one)
- HTML5: Up and Running. by Mark Pilgrim. O'Reilly Media, 2010.
- Core HTML5 Canvas, Graphics, Animation, and Game Development. by David Geary. Prentice Hall.
Online Tutorial:
- http://www.w3schools.com/
This site contains tutorials on HTML, HTML5, CSS, CSS3, JavaScript (and many other things).
-
http://www.htmldog.com/
This site contains tutorials on HTML and CSS, and as well as references
-
http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
Available PDF downloadable for free.