HTML5 Games 0.1: Speedy Sprite

HTML5 Games 0.1:Speedy SpriteBy:Debidatta SatapathyComputer Science & EngineeringSec-B ,Regd. No: 0711012073

Guided By:Prof. Debahuti Mishra

ContentsIntroductionCreating a CanvasGame LoopHello WorldCreating The PlayerKeyboard ControlsAdding more Game ObjectsLoading and Drawing ImagesCollision DetectionSoundsReferencesIntroductionMake games using CANVAS element of HTML5Basic Terminology:SpritesFPSCANVAS

SpritesA two dimensional image or animation that can be integrated into a large scene.Used to describe graphical objects handled separately of the memory bitmap of video display.Sprites are a method of integrating unrelated bitmaps so that they appeared to be part of the normal bitmap on a screen.

Canvas New HTML5 element or TAGMakes graphics more interactiveAdvance feature of manipulating graphicsFPS Frames Per Second Creating a CanvasIn 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;var CANVAS_HEIGHT=320;var canvasElement=$("");var canvas= canvasElement.get(0).getContext("2d");canvasElement.appendTo('body');

Game loopIn 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);Hello WorldUpdate method for drawing

function draw() {canvas.fillStyle = black canvas.fillText("Sup Bro!", 50, 50);}Creating the playerAn object to hold the player data and be responsible for things like drawingKeyboard controls

Using jQuery HotkeysPlayer movement

Adding more game objects

ProjectilesEnemies

Next StepsLoading and drawing imagesCollision detectionSound

Referenceshttp://www.facebook.com/note.php?note_id=491691753919http://www.html5rocks.com/tutorials/casestudies/no_tears_guide_to_html5_games.html#toc-introductionhttps://github.com/facebook/jsgamebench