jsFoo - HTML5 and Social Games

11,070 views

Published on

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

1st October, 2011

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
11,070
On SlideShare
0
From Embeds
0
Number of Embeds
7,606
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jsFoo - HTML5 and Social Games

  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.

×