Skip to content

Latest commit

 

History

History
65 lines (48 loc) · 4.84 KB

cut-the-rope-now-in-html5.md

File metadata and controls

65 lines (48 loc) · 4.84 KB
Raw
title authors intro types categories published updated status
Cut the Rope now in HTML5
thebeebs
Cut the rope was a game originally built for iPhon...
shorts
article
2012/01/09 12:00:00
2012/01/09 13:00:00
archived

Cut the rope was a game originally built for iPhone and Android by ZeptoLab and it's gone on to sell 70 million copies, the good news is that it has been ported to HTML5 by PixelLabs, ZentoLab and the Internet Explorer team. It works in Chrome, Safari, Internet Explorer 9 and Opera.

Play Cut the rope Read the developers guide

The game was ported from Objective-C to JavaScript, which must have been a huge challenge given the fact Objective-C and JavaScript are very different beasts.

Objective-C is an object-oriented programming language and as such has inheritance and classes where as JavaScript is a dynamic scripting language. You can create 'class like' objects in JavaScript using prototypes but, It's harder to get native like performance out of JavaScript. The game is proof, however, that with a little bit of creative thinking, modern JavaScript engines can deliver the goods.

In the article that accompanies the game, the developers talk about the mind-set switch required to move from Objective-C to JavaScript and pointed out two areas where a different approach had to be taken to get the game running smoothly.

Recursion

In the Objective-C application there were numerous instances where a procedure would call itself again and again passing a new object into each successively deeper call. This didn't work well for JavaScript and so they changed the code to be iterative, for those not familiar with the differences, I've written a little example of a recursive and an iterative function that performs the same task. Notice that the top function calls itself repeatedly until it has the answer.

document.write('
Recurvive:' + recursive(5) + '
');
document.write('
Iterative:' + iterative(5) + '
')

function recursive(x) {
if (x >= 10) return x;
return recursive(x + 1);
}


function iterative(y)
{
if (y >=10) return y;
while (y < 10)
{
y++;
}
return y;
}

Using the IE9 Developer tools you can see that the recursive function (on the left) is called 6 times where as the iterative version (on the right) is called just once. The the case of cut the rope the iterative approach performed better.

Recursive

Iterative

Memory Allocation

As JavaScript doesn't have structs or classes it's common to use prototypes as an alternative. The game developers soon realised that taking this approach used more memory as creating an object in JavaScript is much more expensive. Rather than creating copies of objects  whenever possible the developers tried to copy individual properties and avoided creating entirely new object instances.

The Tools

As well as giving some insight into the development process the team also talk about the tools they used to build the application. I've listed them all below, I'm particularly interested in giving the sound manager a spin: