HTML5: All Your Games Are Belong To Us – Building Games in HTML5 and JavaScript – Zero to Hero

View Github Repository Open presentation in a new window

eonarheim

See all presentation from eonarheim

HTML5: All Your Games Are Belong To Us – Building Games in HTML5 and JavaScript – Zero to Hero

2 1

AllYourGamesPresentation

Presentation on Building HTML5 Games : All Your Games Are Belong To Us

On Github eonarheim / AllYourGamesPresentation

HTML5: All Your Games Are Belong To Us

Building Games in HTML5 and JavaScript

Erik Onarheim / @ErikOnarheim

erikonarheim.com

About Me

Software Developer

General Mills

Video Game Enthusiast

Artist

Hacker

ExcaliburJS.com
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

Zero to Hero

HTML5 Games

The Canvas

Tale of Two Widths

<canvas width="100" height="100"></canvas>
canvas {
   width: 100px;
   height: 100px;
}
<canvas width="100" height="100"></canvas>
canvas {
   width: 300px;
   height: 100px;
}

Show me the code

Let's Draw Something

X

Bam!

Make it Move!

X

BOOYAH!

Timing is everthing

Timing Calculation

Time Based Movement

X

Magic!

Game Loop

X

Actor/Entity

X

Collision Detection

Bounding Areas

Spatial Partitioning

Ray Casting

Separating Axis Theorem

Circles

Rectangles

Axis Aligned Bounding Box

X

Simple AABB

Implementation

X

Spatial Partitioning

Object Grouping

Key Events

X

Key Combinations

X

Konami Code

Sound

  • Web Audio API
  • HTML5 Audio
  • Fallbacks

SoundManager2

jPlayer

MediaElement.js

SoundManager2 - Flash Fallback jPlayer - Flash Fallback jquery plugin (audio and video) MediaElement - Flash or Silverlight that mimics the HTML5 audio and video tags

HTML5 Audio

Image from http://www.hanselminutes.com

Code

X
Play

Web Audio Api

Code

X
Play

Sprite Animation

Code

X

Boom!

Making a Game

X

StarShootr

Pause

Game Engines

  • ExcaliburJS.com
  • Impact.js
  • Phaser.io
  • Pixi.js
  • Babylon.js

Resources

  • Presentation
    • https://github.com/eonarheim/
  • Libraries
    • SoundManager2
    • Reveal.js
    • Ace Code Editor - http://ace.c9.io
  • Books
    • Core HTML5 Canvas - David Geary
    • Secrets of a JavaScript Ninja - John Resig
    • JavaScript: The Good Parts - Douglass Crockford
  • YouTube Videos
    • Turning the Web up to 11
    • Diving Deep into Canvas

Thanks!

ERIK ONARHEIM