• Save
jsFoo - HTML5 and Social Games
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jsFoo - HTML5 and Social Games

  • 8,498 views
Uploaded on

Presentation of my talk on "Effective Gaming Techniques using HTML5 - Single, Multi-player and Social Games" at jsFoo, Bangalore ...

Presentation of my talk on "Effective Gaming Techniques using HTML5 - Single, Multi-player and Social Games" at jsFoo, Bangalore

1st October, 2011

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
8,498
On Slideshare
2,935
From Embeds
5,563
Number of Embeds
10

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 5,563

http://www.mastergaurav.com 3,658
http://blogs.mastergaurav.com 1,877
http://paper.li 9
http://translate.googleusercontent.com 6
http://abtasty.com 4
http://blogs.jayesha.com 3
http://a0.twimg.com 2
http://webcache.googleusercontent.com 2
http://wonder-tonic.com 1
http://prlog.ru 1

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. HTML 5, Social & GamesGaurav Vaishwww.mastergaurav.com www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 2. Starting BitsAre you a JavaScript geek?Have you worked with HTML 5?Have you ever developed any computer game?Have you ever developed any pure-JavaScript game? www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 3. HTML 5A lot of new crazy stuff!Key items for our purpose: • Canvas • Audio • Video • Local Storage • History • Offline (Cache!) www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 4. “Effective Development” ParametersUser Centric: • Usability • Fluid interface • Responsiveness • “Smart” capabilitiesApplication / Game Centric: • Memory • Speed • Bandwidth • Updates & Notifications www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 5. CanvasThe real playground for all drawing and animationsKey features: • Drawing shapes • Copying an image / video • Transformations  Scaling • Save / Restore www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 6. Canvas (contd.)How you actually draw / animate: • Define border and/or fill details • Draw shapes or Copy image / video-snapshot • Fill and Stroke • Do this periodically  Clean the viewport www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 7. Hands On…Let us • Draw a simple rectangle, • Copy an image, and • Take snapshot of a video! www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 8. Local StorageNew HTML 5 Object: • localStorageProperties & Functions: • getItem(“”) • setItem(“”, ?) • removeItem(“”) • clear() • key(index) • lengthEvent: • onstorage www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 9. HistoryLet’s just look at github.comObject: • historyFunctions & properties: • pushState(stateObj, title, url) • replaceState(stateObj, title, url) • popState() • stateEvents: • onpopstate www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 10. Offline / CacheSimplest but very powerfulDirects browser to “always” cache the filesHow to do: <html manifest=“file”>Contents: • CACHE MANIFEST • File-list www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 11. How to make all this “effective”? www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
  • 12. Contact MeEmail: gaurav.vaish@gmail.comGTalk: gaurav.vaishFacebook: http://on.fb.me/mastergauravTwitter: http://twitter.com/mastergauravLinkedIn: http://www.linkedin.com/in/mastergauravPersonal: http://www.mastergaurav.com Thank You! www.edujini.com Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.