Your SlideShare is downloading. ×
jsFoo - HTML5 and Social Games
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

jsFoo - HTML5 and Social Games

9,144

Published 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

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
9,144
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
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. 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.

×