

Show HN: Scrambled – An iOS Game in HTML5 - matTtam
http://www.scrambledapp.com/

======
rudasn
I don't have an iOS device but the website looks very good. Appreciate the
write-up as well, it's always interesting to read about these things.

Just a minor issue on the code you have on [1]:

    
    
          imagesToPreload.forEach(function(src) {
            var img = new Image();
            img.src = src;
            img.onload = hasLoaded;
            img.onerror = hasError;
          })
    

The onload and onerror callbacks would be best to be assigned prior to setting
the image's src attribute so as to make sure they are always called.

Also, on your Element.hasClass method have you considered a non-regex
approach, like this.className.split(' ').indexOf(c)? That would most probably
be faster. Same goes for removeClass where something like
this.className.split(' ').reduce(...).join(' ') may do the trick.

[1] <http://www.scrambledapp.com/articles/for-developers/>

~~~
duopixel
iOS Safari supports element.classList since iOS 5. You can do...

    
    
        element.classList.add('classname')
        element.classList.remove('classname')
        element.classList.contains('classname')
        element.classList.toggle('classname')

------
lnanek2
HTML5, but I can't try it in my browser? Or play on my Android?

~~~
pixelcort
Also, wouldn't the JS performance be worse in an App Store app as compared to
the browser?

