
Pong written in both flash and HTML5. Left side is flash, right side is HTML5. - ph0rque
http://labs.codecomputerlove.com/FlashVsHtml5/
======
CWIZO
Gah. People please stop using Z as the default key for down (or whatever). If
you can't detect my keyboard layout use keys that are the same on every
keyboard, no matter the language, or provide an option to configure the keys.
My Z (on a Slovenian keyboard) is where your Y is (on your English keyboard).
This makes the game unplayable for me, since my "down" key is above my "up"
key, which makes it almost impossible to play. /rant over

Awesome demo tho. Would love to see source of the flash part (maybe I missed
it) so we could compare the source, not just performance (which seems to be
about the same on my 5 year old laptop).

edit: who's now working on a (HTML5|Flash) vs Silverlight demo? That would be
even more awesome.

~~~
pnp
You have asked an important question: how do you detect the keyboard layout
(in Javascript) when using KeyUp/KeyDown events? A regular press event will
provide the charCode but the press/release versions do not.

~~~
2mur
You could ask if the user wants to use the standard, or custom and then
capture the keycodes for up/down etc.

------
rbanffy
Interesting problem of tuning both sides speed. Here (small Atom netbook
hooked to big screen) the ball moves noticeably faster on the Flash side. To
the point of making me lose a Pong match with myself.

~~~
sant0sk1
Why so somber? You also won the match! ;)

~~~
rbanffy
No. I won the match. He lost.

------
wzdd
The Flash side was unexpectedly slow, and comments on this same article on
Reddit indicate that it is because they are doing a lot of JavaScript-to-Flash
communication, which is unusual for a game, as well as enabling
"wmode=transparent", which allows DOM elements to be positioned on top of
Flash content, slows down Flash content, and is apparently unnecessary for
this page.

~~~
jaen
HTML5 does all of that out of the box without any flags, so it's a fair
comparison.

~~~
BoppreH
Not when they are not needed, which is about 99% of the time. When I think
"Flash", I think games, video and cool experiments with shining particles.

None of that requires those flags, so I think forcing those is not fair.

~~~
jaen
Flash defaults to "non-web-friendly" (windowed) flags by default, HTML5
defaults to "web-friendly" flags. As a commenter said, you can also make the
canvas tag opaque by using a special browser-specific style.

If you remove the windowless flag from Flash, you would have to add the opaque
flag to HTML5 to make it a fair comparison.

------
MichaelGG
This is depressing. It's 2010, and our computers have issues rendering _Pong_.

~~~
nuclear_eclipse
Granted, the ball is using more pixels to render itself than all the pixels
available on an atari 2600, and it's going through 10 levels of abstraction
layers rather than using assembly code to blit pixels directly to the
framebuffer...

~~~
faragon
Framebuffer? There is no such thing in the 2600 (see "Atari_TIA" Wikipedia
entry for details).

~~~
nuclear_eclipse
Call it what you like, but it's basically a line-based "framebuffer" in
memory, and the display _just happens_ to be reading from that memory every
time it draws a line. IIRC you get something like 80 clock cycles to blit your
pixels into that memory space before the next line gets drawn, but it's still
acting as a framebuffer.

~~~
faragon
No, it is not even a line-based framebuffer. Starting on every H-Sync
interrupt, _the CPU_ has to change the TIA chip latches with accurate timming
for "producing" pixel output. So, there is no framebuffer at all.

~~~
nuclear_eclipse
Ah, then perhaps I'm confusing it with another console that predates my
existence :P

------
jordan0day
While I'm seeing better perf on the flash side (XP, FF 3.6.12), Pong isn't
exactly an ideal test bed.

Interesting that on the page they say "We believe the two technologies are not
in competition" but that is exactly what this type of demo is going to stir
up. While the improvements in browsers and javascript engines as of late has
been nice, I think we're still a few years off from real parity, especially on
lower-spec'd machines. Make no mistake, Flash on the web will be obsoleted by
HTML5. But not yet, especially for all those people who don't update their
browser every month.

For the time being, if Flash evangelists really wanted to make a point, they
should do this same type of set up, but with a complicated (hardware-
accelerated?) visualization.

~~~
benologist
HTML5 will eventually achieve comparable functionality and more importantly,
business models may emerge (flash gaming is an industry after all) given time
that make it a viable alternative to the people _making_ games. At some point
it'll almost certainly coexist alongside Flash games on sites like Armor,
Kongregate etc. But it's not going to kill Flash.

