Html5 games 0.1
Upcoming SlideShare
Loading in...5
×
 

Html5 games 0.1

on

  • 1,632 views

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

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

Statistics

Views

Total Views
1,632
Views on SlideShare
1,632
Embed Views
0

Actions

Likes
1
Downloads
31
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 games 0.1 Html5 games 0.1 Presentation Transcript

  • HTML5 Games 0.1:Speedy Sprite
    By:
    DebidattaSatapathy
    Computer Science & Engineering
    Sec-B ,Regd. No: 0711012073
    Guided By:
    Prof. Debahuti Mishra
  • Contents
    • 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
  • Introduction
    • Make games using CANVAS element of HTML5
    • Basic Terminology:
    • Sprites
    • FPS
    • CANVAS
  • Sprites
    • A 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 TAG
    • Makes graphics more interactive
    • Advance feature of manipulating graphics
    FPS Frames Per Second
  • 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');
  • 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);
  • Hello World
    Update method for drawing
    functiondraw() {
    canvas.fillStyle = “black“
      canvas.fillText("Sup Bro!", 50, 50);
    }
  • 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
  • Next Steps
    Loading and drawing images
    Collision detection
    Sound
  • 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