Project 1: Arcade Game in HTML5 with a Twist

  • Overview of Submission:
    (1) Email :
          a)
    link / URL to your gallery page,
          b) a game link so you can just click to get directly to the game, and a
          c) a youtube link (private link is OK)

    to both the TA and instructor.
    maria AT cs.uga.edu.
    Krishma N A kn27513 AT uga.edu
  • (2) Use the submit program on nike to submit source code and other required files.
  • (3) On youtube create an online demonstration highlighting all the required (or optional) elements you have implemented. Also send a link to this in the email to the instructor and TA.

 

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 piazza 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 or cite what you used along with your answer.

Assignment Day: January 25, 2017 Wednesday (midnight)

Due Date & Demo:

 

Wednesday February 08, 2017 (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). You assignment will not be graded without a live demonstration, and there will also be point deducted for missing a live demo.

Showcase will follow, after the demo in class (volunteers showcase their projects in class and it will fullfill as a 'presentation' grade).

 

 

Objectives:

The purpose of this assignment is to highlight basic aspects of game programming, and it must illustrate at a minimum:
  1. definition of graphical game objects,
  2. animation of graphical game objects,
  3. interaction (e.g., collision) between graphical game objects,
  4. user interaction with graphical game objects, and
  5. keeping score.
  6. and to embed a personal twist (more on this later).

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 a pong-like game, or the break out game demonstrated in class. It should be more complex than Galega. Hint: Galega is similar to breakout. It is expected that you select from classic games of varied sophistication, and it is expected that you select a game that more sophisticated than pong or Galega, up to the sophistication level of Pac-Man or (see Arcade Game Site) Tetris. Note a full fledge Tetris is in the upper realm in complexity.

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 each of the grading rubrics (see below table). You may copy paste these from REPORT.txt.

REPORT.pdf 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.pdf.

A Gallery: You need to start a web page containing a gallery of your games that you will implement for the class. Add a link of this game to your gallery.

Youtube Video: You need recored a youtube video (or vimeo) demontrating the game. Please address how you fulfilled all the grading criteria below.

Grading Rubrics:

Requirements
Example / Entity
Pts
Definition of Game Objects Ball / Paddle / Ghost / Pacman / Includes quality of your own pixel ART.
10
Animation of Game Objects Sprite Sheet Moving ball, Paddle, Ghosts / Includes the quality of your own pixel art.
10
Interaction between Game Objects Ball hits paddle, ghosts eats pacman. This is essentially collision - friendly or unfriendly.
10
Keeping Score (or some objective, reach destination) Effective objective. Be sure to state the objective in the readme file and how you fulfilled it.
5
Complexity (Fixing poing is the baseline)

Implementing Pong with some added sophistication, is the baseline and meets requirements for a maximum of a final grade of 75. i.e., you willl need to go beyond the Pong, Breakout, or Galega complexity threshold for a higher grade.

'To get to 80 you will need to pick a more sophisticated game, e.g., Pacman or Tetris your baseline is out of a 100.

25
Overall look & feel Art of entities, objects, background, foreground flows nicely together, feel of play well executed (not laggy).
5
Effectiveness of personal twist. e.g., embed yourself in the game, make the game your own, go beyond just making a copy of the original game.
10
Documentation Readme file describe here how you fulfilled each of the rubrics). 5pts
Gallery Link to game. 5pts
Commented code 5 pts
15
Demo / Gallery/You Tube Prepared Demo (5 pts) Assessed via inclass check.
You tube video (5pts)
10
Total:  
100
Deductions: Not Present During the Demo a -10 automatic deduction (separate criteria from being prepared).
-10
     

 

Additional Requirements:

  1. All assets needs to be your own. You may use Photoshop, Gimp, Piskel (or something similar), Inkscape, and javascript drawings (e.g., rectangles, circles and arcs).
  2. Effectiveness of personal twist - e.g., embed yourself in the game, make the game your own, go beyond just making a copy of the original game.

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:
  1. HTML - Hyper-Text Markup Language: the fundamental language interpreted by browsers
  2. CSS - Cascading Style Sheets: de nes how things look in a web page
  3. JavaScript - - client-side scripting that de nes how things behave in a web page
  4. HTML5 | newest whiz-bang version of HTML that includes expanded types of elements


HTML

If you don't know any HTML, then start with an HTML Beginner tutorial, like this one:

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:
  1. http://www.w3schools.com/js/


HTML5

If you don't know anything about HTML5, then start with an HTML5 tutorial, like either of these:

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:
  1. JavaScript: The Definitive Guide, 6th Edition. by David Flanagan. O'Reilly Media, 2011
  2. CSS: The Definitive Guide, 3rd Edition. by Eric A. Meyer. O'Reilly Media, 2006
  3. Introducing HTML5 Game Development, by Jesse Freeman. O'Reilly Media, 2012. (recommended, may be required, instructor uses this one)
  4. HTML5: Up and Running. by Mark Pilgrim. O'Reilly Media, 2010.
  5. Core HTML5 Canvas, Graphics, Animation, and Game Development. by David Geary. Prentice Hall.

 

Online Tutorial:
  1. http://www.w3schools.com/

    This site contains tutorials on HTML, HTML5, CSS, CSS3, JavaScript (and many other things).

  2. http://www.htmldog.com/
    This site contains tutorials on HTML and CSS, and as well as references

Awesome Cheat Sheet:


.