HTML5 Game Development Examples

Basic links

• Chrome A great browser for developers
• Firefox Another really great browser
• Komodo Edit My favorite multi-platform editor
• FileZilla A really nice FTP/SFTP tool
• HTML Bonus chapter Complete book chapter on HTML with examples
• CSS Bonus chapter Complete book chapter on CSS with examples

Building your own page

• Chapter 1 resources
• a simple adventure game
• game design plan
• basic web page
• adding an image
• adding a link
• adding a style
• using external CSS
• the external CSS file
• chooseTool.html
• software.html
• book.html

Building a Mad-lib

• Mad-lib
• alert.html
• input.html
• greet.html
• greetName.html
• greetOutput.html
• greetStyle.html
• externJs.html
• madLib diagram
• madlib css
• madlib javascript

Coding Like a Pro

• typeConv.html Converting data to the approriate type
• ifElse.html Making decisions with if statements
• forLoops.html repeating with for loops
• while.html repeating with while loops
• param.html passing parameters to functions
• basic arrays Storing data in arrays
• ants array simplifying the song with arrays

Making a Guessing Game

• rand100.html creating random numbers
• numGuess.html Making a number guessing game
• highLow.png Planning diagram for the number guesser
• numGuess.css CSS code for the number guesser
• numGuess.js JavaScript code for the number guesser

Introducing SimpleGame

• Basic Game Engine
• Template for your own games
• Drive a car
• screen sizes in the game engine
• The simplegame code (complicated...)

Creating Game Elements

• building a basic critter
• building the critter as a simple class
• adding a property
• adding a method
• building a sound effect object
• testing for collisions
• examining bounding rectangles
• distance-based collisions
• adding a timer

Getting to a Game

• frog game design diagram
• building the fly
• building the frog
• creating a reusable library
• combining the frog and fly
• handling collisions
• managing an array of flies
• adding the timer

Motion and Animation

• vector motion in space
• incorporating drag
• applying basic gravity
• incorporating orbital physics
• Newton's law of universal gravitation
• adding projectiles
• building a multi-state animation
• the sprite sheet used in the animation

Going Mobile

NOTE: These examples are designed for use on mobile devices with touch and tilt controls. They may not work well on a standard desktop machine. Check the chapter for how to make a program work with either mobile or standard controls.

• changing the scene's size and position
• Mobile version of frog game
• cache.manifest file for frog game
• adding a button to your game
• treating touch input as a virtual mouse
• reading virtual joystick data
• controlling a sprite with the virtual joystick
• automatically choosing input type
• using the virtual arrow keys
• reading accelerometer data
• calibrating the accelerometer

SimpleGame Library Documentation

• official documentation

Game Asset Resources

• dia A great diagramming program
• inkscape Super free vector-drawing program
• gimp terrific raster graphic program
• Ari's spritelib Terrific open-source sprite library
• Reiner's tilesets another great resource for 2D and 3D sprite images
• Open Game Art Super community with plenty of game resources
• Master sprite sheet for LPC Gimp file for creating custom characters
• openClipart.org Great library of open vector graphics images
• blender amazing 3D modeling and gaming tool
• Audacity extremely powerful open-source audio editing tool
• freesound searchable library of free and open sound effects
• soundjay another archive of sound effects
• bfxr.net cool 8-bit sound effect generator (Flash)

Key concepts of game engine

• basic canvas drawing dynamically on the canvas tag
• building an animation loop with setInterval()
• Reconciling angle measurements
• transformations in canvas
• Vector Projection:
  • understanding r and theta
  • building a triangle
  • using trigonometry notation
  • solving for dx and dy
  • solving for r and theta
• sound.txt Definition of Sound object in simpleGame
• reading the keyboard
• managing the touch interface
• collision and distance code from simpleGame
• boundary detection from simpleGame

Sample Games

• lunar lander custom collision checking, states, and gravity
• mail pilot top-down scroller, endless background
• marble tilt interface with keyboard backup
• whack a mole timer-based multi-state sprites
• platform scroller jumping, platform collision, dragging objects
• pong artificial 'stupidity' paddle-ball collision
• role-playing game character animation, simple combat model
• tanks multiplayer 1 computer, multi-sprite objects, artillery
• tile-based world tiles, maps, tile editor
• tic tac toe simple tiles, checking for wins, basic AI