HTML5's real fight is against native mobile platforms where it's competing
against much richer platforms than Flash and more importantly business models
that revolve around a _mountain_ of cold hard cash people throw like confetti
at the games they like.

If all it does is coexist or even entertaining the fantasy where it 'kills'
Flash its lost, Flash is just the tip of casual gaming. Solipskier made
$70,000 in the first 2 months of their iOS version ... against $16,000 on the
Flash version (and that's more than most Flash games make).

------
mbyrne
Firefox 3.6.12 on a Mac. For what it's worth: Interesting behavior on the left
side, the ball occassionally sticks to the paddle and vibrates, travels up the
paddle and then scores a point against itself. (This is not a set up for a
punchline.) Also, both sides show some stuttering in the ball movement.

~~~
nitrogen
I wrote a simple pong game once for a CS class, and in my case a vibrating
ball was caused by simply negating velocity on a collision rather than setting
its sign. It's better to do something like this (using C pseudocode as that's
my native language):

    
    
      if(collision) {
          switch(side_of_screen) {
              case LEFT:
                  horiz_speed = abs(horiz_speed);
                  break;
              case RIGHT:
                  horiz_speed = -abs(horiz_speed);
                  break;
              case TOP: // Positive Y is downward
                  vert_speed = abs(vert_speed);
                  break;
              case BOTTOM:
                  vert_speed = -abs(vert_speed);
                  break;
          }
      }

------
Jach
Running Gentoo with Firefox 3.6.9 on a Core i7, HTML 5 is much more noticeably
laggy while Flash (10.2.161.23) is perfectly smooth. In Chrome they're more or
less equivalent. (Firefox's sluggishness could have something to do with many
Firefox addons and having over 100 tabs open.)

~~~
morphir
are you sure its the flash that is smooth? I got have the same firefox on osx,
and flash is laggy compared to the smooth js version. Flash is left, remember?

~~~
mr_luc
Chromium on ubuntu 10.04 -- flash stutters on the left-hand side, canvas
smooth.

Of course, flash on chromium on ubuntu isn't what Adobe is optimizing for ...
but that's just another reason to hope that canvas continues to do well.

------
albertzeyer
MacOSX on a 2.16GHz Dual2Core Macbook with Chrome: HTML5 is really fluent here
while Flash seems somehow laggy (I would guess 20 FPS or less).

I think I also found a bug in the Flash version. The ball got stuck somehow at
the top bar.

~~~
vala4005
Same experience here. Cool concept, wonder how it matches up to silverlight?

------
andrewingram
In contrast to other commenters, the html5 side runs super-smooth and the
flash is noticeably jerky.

I'm running a 2008 iMac.

~~~
notyourwork
In contrast? Everyone has said the flash is not smooth and html5 is.

~~~
pzxc
Not everyone.

Plus who knows how each side was coded. I make games for a living and more
times than not, jerkiness/glitches are an indication of bad programming than
the platform it was written in. Pong is an ultra-simple game but you'd be
surprised even on a game as basic as that the issues that can crop up that
require elegant coding. Collision in particular -- the simplest, most obvious
way in pong to check when the ball collides is to check the intersection of a
point and a line, or a point and polygon/rectangle, the point being the edge
of the ball (top/bottom of it for the walls, left/right of it for the paddles)
versus the edge of the paddle or the whole paddle. More precise, but more math
used and thus a less common way of writing the game, is to check the
intersection of a circle and a line segment/polygon.

For example in flash, there are some built-in methods that everyone tends to
use but don't get "pixel perfect collision" -- if you google that phrase you
can see where people have tried to come up with perfect collision and how
complicated all the math is for it.

I know for a fact just from playing this flash/html5 pong that it wasn't coded
perfectly because it glitches when the ball gets to too high of a speed,
either getting stuck in the wall and bouncing along it but not away from it,
or going right through the paddle.

So this is really apples and oranges, unless both halves were coded with the
exact same algorithms for everything (and just different syntax for the
languages) -- very unlikely -- and, as evidenced by the other commenters also
completely dependent on the environment/browser implementations of html5 and
the flash plugins.

However, way cool on the link-bait worthiness :) I shoulda thought of this =P

------
wanderr
On my Motorola Droid running Froyo, the flash side is much smoother. On the JS
side I couldnt really control it because the browser was also intercepting
every keystroke and trying to put them in the url/search bar.

