Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 Games 0.1:Speedy Sprite<br />By:<br />DebidattaSatapathy<br />Computer Science & Engineering<br />Sec-B ,Regd. No: 0...
Contents<br /><ul><li>Introduction
Creating a Canvas
Game Loop
Hello World
Creating The Player
Keyboard Controls
Adding more Game Objects
Loading and Drawing Images
Collision Detection
Sounds
References</li></li></ul><li>Introduction<br /><ul><li>Make games using CANVAS element of HTML5
Basic Terminology:
Sprites
Upcoming SlideShare
Loading in …5
×

Html5 games 0.1

1,558 views

Published on

Its all about the new java script gaming using HTML5 canvas tag

Published in: Technology
  • Be the first to comment

Html5 games 0.1

  1. 1. HTML5 Games 0.1:Speedy Sprite<br />By:<br />DebidattaSatapathy<br />Computer Science & Engineering<br />Sec-B ,Regd. No: 0711012073<br />Guided By:<br />Prof. Debahuti Mishra<br />
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6. Contents<br /><ul><li>Introduction
  7. 7. Creating a Canvas
  8. 8. Game Loop
  9. 9. Hello World
  10. 10. Creating The Player
  11. 11. Keyboard Controls
  12. 12. Adding more Game Objects
  13. 13. Loading and Drawing Images
  14. 14. Collision Detection
  15. 15. Sounds
  16. 16. References</li></li></ul><li>Introduction<br /><ul><li>Make games using CANVAS element of HTML5
  17. 17. Basic Terminology:
  18. 18. Sprites
  19. 19. FPS
  20. 20. CANVAS</li></li></ul><li>Sprites<br /><ul><li>A two dimensional image or animation that can be integrated into a large scene.
  21. 21. Used to describe graphical objects handled separately of the memory bitmap of video display.
  22. 22. Sprites are a method of integrating unrelated bitmaps so that they appeared to be part of the normal bitmap on a screen.</li></li></ul><li>
  23. 23.
  24. 24. Canvas<br /><ul><li>New HTML5 element or TAG
  25. 25. Makes graphics more interactive
  26. 26. Advance feature of manipulating graphics</li></ul>FPS Frames Per Second<br />
  27. 27. Creating a Canvas<br />In order to draw things, we'll need to create a canvas. Because this is a No Tears guide we'll be using jQuery.<br />var CANVAS_WIDTH=480;<br />varCANVAS_HEIGHT=320;<br />varcanvasElement=$("<canvas width='" +CANVAS_WIDTH+"'height='"+ CANVAS_HEIGHT+"'></canvas>");<br />var canvas= canvasElement.get(0).getContext("2d");<br />canvasElement.appendTo('body');<br />
  28. 28. Game loop<br />In order to simulate the appearance of smooth and continuous gameplay, we want to update the game and redraw the screen just faster than the human mind and eye can perceive.<br />var FPS=30;<br />setInterval(function() { <br /> update(); <br /> draw(); },1000/FPS);<br />
  29. 29. Hello World<br />Update method for drawing<br />functiondraw() {<br />canvas.fillStyle = “black“<br />  canvas.fillText("Sup Bro!", 50, 50);<br />}<br />
  30. 30. Creating the player<br />An object to hold the player data and be responsible for things like drawing<br />Keyboard controls<br />Using jQuery Hotkeys<br />Player movement<br />Adding more game objects<br />Projectiles<br />Enemies<br />
  31. 31. Next Steps<br />Loading and drawing images<br />Collision detection<br />Sound<br />
  32. 32. References<br />http://www.facebook.com/note.php?note_id=491691753919<br />http://www.html5rocks.com/tutorials/casestudies/no_tears_guide_to_html5_games.html#toc-introduction<br />https://github.com/facebook/jsgamebench<br />

×