1. Criando Jogos com HTML 5
José Antonio “jalf” Leal de Farias
CEO – Stairs Game Studio
Microsoft Most Valuable Professional

2. Quem é esse cara?
 DirectX/XNA MVP
 CEO Stairs Studio
 http://www.stairs.com.br
 Criador e Administrador do Sharpgames
 http://www.sharpgames.net
 Livros

3. Agenda
 Introdução ao HTML 5
 Media
 Canvas
 Games em JavaScript
3

4. Introdução ao HTML5
Como se cria jogos com HTML?

5. O Que é HTML5
 HTML5 – a próxima versão do HTML
 Em desenvolvimento
 Longe da versão final
 Aos cuidados do grupo de HTML do W3C
 Primeira especificação pública em 2008
 Partes do HTML5 estão sendo implementados
antes de toda a especificação estar pronta
5

6. Demo
Jogos em HTML5

7. Novos Tags de Mídia
 Media Tags
 <audio>
 Attributos: autoplay, controls, loop, src
 <video>
 Attributos: autoplay, controls, loop,
height, width, src
<audio width="360" height="240" controls= "controls" >
<source src="someSong.mp3" type="audio/mp3">
</source>
Audio tag is not supported
</audio>

8. Canvas
 Permite o rendering scriptado de elementos
2D e bitmaps
 Baixo nível, procedural
 É uma região desenhável da página HTML
 Usado para construir
gráficos, animações, jogos e composição de
imagens

9. Exemplo Canvas
 Em HTML:
<canvas id=“meuCanvas" width="200" height="200">
Isso aparece se o seu browser não suportar Canvas.
</canvas>
 Acesso via JavaScript:
var example = document.getElementById('meuCanvas');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

10. Exemplo Canvas
 Em HTML:
<canvas id=“meuCanvas" width="200" height="200">
Isso aparece se o seu browser não suportar Canvas.
</canvas>
 Acesso via JavaScript:
var example = document.getElementById('meuCanvas');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

11. Demo
Vamos ao código

12. Veja Também
 HTML 5 Rocks – Examples, Demos, Tutorials
 http://www.html5rocks.com/
 Demos HTML 5
 http://html5demos.com/
 Internet Explorer 9 Test Drive for HTML 5
 http://ie.microsoft.com/testdrive/
 Apple Safari HTML 5 Showcases
 http://www.apple.com/html5/
 Dive into HTML 5
 http://diveintohtml5.org/

13. Vamos criar Jogos?
José Antonio “jalf” Leal de Farias
Microsoft Most Valuable Professional
jalf@sharpgames.net
www.sharpgames.net
Twitter: @sharpgames