HTML5 Game Development – Why HTML5?

View Github Repository Open presentation in a new window

bmatupas

See all presentation from bmatupas

HTML5 Game Development – Why HTML5?

9 3

html5-gamedev

On Github bmatupas / html5-gamedev

HTML5 Game Development

photo from: truevalhalla.com

- Benj Tupas -

Mobile and Web Developer bmatupas@gmail.com

What to Expect

Why HTML5?

isquareinfotech.com

Execution

amtevolve.com

Downside: Canvas Support

Browser Version Chrome 3.0+ Firefox 3.0+ Safari 3.0+ Opera 10.0+ IE 9.0+

Growth

Demos

helloracer.com/racer-s triggerrally.com/track/RF87t6b6/drive hexgl.bkcore.com/play phoboslab.org/xibalba

What is needed?

Jquery
  • jquery.com/download/
Angry bird
  • bit.ly/html5-gamedev-angry-bird
Super Mario
  • bit.ly/html5-gamedev-super-mario

Initial Setup

Create a project folder. Create a "libs" folder inside.
  • Paste "jquery-1.11.3.min.js"
Create index.html

1. Hello World

2. Game Loop

3. Adding Entities - Setup

Transfer the script to a file. Create a "js" folder.
  • Create "game.js" inside.
Copy the script from the html file to the game.js file. Include the game.js file to the html file.

3. Adding Entities - Demo

4. Animation and Inputs

What's next?

udacity.com/wiki/cs255 html5canvastutorials.com Search "html5 game" packtpub.com and oreilly.com impactjs.com threejs.org phonegap.com or cordova.apache.org html5gamedevelopment.com

Code: github.com/bmatupas/html5-gamedev

Demos: github.com/bmatupas/html5-gamedev/tree/master/demos

HTML5 Game Development photo from: truevalhalla.com - Benj Tupas - Mobile and Web Developer bmatupas@gmail.com