Overview

Your goal is to create a significant HTML5 Media Experience or Digital Game that is aesthetically pleasing and highly interactive.

Ideally the experience will run in all modern browsers, but at a bare minimum it must run in Chrome.

The objective of this project is for you to demonstrate your mastery of HTML5/CSS/JS and <canvas> programming in a rich media context. You will be evaluated on your creativity, the quality of the experience you create, the soundness of your programming, and how far you went beyond what we did in class, as described below.

The assignment is worth 22% of your final grade, is graded out of 100 points, and no late submissions will be accepted, so post what you have before the due date to receive partial credit. An A grade will be awarded only for meeting the requirements below, and going sufficiently "above and beyond" what we did in the Boomshine exercise.

Requirements

1. Media Requirements: (20%)

• Sound (required on game only):
  • A background sound that loops
  • Effect sounds
  • Keep your sound file sizes as small as possible. Primarily use MP3's; WAV's are OK for short sound effects
  • DO NOT use the sounds that were given to you in class
• Images:
  • Consistent theme or style
  • Optimized bitmap Graphics (JPEG or PNG) must be used, NOT BMP, TIFF, and so on
  • DO NOT use the graphics that were given to you in class
• Text/Fonts:
  • Text must be displayed in theme appropriate embedded Web Fonts - Times New Roman need not apply!
  • Size the text so that it is easy to read
  • google.com/fonts and fontsquirrel.com have a wide variety of free fonts
• Canvas Drawing/Animation:
  • Most or all of the game/experience will be drawn into an HTML5 <canvas> element utilizing the Canvas 2D drawing API.
  • Must draw an image on the canvas (HTML5 Canvas Image Tutorial)
  • Must draw an image animation on the canvas using a Sprite Sheet
  • Must draw a particle system to the canvas
  • Animations must be smoothed using dt ("delta time")
  • Must cancel animations with window.cancelAnimationFrame()
  • The project should have visually engaging graphics and effects.
  • Use a variety of <canvas> capabilities including the ability to draw paths, bitmaps, gradients, shadows, the globalCompositeOperation property, and so on.

2. Interaction Requirements (20%)

• Control (game)
  • The player should be able to control at least one sprite on the screen using mouse and/or keyboard.
  • Controls should be easy to use, responsive and intuitive.
  • Game must have keyboard controls. Map controls to both WASD and arrow keys if appropriate. DO NOT map to PC-only keys like PageUp or the Home key.
  • Use a "key daemon" array to capture multiple key inputs simultaneously. For example, shift+space may jump higher than a normal jump (space) or shift + an arrow may run faster than just a normal arrow key.
• Control (experience)
  • HTML Widgets checkboxes, radio buttons, sliders, drop-downs, etc - will allow the user to alter parameters of the experience
  • The user should feel they have sufficient and satisfying control of the experience.
  • Experience must have keyboard and/or mouse controls. For example, hitting different keys may play different sounds or hitting an arrow key may change the direction of a visual
  • Experience must capture multiple key inputs simultaneously. For example, if keys play notes, two keys should play two notes simultaneously. If drawing on the screen with the mouse and ctrl makes the drawing semi-transparent and space leaves a mouse trail, then holding ctrl+space while drawing should leave both a mouse trail and draw semi-transparently while the mouse is drawing.
  • On the whole, mouse controls are more intuitive, use them rather then keyboard controls wherever possible.

3. Usability Requirements (20%)

• Experience must pause/unpause with window.onblur and window.onfocus
• Teaching: The player should have no trouble figuring out how to play the game/experience. You should probably provide instructions.
• Feedback: The player should intuitively know what "state" the game/experience is in, and if their actions hindered or helped their progress in the game. A score should be visible to the player.
• Difficulty: Be nice to your players. The game should be easy at first, then it gets harder. The player shouldn't die in 2 seconds like Flappy Birds.
• Mouse and onscreen UI buttons preferred over interface keyboard shortcuts. The easiest way to do this is an absolute positioned <button> tag over the canvas element. Alternatively, you can create "canvas buttons" by drawing a rounded rectangle "button" into the canvas.
• Game only Requirement - Screens
  At a bare minimum there should be three screens (i.e. states):
  • Title/Intro/Instructions screen or screens
  • Main game screen
  • Game over/Play Again? screen
• Important! Put your name somewhere in the project so that it is visible to the user. A game will have your name either on a title screen or game over screen.

4. Experience/Game Design Requirements (20%)

• Meeting your plan:
  • It's expected that your game/experience will change from the proposal, but overall you need to create an approximation of what you planned.
• Experience Specific Requirements:
  These are hard to quantify, because the subject of the experience projects varies widely. Broadly we'll look at these characteristics:
  • Utility - what does the experience do ?
  • Interactivity - can the user control the experience?
  • Aesthetics - how does it look ? How does is sound ?
  • User Engagement & Delight - how does the user feel?
• Game Specific Requirements - an "approachable" game:
  • Playable by at least one person, has rules, has a win/lose condition?
  • Do player choices matter?
  • Does your game have depth ?
  • As the player learns how to play the game can they improve?
  • Is the game/experience fun and/or engaging and something people (besides you and your friends) would want to play?
  • Do your sprites behave in interesting ways that go beyond what we did in class?

5. Coding Requirements (20%)

