Your SlideShare is downloading. ×
0
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Html5 games 0.1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 games 0.1

1,355

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,355
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 Games 0.1:Speedy Sprite
    By:
    DebidattaSatapathy
    Computer Science & Engineering
    Sec-B ,Regd. No: 0711012073
    Guided By:
    Prof. Debahuti Mishra
  • 2.
  • 3.
  • 4.
  • 5.
  • 6. Contents
  • Introduction
  • Sprites
    • A two dimensional image or animation that can be integrated into a large scene.
    • 21. Used to describe graphical objects handled separately of the memory bitmap of video display.
    • 22. Sprites are a method of integrating unrelated bitmaps so that they appeared to be part of the normal bitmap on a screen.
  • 23.
  • 24. Canvas
    • New HTML5 element or TAG
    • 25. Makes graphics more interactive
    • 26. Advance feature of manipulating graphics
    FPS 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

×