Show HN: Scrambled – An iOS Game in HTML5 | Hacker News Reader

Show HN: Scrambled – An iOS Game in HTML5

scrambledapp.com

52 pointsmatTtam38 comments

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/

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')

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

Try it the browser could possibly make sense. Or not. They would probably prefer people to pay to download and try the app (or download a free version and have it on their phone, as a reminder the can buy the full one), rather than try it on a browser and forget about it.

An Android release is also questionable. Not such a big market money wise, and they would have to port the rest of the environment too (the native hooks), AND take into account the various screen sizes and OS versions (50% of Android users still use 2 year old versions). Might as well don't bother at all.

Same here I would love to be able to try it on my browser before downloading the app. It looks nice

Occurs to me that they probably didn't want to from a UX perspective. The whole app had been made for touch, not point and click/drag. Perhaps the team felt the interaction needed to be touch-only. But a demo video may have eased this confusion.

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

So? If the app's JS performance is fast enough to play the game, then there's no problem if it would be better on a desktop browser.

(Or do you mean the iOS browser? Still, doesn't matter. If you want to sell an iOS, there's just no comparison between the monetization facility of the App Store compared to the browser).

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.

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/

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.

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.

I'm trying to think of a good analogy to counter your point of view, but it's such an enormous fallacy that I shouldn't even bother.

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.

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.

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.

>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).

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/

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

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.

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

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.

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?

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

What?

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.

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.

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!

- 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).

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.

Looks cool; I have a question though.

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

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

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

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

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

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

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

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

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

Reply on news.ycombinator.com