• Libraries that completely encapsulate the canvas drawing API such as Three.js, Babylon.js, Processing.js, D3.js, and EaselJS are NOT ALLOWED. *
• Any and all JavaScript Game Engines (Phaser, Lime.js, Impact.js, Quintus.js, etc...) are NOT ALLOWED. *
• JS libraries may only be used with prior approval - if you feel you need one, just ask in advance!
• Pre-approved JS Library List:
  • SoundJS
  • TweenJS
  • victor.js (or similar vector library)
  • jQuery UI for Interactive Experience Projects
• JS Code:
  • Must preload images (See JS Image Slideshow Demo)
  • Must use object literals
  • Must use the module pattern
  • Must use least 2 new Function constructors (like Bullet, Enemy, ...) that were created by you.
• Code Conventions and Practices:
  • Separation of Concern/JS Module Pattern - there must be multiple JS files with logically related code grouped together so that each script has well-defined functionality.
  • D.R.Y. - Don't Repeat Yourself. Repeated blocks of nearly identical code should be factored out and placed in a separate function.
  • "use strict" at the top of every JS file
  • Function constructors that will be called with the new operator must be capitalized.
  • All other variable and function names must begin with a lowercase letter.
  • Every JS statement ends with a semi-colon - don't rely on the JS interpreter to insert them for you.
  • Always use the var keyword when declaring your variables.
  • Well-commented code. Each and every function gets a comment indicating what it does.
  • Delete or comment out your console.log() calls
• You will only receive credit for code that you write beyond what you've inherited from our ICEs.
• Any borrowed libraries or code fragments must be credited (author and URL) in both your code comments, and in the final documentation of the project.
• Both partners must produce code that appears in the final version of the project. Failing to do so will result in a grade penalty.

6. Penalties (There are no set values for penalties. The more penalties you make, the more points you will lose.)

• There are point deductions for:
  • Runtime errors
  • Poorly written or improper code - single character variables (besides loop iterators and such), unclear variable names, not indenting code, unused variables, using deprecated elements, etc
  • Violating the Academic Honesty Policy (see syllabus) will result in an F in the course and an email to the IGM department chair.

7. Quality Levels

• Good (Meet all requirements above reasonably well) = 90%
• Better (Go beyond expectations in 2 or more areas) = 95%
• Best (Go significantly beyond expectations in 2 or more areas) = 100%

Deliverables

1. Working Prototype (-10% if not done, late submissions not accepted)

Create a working prototype that illustrates the core mechanic of your game/experience.

• Prototype to show in class - see dropbox for due date.
• Final version, posted to both dropbox and web. The location of the live version will be put in the comments field of the dropbox. See dropbox for due date. Documentation (see below) will also be posted to the dropbox.

2. Documentation (-10% off of final grade if not completely done)

You will submit documentation. It's a good idea to document things as you are working on the project. Consider setting up a google doc right away so that you can posts links and other information there as you are working.

If you are working with a partner, each partner must submit separate documentation with the final project submission.

• Describe what changes were made in your game/experience from your original design
• Elucidate how you met the 5 categories of requirements, and be specific about any extras you did
• Discuss what went right and what went wrong. List what features you would have liked to add to the project if you'd had more time
• Declare any non-course resources (libraries, sounds, images, tutorials, sample code) you utilized. Note: You don't have to document that you used the code I gave you in class
• Precisely detail the contributions of each partner to the overall project
• Give yourself and your partner an overall grade on the project

3. Final Submission

• ZIP up and post. This is worth 25% of final grade
• Both partners must submit final documentation
• The professor reserves the right to assign different grades to team members if the quality of their contributions significantly diverges

Extras

• Saves and displays high scores with window.localStorage
• Exceptional visual design
• Unique gameplay or interaction paradigms
• Making really cool media from scratch
• Exceptional programming
• Stuff we didn't cover in class that you figured out on your own ...

Resources

• JS Canvas Physics
• Working with Objects
• Module Pattern
• Closures

Ideas

• HTML5 Media Experience Examples

  There are many kinds of applications you could create - here are some ideas:

  • Radically upgrading Project 1 with more presets, multiple screens, webcam input(s), cue points, and more web audio effects.
  • Ambient sound generator - here's a list of an ambient sound web sites
  • Web Audio Synthesizer - see html5audio.org for links to examples
  • Interactive Painting Application - apply game elemnts to a paint program. See DRIPS for ideas.
  • Photo/Video Manipulator - As we saw in Web Audio Visualizer-2, ctx.getImageData() can access the pixel data of anything that is drawn to the canvas (images, video, procedural graphics). See American Gothic in the palette of Mona Lisa: Rearrange the pixels for a creative spin on this.
  • Making things move, simulations, trees, artificial life - see the processing.org examples page (look for Topic Examples at the bottom of the page) Also check out Khan Academy's Natural Simulation page.
  • Browse the www.chromeexperiments.com page for more inspiration.
• HTML5 Game Examples

  Types of games include shooters, platformers, tile-based puzzles, etc. Choose an existing game genre or come up with something new!

  Note: a simple game that is well-executed is often better than an ambitious game that is incomplete.

  • Free PopCap Web Games
  • chain-reaction.goodgame - a list of Chain Reaction Games
  • Jay is Games - games tagged chainreaction
  • Bubbles - avoidance game
  • Hundreds -avoidance/"just one more try" abstract iOS game
  • Squares 2 - abstract avoidance game
  • Particle Blaster - Shooter
  • Petals - puzzle game
  • Pretentious Game - an abstract game with a strong narrative, and a theme of love, loss and persistence.
  • Mondrianism - abstract puzzle game
  • Koutack - puzzle game
  • Zombie Dice - "push your luck" game
  • Sinuous
  • Shoot the Moon
  • Falling Balls
  • 10 Second Run (DSI-Ware)