~~~
amadiver
Interesting. A big complaint leveled against Flash was that it steals keyboard
focus. This causes problems when you're playing a Flash game and then want to
tab away from the screen. In this instance, that it doesn't delegate control
to the browser is a feature.

------
Yzupnick
Really cool. On my system the flash is way faster than the HTML5

------
pohl
It looks like a non-standard key mapping, like dvorak, causes schizophrenic
confusion.

------
Derbasti
Windows 7 x64, Chrome, Flash is jerky, glitchy and ugly, HTML5 is smooth and
nice.

~~~
mynameishere
People keep saying things like this. Seriously: If a flash _pong_ game is
messed up, it's the programmer's fault.

------
mendicant
Win7 x64, Opera 10.6: Flash is very jerky and HTML5 is soft and silky smooth.
Interesting to see that others are seeing the opposite.

~~~
mendicant
It's actually quite consistent when I use Firefox. There's a little bit of
jerkiness on both sides.

------
i_c_b
I would definitely like to see the source for this. Over time, it's become a
lot more clear to me that Flash's defaults (and the normal tutorial code you
read) are tuned for high resolution advertising contexts, mostly, so the need
for taking steps to get good real-time / interactive performance out of Flash
isn't always totally obvious to people.

------
Yaggo
Safari 5 on OS X: HTML5 smooth, Flash sluggish. (Does the "known performance
issue" on Safari 5 affect the Flash side?)

Anyway, as the author suggests, this kind of test has merely entertainment
value. While 95% of Flash could be replaced by HTML5, Flash still has its
place on Games.

------
luigi
Make sure you've excluded the URL from Vimium/Vimperator before playing!

~~~
kilian
I've sought high and low for a way to do this on Vimperator, but I can't for
the life of me figure it out. Forgive me for asking, but how do you exclude
urls in it?

~~~
anthony_w
Check out the Automatic Commands section under help. Here's an example from
that page.

    
    
        Enable passthrough mode on all Google sites:
    
            :autocmd LocationChange .* js modes.passAllKeys = /google\.com/.test(buffer.URL)
    

Or you can just press Ctrl-Z once your in the page, to temporarily go to pass-
through mode.

------
kreek
Both sides seem about the same to me but I also have the Flash 64-bit player
for OS X <http://labs.adobe.com/downloads/flashplayer10.html>.

For those interested in Flash game optimization here's a video on porting
Plants vs Zombies to Flash
[http://tv.adobe.com/watch/max-2010-develop/building-
plants-v...](http://tv.adobe.com/watch/max-2010-develop/building-plants-vs-
zombies-in-flash/) (that would be and interesting split screen!).

------
koichi
When I use my iPhone to play this game HTML5 side always wins!

------
AgentConundrum
I didn't notice any real difference between the two on Firefox 3.6.

The only complaint I had was that there was some sort of hit detection problem
on the HTML5 side (the ball got caught inside the paddle, and the rally count
shot up by about 30 in about a second). I can't hold it against the HTML5 code
though, since the flash side did it to me too about 10 seconds later.

------
joakin
Besides a few glitches in the html5 side it looks pretty much the same. I
would love to see the FPS count though

------
godDLL
Can't tell the difference on a MacMini2,1 w/ Safari 5.latest – both sides jerk
a bit sometimes, but are mostly smooth-looking. Maybe if I blew it up to full-
screen it would show a noticeable difference.

Reminded me of a BeOS demo, where windows would send each other messages about
own position and the ball's physics.

------
shubber
My experience (Chrome on Linux) was smooth in both technologies (apart from a
collision detection bug on the canvas side). Really neat demo though - when
they're synced, it's weird to be aware that there's a sort of slight of hand
happening with the ball as it crosses the center line.

------
brown9-2
I love how the score is persisted between visits if you close the tab or
navigate back to the page later.

------
jcromartie
I am pretty sure that the Flash side could be better. I've seen lots of flash
games that run smoothly.

------
someone_here
It's interesting that the Flash version has a frame rate of 100 and a
calculated size of 8000 by 9000 pixels, while the javascript version leaves
these undefined. I have no idea what the performance implications these
attributes have, as I have never seen either so high.

------
karanbhangui
this should use a constant FPS game loop
(<http://dewitters.koonsolo.com/gameloop.html>). Currently, the flash side is
much faster; supposedly due to it rendering faster in my browser.

~~~
cma
wouldn't that defeat the purpose?

~~~
karanbhangui
I guess it would if the idea is to show one has superior performance over the
other. I was just commenting from the perspective of having a more uniform
experience on both sides.

------
beej71
I'd love to see the Flash source. It flags for me, but I don't think it should
have to.

------
Stevenup7002
Interesting, at first the HTML5 was notably faster and smoother than the flash
version, then the HTML5 became slightly sluggish and the flash version became
smooth and fast. Anyone else get this? I'm on Chrome.

------
blaix
Very cool, but HTML5 side barely working at all for me in Chrome on OS X.

~~~
silversmith
Three generations old MBP with Chrome 7, everything is okay, both sides seem
to be equally smooth.

------
clvv
Looks like my left cerebellum and my right hand is winning, not sure if it's
because of HTML5 or not. Flash is using less CPU, Ubuntu 10.10 64bit with
Chrome 8.0.552.23 and Flash 10.2 d161.

------
steauengeglase
Both ran smoothly (FF 3.6.12), but there were some collision issues with
HTML5. Hitting the ball with the side of the paddle almost always results in
the ball passing through it.

------
Rhapso
Ubuntu and chrome on older laptop, flash runs noticeably faster, and has odd
accelerating effects on flash side. So, Flash is faster but not a consistent
speed?

------
S_A_P
On my system here at work(Dell Core2Duo Xeon, 8GB win7x64), the "HTML5" side
was slightly less glitchy, and the flash sides graphics were more
antialiased...

------
bdean
At one point the ball was going so fast I couldn't see it.

------
dayjah
While playing with myself... _ahem_... I noticed the html side being a little
laggy with key presses. Any speculation as to why? Freaking awesome work!

------
jawee
Entirely unplayable on the flash side due to slowness and worked beautifully
in HTMl5.

Dell Mini 9 running Crunch Bang 9.10 (Ubuntu respin) with Opera 10.60.

------
fredleblanc
Running on Firefox 3.6 on a Mac, both sides were very similar speeds. Didn't
really see a change at all. Good concept and great execution.

~~~
eande
MacBook Pro 15" with Firefox 3.6, but I noticed jerkiness on Flash, HTML was
definitely smoother

------
RoyG
I'm running Safari 5 on an older Macbook, and the Flash side is noticeably
faster/smoother. That must be the 'known issue...?'

------
levesque
I had to refresh the page a couple of times for it to work. Using chrome on
Ubuntu 10.10 x64.

------
alexobenauer
Mac OS X, Google Chrome, all up to date stuff. Both run _exactly_ the same.

------
c4urself
awesome! flash ball speed is slower by the way... and keeps losing :)

------
slug
my setup: firefox 3.6.12 and chromium 6.0.472.62, 64bit linux

flash (left) is faster/smoother than html5 (right), so much that right could
never win.

------
michaelfeathers
Where's the touch screen version?

------
AndyKelley
I only see the right side.

------
vijaydev
Site down?

~~~
vijaydev
my bad.. couple of reloads and it connected.

------
TheAmazingIdiot
IBM thinkpad T61, 2GB ram, running firefox 3.6.8 for Ubuntu 9.10 (yeah yeah, I
know), and Flash 10,1,82,76 .

Ball is nice and smooth on HTML5 side, and kind of jerky on flash side. That
could just be Linux+flash issues, but the animation for HTML5 is super-smooth,
so I'm guessing it's just bad flash plugin.

~~~
cullenking
Flash on linux sucks quite a bit unfortunately :(

~~~
rexyo
Yeah in the old days it performed quite bad. Nowadays with the newer distro's
like suse 11, (k)ubuntu and a couple of others I really havent found any more
glitches than on any regular windows machine running flash..

~~~
cullenking
I develop with flash regularly on my Linux machine (Ubuntu 10.something), and
it's definitely a bear compared to windows. I'll be happy for the day I can
walk away from flash, but it makes computationally intensive consumer
applications much easier/feasible. When we started out project almost three
years ago, it was such a clear winner over JS, but now it's becoming a wash.

~~~
nitrogen
64-bit Linux is even worse, as it has to go through a 32-bit adapter to work
in 64-bit Firefox. Video is unwatchable for me on a Core i7 with a fast video
card.

~~~
cullenking
Yeah, I use a 32 bit compiled version of firefox called swiftfox for all my
flash debugging/testing. Definitely slow as heck, but, faster than using the
wrapper/adapter method.

------
jeberle
CPU was pegged. I'll blame the flash side.

