Criando Jogos com HTML 5             José Antonio “jalf” Leal de Farias                    CEO – Stairs Game Studio       ...
Quem é esse cara? DirectX/XNA MVP CEO Stairs Studio   http://www.stairs.com.br Criador e Administrador   do Sharpgames...
Agenda Introdução ao HTML 5 Media Canvas Games em JavaScript                                  3
Introdução ao HTML5 Como se cria jogos com HTML?
O Que é HTML5 HTML5 – a próxima versão   do HTML  Em desenvolvimento    Longe da versão final  Aos cuidados do grupo d...
DemoJogos em HTML5
Novos Tags de Mídia Media Tags  <audio>     Attributos: autoplay, controls, loop, src  <video>     Attributos: autopl...
Canvas Permite o rendering scriptado   de elementos 2D e bitmaps Baixo   nível, procedural É uma região   desenhável da...
Exemplo Canvas Em HTML: <canvas id=“meuCanvas" width="200" height="200">  Isso aparece se o seu browser não suportar Canv...
Exemplo Canvas Em HTML: <canvas id=“meuCanvas" width="200" height="200">  Isso aparece se o seu browser não suportar Canv...
DemoVamos ao código
Veja Também HTML 5 Rocks – Examples, Demos, Tutorials    http://www.html5rocks.com/ Demos HTML 5    http://html5demos....
Vamos criar Jogos?José Antonio “jalf” Leal de FariasMicrosoft Most Valuable Professionaljalf@sharpgames.netwww.sharpgames....
Upcoming SlideShare
Loading in...5
×

Criando Jogos com HTML5

4,171

Published on

2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,171
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Criando Jogos com HTML5

  1. 1. Criando Jogos com HTML 5 José Antonio “jalf” Leal de Farias CEO – Stairs Game Studio Microsoft Most Valuable Professional
  2. 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. 3. Agenda Introdução ao HTML 5 Media Canvas Games em JavaScript 3
  4. 4. Introdução ao HTML5 Como se cria jogos com HTML?
  5. 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. 6. DemoJogos em HTML5
  7. 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. 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. 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. 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. 11. DemoVamos ao código
  12. 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. 13. Vamos criar Jogos?José Antonio “jalf” Leal de FariasMicrosoft Most Valuable Professionaljalf@sharpgames.netwww.sharpgames.netTwitter: @sharpgames

×