This document provides an introduction to creating HTML5 games using the canvas element. It discusses key concepts like sprites, frames per second (FPS), and the canvas. It then demonstrates how to set up a game loop to continuously update and redraw the game, create a basic "Hello World" example, and add a player object that can be moved with keyboard controls. Finally, it outlines next steps for the game like loading images, collision detection, and sound.

1. HTML5 Games 0.1:Speedy Sprite By: DebidattaSatapathy Computer Science & Engineering Sec-B ,Regd. No: 0711012073 Guided By: Prof. Debahuti Mishra

7. Creating a Canvas

8. Game Loop

9. Hello World

10. Creating The Player

11. Keyboard Controls

12. Adding more Game Objects

13. Loading and Drawing Images

14. Collision Detection

15. Sounds

17. Basic Terminology:

18. Sprites

19. FPS

21. Used to describe graphical objects handled separately of the memory bitmap of video display.

25. Makes graphics more interactive

26. Advance feature of manipulating graphicsFPS Frames Per Second

27. Creating a Canvas In order to draw things, we'll need to create a canvas. Because this is a No Tears guide we'll be using jQuery. var CANVAS_WIDTH=480; varCANVAS_HEIGHT=320; varcanvasElement=$("<canvas width='" +CANVAS_WIDTH+"'height='"+ CANVAS_HEIGHT+"'></canvas>"); var canvas= canvasElement.get(0).getContext("2d"); canvasElement.appendTo('body');

28. Game loop 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. var FPS=30; setInterval(function() { update(); draw(); },1000/FPS);

29. Hello World Update method for drawing functiondraw() { canvas.fillStyle = “black“ canvas.fillText("Sup Bro!", 50, 50); }

30. Creating the player An object to hold the player data and be responsible for things like drawing Keyboard controls Using jQuery Hotkeys Player movement Adding more game objects Projectiles Enemies

31. Next Steps Loading and drawing images Collision detection Sound

32. References http://www.facebook.com/note.php?note_id=491691753919 http://www.html5rocks.com/tutorials/casestudies/no_tears_guide_to_html5_games.html#toc-introduction https://github.com/facebook/jsgamebench