This document discusses developing HTML5 games. It outlines the game development process including ideation, design, coding, testing and release. It also describes gaming platforms and why hybrid games are useful. Finally, it provides an anatomy of an HTML5 game including the use of JavaScript for logic, canvas for graphics, audio for sound, and frameworks like Phaser for development.

1. GAME ON!
Developing HTML5 Games
Rajasekar
@rajzshkr

2. What/Why
Game?

3. Gaming Industry

4. Game Development Process
• Ideation
• Concept Document
• Game Design
• Leader boards/Profiling/ Points
• Art Design
• Coding
• Physics engines/AI Engines/ Testing
• Release
• Upgrading

5. Gaming Platforms

6. Why Hybrid Game?

7. Hybrid Frameworks
• Easel JS
• Construct 2
• Three.js
• Lime JS
• enchant.js
• Phaser JS
SRC - http://html5gameengine.com/

8. Anatomy of a Game
LOGIC JavaScript code
GRAPHICS canvas
INPUT onkeydown, onmousedown
SOUND Audio
MUSIC Audio
MULTIPLAYER Ajax, Web sockets
GAME ASSETS Images, Audio, Video and Binary
supported by browsers

9. Initiate Phaser
var game = new Phaser.Game(400, 490, Phaser.AUTO,
'game_div');

10. Gaming Logic
var main_state = {
preload: function() {
// Function called first to load all the assets
},
create: function() {
// Fuction called after 'preload' to setup the game
},
update: function() {
// Function called 60 times per second
},
};

11. Start the game
game.state.add('main', main_state);
game.state.start('main');