beyond tellerrand Developer Garden Talk: Mobile Browser Games

Very tight and compressed reprise of the Mobile Browser Games talk in Düsseldorf

Transcript

1. Attention! Full fledged version of the slides available at fettblog.eu/slides/BYND13 Detailed information on fettblog.eu
2. Mobile Browser Games Great Expectations
3. @ddprrt gplus.to/spider‑man fettblog.eu
4. Netural
5. This Site has been optimized for Internet Explorer 3
6. We've come a long way
7. A new mindset
8. Vegas in your browser!
9. Just mobile browsers?
10. Just modern browsers!
11. the numbers on the roulette wheel add up to 666 ... and now I know why
12. Mobile Safari iOS 5 / iOS 6 Native Android Browser 2.x, 3.x, 4.0 Mostly Samsung Galaxy Devices Internet Explorer 9 Windows Phone 7
13. Animation: The Possibilites DOM Manipulation CSS Transitions / Animations Canvas
14. Animation with Canvas
15. http://thewebrocks.com/demos/pigs/ by Chris Heilman Pigs of Awesome ‑ iOS
16. Pigs of Awesome ‑ WinPhone 7
17. Pigs of Awesome ‑ Android
18. How do you feature‑test low FPS?
19. Transitions, then
20. iOS
21. a n i m a t e ( v a r f r o m , v a r t o ) { / / M A G I C . . . } t r a n s i t i o n ( ) { a n i m a t e ( 0 % , 1 0 0 % ) ; s t a t e ( 1 0 0 % ) ; } What happened on Android?
22. IE: Fair enough
24. . c a r d { w i d t h : 1 0 0 p x ; h e i g h t : 1 2 0 p x ; t r a n s f o r m - s t y l e : p r e s e r v e - 3 d ; p e r s p e c t i v e : 1 0 0 0 ; } . c a r d > d i v { b a c k f a c e - v i s i b i l i t y : h i d d e n ; t r a n s i t i o n : t r a n s f o r m 0 . 5 s l i n e a r ; } . b a c k { t r a n s f o r m : r o t a t e Y ( 0 d e g ) ; } . f r o n t { t r a n s f o r m : r o t a t e Y ( 1 8 0 d e g ) ; } . f l i p . b a c k { t r a n s f o r m : r o t a t e Y ( - 1 8 0 d e g ) ; } . f l i p . f r o n t { t r a n s f o r m : r o t a t e ( 0 d e g ) ; } CSS Flip
25. A 2 3 4 JOKER JOKER JOKER A A 2 2 3 A 2 3 iOS
26. Well then, User Agents again...
27. Let there be sound!
28. Yeah to compatibility
29. Basic API .play() .pause() .currentTime
30. Basic API .duration 'timeupdate' 'ended'
31. a u d i o O n e = d o c u m e n t . g e t E l e m e n t B y I d ( ' a u d i o O n e ' ) ; a u d i o T w o = d o c u m e n t . g e t E l e m e n t B y I d ( ' a u d i o T w o ' ) ; a u d i o O n e . a d d E v e n t L i s t e n e r ( ' e n d e d ' , f u n c t i o n ( ) { a u d i o T w o . p l a y ( ) ; } ) ; / / c l i c k o n A u d i o O n e Demo
32. Desktop
33. Mobile Webkit
35. Just on Touch!
36. There can be only one!
37. v a r m a p = [ { s t a r t : 0 , e n d : 2 } , { s t a r t : 3 , e n d : 4 } ] ; f u n c t i o n p l a y ( e n t r y ) { a u d i o . c u r r e n t T i m e = m a p [ e n t r y ] . s t a r t ; a u d i o . p l a y ( ) ; a u d i o . a d d E v e n t l i s t e n e r ( ' t i m e u p d a t e ' , f u n c t i o n ( ) { i f ( a u d i o . c u r r e n t T i m e > m a p [ e n t r y ] . e n d ) { a u d i o . p a u s e ( ) ; } } ) ; }
38. 2 3 3 4 4 5 5 6 6 7 7 8 JOKER 2 3 3 4 4 5 5 6 6 7 7 8 2 3 3 4 4 5 5 6 6 7 7 8 2 3 3 4 4 5 5 6 6 7 7 8 A A 2 2 3 3 4 4 5 5 6 JOKER JOKER JOKER JOKER 4 5 5 6 6 7 7 8 8 9 9 10 4 5 5 6 6 7 7 8 8 9 9 10 4 5 5 6 6 7 7 8 8 9 9 10 A A 2 2 3 3 4 JOKER JOKER JOKER JOKER 6 7 7 8 8 9 9 10 10 J J Q 6 7 7 8 8 9 9 10 10 J J Q 6 7 7 8 8 9 9 10 10 J J Q Desktop, Android, iOS
39. iOS doesn't like Variable Bitrates
40. Android version distribution, March 2013 Source: bgr.com
41. Mobile browsers: The future?
42. Fin @ddprrt / fettblog.eu