Mobile Browser Games - Breaking Development Orlando 2013

Slide 1

Slide 1 text

Attention! Full fledged version of the slides available at fettblog.eu/slides/BDORL13

Slide 2

Slide 2 text

Mobile Browser Games Great Expectations

Slide 3

Slide 3 text

@ddprrt gplus.to/spider‑man

Slide 4

Slide 4 text

Netural

Slide 5

Slide 5 text

Netural Frontend

Slide 6

Slide 6 text

This Site has been optimized for Internet Explorer 3

Slide 7

Slide 7 text

We've come a long way

Slide 8

Slide 8 text

A new mindset

Slide 9

Slide 9 text

Vegas in your browser!

Slide 10

Slide 10 text

Just mobile browsers?

Slide 11

Slide 11 text

Just modern browsers!

Slide 12

Slide 12 text

Mobile Browser Games ‑ Great Expectations

Slide 13

Slide 13 text

the numbers on the roulette wheel add up to 666 ... and now I know why

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Animation: The Possibilites DOM Manipulation CSS Transitions / Animations Canvas

Slide 16

Slide 16 text

Animation with Canvas

Slide 17

Slide 17 text

Pigs of Awesome ‑ iOS

Slide 18

Slide 18 text

Pigs of Awesome ‑ WinPhone 7

Slide 19

Slide 19 text

Pigs of Awesome ‑ Android

Slide 20

Slide 20 text

How do you feature‑test low FPS?

Slide 21

Slide 21 text

Transitions, then

Slide 22

Slide 22 text

iOS

Slide 23

Slide 23 text

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?

Slide 24

Slide 24 text

IE: Fair enough

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

. 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

Slide 27

Slide 27 text

< d i v c l a s s = " c a r d " > < d i v c l a s s = " b a c k " > < / d i v > < d i v c l a s s = " f r o n t " > < / d i v > < / d i v > HTML

Slide 28

Slide 28 text

A 2 3 4 JOKER JOKER JOKER A A 2 2 3 A 2 3 iOS

Slide 29

Slide 29 text

Well then, User Agents again...

Slide 30

Slide 30 text

Orientation

Slide 31

Slide 31 text

Landscape

Slide 32

Slide 32 text

Portrait

Slide 33

Slide 33 text

@ m e d i a o n l y s c r e e n a n d ( o r i e n t a t i o n : p o r t r a i t ) @ m e d i a o n l y s c r e e n a n d ( o r i e n t a t i o n : l a n d s a c p e ) CSS

Slide 34

Slide 34 text

w i n d o w . o n o r i e n t a t i o n c h a n g e = f u n c t i o n ( ) { v a r o r i e n t a t i o n = w i n d o w . o r i e n t a t i o n ; / / o r i e n t a t i o n i n d e g r e e s s w i t c h ( o r i e n t a t i o n ) { c a s e 0 : / / i O S p o r t r a i t . . . b r e a k ; c a s e 9 0 : / / i O S l a n d s c a p e . . . b r e a k ; c a s e - 9 0 : . . . b r e a k ; } } JavaScript

Slide 35

Slide 35 text

... but

Slide 36

Slide 36 text

v a r m q l = w i n d o w . m a t c h M e d i a ( " ( o r i e n t a t i o n : p o r t r a i t ) " ) ; m q l . a d d E v e n t L i s t e n e r ( f u n c t i o n ( m ) { i f ( m . m a t c h e s ) { / / d o p o r t r a i t s t u f f } e l s e { / / d o l a n d s c a p e s t u f f } } ) Better

Slide 37

Slide 37 text

b o d y : a f t e r { c o l o r : t r a n s p a r e n t ; c o n t e n t : ' p ' ; p o s i t i o n : a b s o l u t e ; l e f t : - 1 0 0 % ; / / o f f s c r e e n } @ m e d i a o n l y s c r e e n a n d ( o r i e n t a t i o n : l a n d s a c p e ) { c o n t e n t : ' l ' ; } Hacky

Slide 38

Slide 38 text

v a r b o d y A f t e r S t y l e = w i n d o w . g e t C o m p u t e d S t y l e ( d o c u m e n t . b o d y , " : a f t e r " ) ; w i n d o w . o n o r i e n t a t i o n c h a n g e = f u n c t i o n ( ) { i f ( b o d y A f t e r S t y l e . c o n t e n t = = ' p ' ) { / / d o p o r t r a i t s t u f f } e l s e i f ( b o d y A f t e r S t y l e . c o n t e n t = = ' l ' ) { / / d o l a n d s c a p e s t u f f } } Hacky

Slide 39

Slide 39 text

Let there be sound!

Slide 40

Slide 40 text

Yeah to compatibility

Slide 41

Slide 41 text

Basic API .play() .pause() .currentTime

Slide 42

Slide 42 text

Basic API .duration 'timeupdate' 'ended'

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Desktop

Slide 45

Slide 45 text

Mobile Webkit

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Just on Touch!

Slide 48

Slide 48 text

There can be only one!

Slide 49

Slide 49 text

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 ( ) ; } } ) ; }

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

iOS doesn't like Variable Bitrates

Slide 52

Slide 52 text

But wait! You can't access currentTime in IE9

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

f u n c t i o n t e s t A u d i o ( ) { a u d i o . s r c = " 1 s s i l e n c e . m p 3 " ; t r y { 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 ( ' e n d e d ' , f u n c t i o n ( ) { u s e F i l e = t r u e ; } ) ; } c a t c h ( e ) { u s e F i l e = f a l s e ; } } Audio Test