More Related Content
Similar to jsFoo - HTML5 and Social Games (20)
jsFoo - HTML5 and Social Games
- 1. HTML 5, Social & Games
Gaurav Vaish
www.mastergaurav.com
www.edujini.com
Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
- 2. Starting Bits
Are 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 5
A 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” Parameters
User Centric:
• Usability
• Fluid interface
• Responsiveness
• “Smart” capabilities
Application / Game Centric:
• Memory
• Speed
• Bandwidth
• Updates & Notifications
www.edujini.com
Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
- 5. Canvas
The real playground for all drawing and animations
Key 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 Storage
New HTML 5 Object:
• localStorage
Properties & Functions:
• getItem(“”)
• setItem(“”, ?)
• removeItem(“”)
• clear()
• key(index)
• length
Event:
• onstorage
www.edujini.com
Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
- 9. History
Let’s just look at github.com
Object:
• history
Functions & properties:
• pushState(stateObj, title, url)
• replaceState(stateObj, title, url)
• popState()
• state
Events:
• onpopstate
www.edujini.com
Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
- 10. Offline / Cache
Simplest but very powerful
Directs browser to “always” cache the files
How 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 Me
Email: gaurav.vaish@gmail.com
GTalk: gaurav.vaish
Facebook: http://on.fb.me/mastergaurav
Twitter: http://twitter.com/mastergaurav
LinkedIn: http://www.linkedin.com/in/mastergaurav
Personal: http://www.mastergaurav.com
Thank You!
www.edujini.com
Copyright © 2011, Edujini Labs Pvt. Ltd. All rights reserved.
