Mobile Browser Games - Breaking Development Orlando 2013

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

View Slide

Mobile Browser Games
Great Expectations

View Slide

@ddprrt
gplus.to/spider‑man

View Slide

Netural

View Slide

Netural Frontend

View Slide

This Site
has been
optimized
for
Internet Explorer 3

View Slide

We've come a long way

View Slide

A new mindset

View Slide

Vegas in your browser!

View Slide

Just mobile browsers?

View Slide

Just modern browsers!

View Slide

Mobile Browser Games ‑ Great Expectations

View Slide

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

View Slide

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

View Slide

Animation: The Possibilites
DOM Manipulation
CSS Transitions / Animations
Canvas

View Slide

Animation with Canvas

View Slide

Pigs of Awesome ‑ iOS

View Slide

Pigs of Awesome ‑ WinPhone 7

View Slide

Pigs of Awesome ‑ Android

View Slide

How do you feature‑test low FPS?

View Slide

Transitions, then

View Slide

iOS

View Slide

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?

View Slide

IE: Fair enough

View Slide

View Slide

.
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

View Slide

<
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

View Slide

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

View Slide

Well then, User Agents again...

View Slide

Orientation

View Slide

Landscape

View Slide

Portrait

View Slide

@
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

View Slide

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

View Slide

... but

View Slide

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

View Slide

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

View Slide

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

View Slide

Let there be sound!

View Slide

Yeah to compatibility

View Slide

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

View Slide

Basic API
.duration
'timeupdate'
'ended'

View Slide

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

View Slide

Desktop

View Slide

Mobile Webkit

View Slide

View Slide

Just on Touch!

View Slide

There can be only one!

View Slide

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

View Slide

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

View Slide

iOS doesn't like Variable Bitrates

View Slide

But wait!
You can't access currentTime in IE9

View Slide

View Slide

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

View Slide

Mobile Browser Games - Breaking Development Orlando 2013

Mobile Browser Games - Breaking Development Orlando 2013

Stefan Baumgartner

More Decks by Stefan Baumgartner

Other Decks in Technology

Featured

Transcript