~~~
mrspeaker
Depends: maybe they used something like Ejecta
(<https://github.com/phoboslab/Ejecta>) which doesn't use the standard webview
but re-implements canvas on top of opengl.

~~~
matTtam
We did not use Ejecta, but the standard ios webview. You can read this article
for more details on how we built it :

<http://www.scrambledapp.com/articles/for-developers/>

------
puffyrice
I couldn't turn off the volume with the iPhone's default silent switch. So
it's not safe for work for the first few secs:) Anyway UX/UI is great, the
game is addictive.

~~~
jasonlotito
That would be a problem with the iPhone's default silent switch then.

Not saying it's not an issue the app should try to work around a broken
iPhone, but if the iPhone's silence switch can't be trusted to do the simple
job of silencing the phone, it's a problem with the device.

~~~
ajanuary
The silence switch is intended to silence alert sounds. It doesn't silence
audio initiated by the user. For example, playing music of video in Apple apps
will still play out loud even when switched to silent. With no way of
automatically telling what is initiated by the user and what isn't, it's left
up to the app to decide.

I tend to always have my phone on silent so it's not a distraction if I get an
email or text while talking to someone, but if I play a video I want it to
actually make some noise. Google's YouTube app doesn't play audio if switched
to silent, and it's frustrating having to frequently switch silent off.

Whether background music is initiated by the user or not is debatable. I'd say
it isn't.

~~~
moogleii
This is exactly it, and the app for me was not doing learned expected
behavior. "Learned" as in, beyond jasonlotito's black and white expected
behavior. When I leave it on silent, I want all non-essential audio off, but
if I'm going to play a podcast, clearly, I want it to play audio regardless.

Btw, the Youtube app did give me audio while the phone was set to silent.

------
lprubin
I like the style of the demo website. I downloaded the game and after solving
my first word, the app froze on the "Word Complete!" screen. At least I think
it froze. I've tapped "next work" and "replay word" and swiped and tapped all
over the screen and nothing has happened. Heading back to my "desktop" and
back into the app leaves me at the same "frozen" screen. I-phone 4 with 5.1.1

EDIT: More random tapping and swiping got me to the "Achievements" screen
which scrolls vertically but I have no idea how to get off this screen and
back to the game.

~~~
coldtea
> _At least I think it froze. I've tapped "next work" and "replay word" and
> swiped and tapped all over the screen and nothing has happened._

A barrage of UI events ("swiping and tapping all over the screen") rarely
helps when an app has stuck.

> _Heading back to my "desktop" and back into the app leaves me at the same
> "frozen" screen. I-phone 4 with 5.1.1_

Tried killing the app? Open the list of open apps (double click the home
button), and "X" it to death. Open again.

I downloaded the app too (on iPhone 5), and had no such problems as of now
(I've only played for like 30 minutes though).

------
sebslomski
I just tried the app and I have to say it is impressive! Please tell us more
about the way you built this!

EDIT: Me stupid: <http://www.scrambledapp.com/articles/for-developers/>

~~~
matTtam
We wrote an article to explain how we did it. You can read it here :
<http://www.scrambledapp.com/articles/for-developers/>

------
kriven
Very impressive! I tried a few rounds and had no problems. Thanks for posting
information on how you developed the app. I am venturing into building mobile
apps and your article on how you developed looks very useful.

------
oneeyedpigeon
Re "A tiny DOM wrapper" [1] Did you consider using classList [2]? It looks
like it's supported by modern iOS safari [3].

[1] <http://www.scrambledapp.com/articles/for-developers/> [2]
<http://davidwalsh.name/classlist> [3] <http://caniuse.com/classlist>

------
Osmium
Web apps are starting to get more and more impressive recently. I've started
using Forecast.io as my main weather app and I honestly can't tell it's not
native. This is the first good game I've seen though, but it's encouraging.

Anyone know why web apps are getting so good lately? Hardware power, browser
optimisations, or what? Looks like there's a bright future ahead anyway.

------
thekingshorses
Use this.$el[0].innerHTML = _.template(html) instead of
this.$el.html(_.template(html)). It will reduce html rendering time by 30-50%.
On desktop browsers you won't see much difference but on mobile browsers it is
significant.

Also, where is an android app? It should be easy to port to an android app
since android also uses webkit browser?

------
nwh
Careful, the website doesn't load properly if the Google Analytics tracks
don't fire. Don't always expect that to happen.

~~~
Kiro
What?

~~~
nwh
This website uses Google Analytics to track not just the page load, but
individual elements being clicked on and such. It attempts to fire off a
tracking event, but if GA isn't loaded, it fails, and the page itself fails to
load. The author really needs to include some sort of fallback for when this
happens.

------
podperson
So I was all aboard until I looked in the iTunes store and saw a bunch of in-
app purchase items. No deal.

I want to pay for an app up-front, or maybe get it free and pay one fixed fee.
Anything else and I will not even try it. I realize I'm in a minority right
now, but I think this trend in games needs to go away.

------
Cakez0r
Semi-related question: I noticed that on the website, there's an animation of
the scrambled wheel. Rather than using a .gif, it's using javascript to
sequence a bunch of .png files. Just wondering what the motivation for doing
this is? These guys clearly know what they're doing, so I'm guessing there is
one!

~~~
coldtea
\- Flexibility in changing the files (hence create a different animation
programmatically)?

\- Alpha blending (which GIF doesn't have, only has simple transparency).

\- More than 256 colors (which GIF doesn't have. You have to dither to get a
semi-acceptable gradient and the like).

------
kirualex
I have to say it's a really nice design and the game is fun, but it's not
really smooth on my iPhone 4, it's a little laggy whenever an animation
starts. This is still very impressive for an HTML5 game though.

------
GuiA
Looks cool; I have a question though.

Why are there two "D" in the following screenshot?

<http://i.imgur.com/WTQNBEs.png>

~~~
brandly
It looks like this allows the GIF to loop smoothly. All the letters change
when the "S" passes over them.

~~~
GuiA
Right, it doesn't make much sense from a gameplay perspective though.

------
guillermovs
Great stuff! Beautiful flat design and the app runs very smoothly :)

------
got2surf
Great design on the site as well as great UI/UX for the app - amazing how
powerful HTML5 apps are becoming.

------
jzting
Looks and feels great! Makes me reconsider using HTML5 for a similar word game
I've been working on.

------
marknutter
Can we get any details about the tech used to build this?

~~~
matTtam
Yep. You can read it there : <http://www.scrambledapp.com/articles/for-
developers/>

