2013 JFFC - HTML5 Game Development

Slide presentation during the "Junior Form, Function and Class - Philippine Web Design Student Conference 2013" at the University of Sto. Tomas, Philippines

Transcript

2. Ralph Vincent Regalado • Instructor at De La Salle University • Member of DLSU Net-Centric Computing Laboratory • Head of DLSU Nokia Mobile Center • Teaches Mobile and Web Development Course
3. What to expect? HTML5 Introduction HTML5 Canvas Create games using HTML5 So?
4. What “I” expect? Listen attentively. Facebook, Twitter, etc.! Don’t be shy! Enjoy.
5. HTML5 Introduction
6. History HTML 4.0 HTML 4.01 XHTML 1.0 Web Applications 1.0 HTML 5
7. HTML5 Elements Structure Elements Content Elements section hgroup footer article aside figure figcaption mark time Media Elements audio video canvas Form Input types Input attributes
8. We are NOT HTML5! CSS3 Geolocation API SVG Web Storage WebSockets
9. HTML5 Canvas
10. HTML5 Canvas My favorite feature of HTML. Allows you to manipulate graphics or create them from scratch. Used with together Javascript to create dynamic graphics and animations.
11. 2d Rendering Context Provides all the necessary methods and functionality to draw on. You draw on the 2d rendering context and you access and display it through the canvas.
12. 2d Rendering Context Follows a coordinate system
13. Let’s draw some objects Note We will be using Jquery Javascript Library in all of our examples.
14. Let’s put some animation! Note We will be using the sprites created by Team Excelsior for their game Squishy Tales
15. Creating Games using HTML5
16. WE DON’T NEED SLIDES! Challenge Accepted!
17. So?
18. What to do after? Rejoice! Port your apps! Use PhoneGap or other cross-mobile platforms. READ and LEARN MORE!
19. Im not an HTML5 Master.
20. Questions? Really?!
21. Ralph Vincent Regalado @regalandroid THANK YOU!