Another week, another game completed as part of [my three prototype games challenge](/posts/the-three-game-challenge/) ([part one](/posts/the-three-game-challenge-part-1-lateshas-crib/), [part three](/posts/the-three-game-challenge-part-3-the-family-jewels/)) I set myself at the start of this month.



For this one I decided on a type of game that I have been wanting to make for a while, a turn based strategy game. Many moons ago I used to play a J2ME (shudder) game called Ancient Empires. It was a great little game with lots of depth and replayabliltiy and I think it deserved a remake of sorts.

So here is "A Cunning Plan":

![screenshot_16](/wp-content/uploads/2013/04/screenshot_16-300x224.png) ![screenshot_13](/wp-content/uploads/2013/04/screenshot_13-300x222.png)
![screenshot_14](/wp-content/uploads/2013/04/screenshot_14-300x220.png) ![screenshot_15](/wp-content/uploads/2013/04/screenshot_15-300x225.png)

You can play the game here:

[Play A Cunning Plan](/projects/acunningplan)

This game was far more complex to create than [Latesha's Crib](/posts/the-three-game-challenge-part-1-lateshas-crib/) and hence I spent about 43 hours over the last 9 days making this one.

I was able to save some time by reusing parts of the rendering and hopping logic from Latesha's Crib. As usual I used the  [Ash Framework](https://www.ashframework.org/) with Adobe Starling and Feathers. To code the AI for the computer player I used [Tim Conkling's Excellent Godmode Behaviour Trees](https://github.com/tconkling/godmode-as3) library which is truly an excellent AS3 library. The way Behaviour Trees work is really cool, I strongly recommend checking them out if you are going to design any sort of AI.

Special thanks go to [Mike Rigby](https://www.facebook.com/mikepaulrigby) for helping with play testing and [Ian Callaghan](https://www.facebook.com/ian.t.callaghan) for suggesting I check out Behaviour Trees :)

Let me know what you think of it, if people are feeling it then I may turn it into a full-blown mobile game!

Again I recorded the my time spent making this one, heres the log:

4th April
9:30am - 2pm
3pm - 7pm

5th April
9:30am - 10:30am

6th April
12:00pm - 4pm (-1 for josh, -1 for lunch &amp; spanish)

7th April
2pm - 19:30pm

8th April
1pm - 3:30pm (-1 spanish and lunch)
4pm - 6pm

9th April
3pm - 7pm

10th April
12pm - 7pm

11th April
9am - 10am
1pm - 6pm;

12th April
10am - 1:30pm

[![screenshot_04](/wp-content/uploads/2012/12/screenshot_041.png)](/posts/recursive-nuts-bolts-part-1-a-typescript-chrome-extension-1-of-3/attachment/screenshot_04-5/)

As [promised](/posts/recursive-explore-the-endless-web/) I have decided to write a few blog posts on some of the technology behind my recently release Chrome extension Recursive.



Because there is quite a lot to cover, the discussion is going to be split over three posts. The first part is about the structure of the extension, Typescript and other tools and tech employed. The second will cover the actual recursing / crawling part of the extension. In the final part i'll talk about how I went about representing, laying out and rendering all the data that the crawling part generates.

With that out the way lets get on with the show..

### General Page Layout

When a user open a new tab or browses a new page in Chrome a background script in Recursive inspects the URL you are visiting and so long as it is of type https:// or https:// it will add a small icon to the omni bar:

[![screenshot_02](/wp-content/uploads/2012/12/screenshot_02.png)](/posts/recursive-nuts-bolts-part-1-a-typescript-chrome-extension-1-of-3/attachment/screenshot_02-10/)

Clicking this button opens up a new tab with the Recursive app inside. The app consists of a single HTML document “app.htm” with all of the logic split up into multiple Javascript files which mirror the Typescript files that were used to generate them (more on that below).

### Twitter Bootstrap

Recursive is the first project I have had the opportunity to use [Twitter’s Bootstrap](https://twitter.github.com/bootstrap/). Bootstrap takes much of the pain (I tend to suffer from) out of generating a decent looking HTML interface. Because of it ubiquity it can cause a lot of sites to look very samey, for Recursive however I wasn't interested in spending all that much time making a unique looking interface so the default style suited me just fine.

### General Code Structure

There are three main parts of the application; the HTML and its associated controlling logic (jQuery stuff), the crawling logic and the rendering logic. I have attempted to keep the three parts of the application as separate as possible. The reason being that hopefully it will make things easier in the future should I ever wish to swap out one of these features, for example swapping the canvas2d renderer with a 3d one.

### Typescript Code Structure

I have already mentioned in a[ previous post](/posts/tinkering-with-typescript/) that I took advantage of the new language Typescript from Microsoft to build Recursive. I won't reiterate the reasons I really like Typescript (I should be paid for my evangelizing :P), go check out my [previous post](/posts/tinkering-with-typescript/) if you are interested in hearing my thoughts on the language.

The way I have structured things in Recursive is to have a central context / entry point in the form of a file called app.ts. This file lives in the root of the project and I use it as a sort of globals file. I know, I know what you are thinking, “Globals! Mike, you should know better!”. In this instance however I think because Recursive is a standable app inside an extension it is unlikely to conflict with any other JS (supposing the libraries I use dont declare any global variables). Besides I don't like the alternative that involves using RequireJS or AMD due to all the magic strings and non-type safety involved.

[![screenshot_03](/wp-content/uploads/2012/12/screenshot_03.png)](/posts/recursive-nuts-bolts-part-1-a-typescript-chrome-extension-1-of-3/attachment/screenshot_03-6/)

App.ts also contains references to every other typescript file in the app. This means that when a new TS file is created I only have to add a single reference back to app.ts and all the classes and types contained in the other files will be available (this solution actually feels kind of icky, much in the same way as globals do, but one of the samples on the Typescript homepage uses this ‘driver’ method so I guess its okay!).

One thing you have to remember with this 'driver' method is that every time you create a new TS file, you must also manually add the generated JS file to the html page. Also you must insert the JS files in the correct order in the page head else the types won't be available when the script is loaded. It would be nice if I could just have included app.js in the html page and then have all other .js files automatically added in the correct order for me. This is what RequireJS is supposed to do for you I guess. Another solution would be to use source-maps to map to the original Typescript code (when debugging in chrome) however I had a great difficulty with getting this to work in Chrome so decided to move on.

One important lesson I learnt while working with Typescript on Recursive and with working with JS in general is to try not to fight it too much. Just because you have type safety doesn't mean you HAVE to make everything type safe all the time, particularly if its going to take you hours to implement it in a type safe way. Just because you can separate all your classes out into separate files doesn’t mean you have to, sometimes it makes more sense and is easier to implement if a few enums or helper classes sit inside the same file.

### L-System

Finally, as a little extra I decided to put in a splash screen when you first start up Recursive:

![screenshot1](/wp-content/uploads/2012/12/screenshot1-300x187.png)

While designing this I was also trying to come up with a logo and name for the app. I was toying with the name Recursive and it got me thinking about fractals and [L-Systems](https://en.wikipedia.org/wiki/L-system). As I am easily distracted I decided to quicky have a go at writing an L-System for the splash screen. It wasn't hard to implement but tweaking all the parameters turned out to be a lot more fun than I was expecting so I spent most of one Sunday evening just playing with it :P

### Finally

Well that's about it for the first part of my discussion on the internals of Recursive. This post didn’t didn't contain too many details on what Recursive actually does and how it does it rather it was intended to lay the groundwork for those topics in the next two posts. So stick around for those coming up in the next few days!

Wow, well that took longer than expected! [44 days ago I blogged](/posts/tinkering-with-typescript/) that I had started work on a second version of my Chrome Crawler extension and have only just managed to get it to a state I was happy with enough to release it. To be fair I had been on [a trip to New York](/posts/new-york-new-york/) during that period so perhaps I can be excused. Having said that however I think the time has been well spent and am fairly proud of the result.



### TL;DR

Recursive is an experimental tool for visualising the world wide web. Given a URL it downloads the page search for links and then recursively downloads those. The information is then displayed in a node-based graph.



### The Name

So what's this all about? Why is it called 'Recursive', why not 'Chrome Crawler 2'?

Although I would like to have called the spiritual successor to ['Chrome Crawler'](/posts/chrome-crawler-a-web-crawler-written-in-javascript/), 'Chrome Crawler 2' Chrome's [branding guidelines](https://developers.google.com/chrome/web-store/branding) forbid using the Chrome name or logo (they brought this in since the launch of Chrome Crawler 1).

With that in mind I decided that rather bend Chrome Crawler's name and logo to fit the guidelines I would create a whole new logo, name and app. The app is a total rewrite from the previous iteration anyway so I thought it justified.

According to dictionary.com there is no definition for "Recursive" or "Recurse" but there is one for "Recursion":

> 2\. the application of a function to its own values to generate an infinite sequence of values.
> So a tool that downloads pages, follows the links on that page to download other pages seemed like a rather apt description of something that is "Recursive".

### Video

Before I go much further, I put together this little video demonstrating some of the extensions core functionality:

<iframe width="640" height="360" src="https://www.youtube.com/embed/oNdpoM5Vhsc" frameborder="0" allowfullscreen></iframe>

### Installing

Installing and upgrading is dead simple thanks to how Google Chrome's extension system works. Just head over to this link and hit install:

[https://chrome.google.com/webstore/detail/recursive/hbgbcmcmpiiciafmolmoapfgegbhbmcc](https://chrome.google.com/webstore/detail/recursive/hbgbcmcmpiiciafmolmoapfgegbhbmcc)

Then to launch it visit any website and hit the little icon in the Omnibox:

[![](/wp-content/uploads/2012/12/Screenshot_008.png "Screenshot_008")](/wp-content/uploads/2012/12/Screenshot_008.png)

### How it works

Recursive works by taking in a starting URL which it uses to download the page it points to:

[![](/wp-content/uploads/2012/12/03.jpg "03")](/wp-content/uploads/2012/12/03.jpg)

Once that page is downloaded Recursive parses it looking for links and files. If it finds things it thinks are files then it records them against that URL. It then proceeds to visit all the links in turn, downloading the page then parsing the for yet more files and links.

This cycle continues until a certain "depth" is reached which is the maximum number of links away from the starting URL. You can set the maximum depth allowed in the settings:

[![](/wp-content/uploads/2012/12/04.jpg "04")](/wp-content/uploads/2012/12/04.jpg)

One of the key improvements of Recursive over Chrome Crawler is the way it visualises the data as it is returned:

[![](/wp-content/uploads/2012/12/05.jpg "05")](/wp-content/uploads/2012/12/05.jpg)

Every page is grouped by its domain and is represented by a circular "node".

[![](/wp-content/uploads/2012/12/Screenshot_013.png "Screenshot_013")](/wp-content/uploads/2012/12/Screenshot_013.png)

So for example "/posts/tinkering-with-typescript/" would be grouped under the "mikecann.blog" domain. Any other pages found while running that match this domain are added as little page icons inside the host node.

[![](/wp-content/uploads/2012/12/Screenshot_014.png "Screenshot_014")](/wp-content/uploads/2012/12/Screenshot_014.png)

Any files that are found on a given page are given an appropriate icon and added to that page's domain node.

[![](/wp-content/uploads/2012/12/Screenshot_015.png "Screenshot_015")](/wp-content/uploads/2012/12/Screenshot_015.png)

As Recursive downloads pages and follows links it records the path it takes. It then draws lines between the nodes that are linked:

[![](/wp-content/uploads/2012/12/06.jpg "06")](/wp-content/uploads/2012/12/06.jpg)

### Interacting

Using the mouse wheel you can zoom in and out to get a better perspective. Click and drag to move about the recursive space. You can also run the app in fullscreen if you so desire.

[![](/wp-content/uploads/2012/12/Screenshot_017.png "Screenshot_017")](/wp-content/uploads/2012/12/Screenshot_017.png)

If you click on a node it tells Recursive to explore that node for one extra level depth.

Right clicking a node opens a menu that lets you either open all the pages contained in that node or view the files for that node.

[![](/wp-content/uploads/2012/12/Screenshot_019.png "Screenshot_019")](/wp-content/uploads/2012/12/Screenshot_019.png)

### Files

By using the context menu for a node you can checkout all the files that Recursive found for that node. The files are separated into various categories which you can toggle on or off:

[![](/wp-content/uploads/2012/12/Screenshot_020.png "Screenshot_020")](/wp-content/uploads/2012/12/Screenshot_020.png)

Then if you wish you can download all the files as a zip.

### More

If you would like to read more on recursive, then checkout these posts:
[catlist id=30 numberposts=100]

[![](/wp-content/uploads/2010/03/ScreenHunter_01-Mar.-27-19.11.gif "ScreenHunter_01 Mar. 27 19.11")](/wp-content/uploads/2010/03/ScreenHunter_01-Mar.-27-19.11.gif)

Ive started testing out a new comments system on the blog.



Rather than using the standard comments system supplied by Wordpress I thought I would investigate a reccent popular solution called[ Intense Debate](https://intensedebate.com/home). Its by [Automatic](https://automattic.com/), you know, those clever chappies behind Wordpress, Askimet and Poll Daddy.

Anyways, im hoping it will be alot more user friendy and will encourage more comments! Let me know what you think ;)

Well I have just had my next (not so) bright idea. I have decided to enter the flash games portal business. I see it as a good way to compliment my flash games interest and passion.



I have just gone out and bought the following domains:

[https://www.worldsbestflashgames.com](https://www.worldsbestflashgames.com)
[https://www.worldsbestpuzzle.com](https://www.worldsbestpuzzle.com)
[https://www.worldsbestrpg.com](https://www.worldsbestrpg.com)
[https://www.worldsbestshooter.com](https://www.worldsbestshooter.com)
[https://www.worldsbestdressup.com](https://www.worldsbestdressup.com)
[https://www.worldsbesttowerdefence.com](https://www.worldsbesttowerdefence.com)

As you can see I have decided to go for a niche genre with each of the domains. For now they all point to the main domain [https://www.worldsbestflashgames.com](https://www.worldsbestflashgames.com/) but hopefully I will give them all their own space soon.

As for their implementation I plan on using Worpress as the back-end with the Gallery mod for the Thematic theme (the same setup im using on https://www.artificialgames.co.uk).

Ill report back when its all setup and I actually have some games to play!

A while back I changed my hosting over from the worse than dismal streamline.net over to the much better slicehost service. Slicehost offer alot more power by giving your own server with root access. All well and good if you are knowing what you are doing in Linux, i dont, so I struggled for some time getting Apache and php and all the rest running nice.



Well all was fine and dandy for a while but suddenly a month or so back I started having alot of drop-outs and poor service. After much pain and [forum posting](https://forum.slicehost.com/comments.php?DiscussionID=3629) I finally found out the route cause of the problem was that Apache was using too much memory and just bringing everything to a crawl on my 256meg slice. After much more pain I got the alternative nginx web server going, and touch wood everything seems to be running nice and smooth again, yey!

I would like to give a big thank you to this article which was invaluable: [https://www.mensk.com/webmaster-toolbox/perfect-ubuntu-hardy-nginx-mysql5-php5-wordpress/](https://www.mensk.com/webmaster-toolbox/perfect-ubuntu-hardy-nginx-mysql5-php5-wordpress/)


[![agscreen01](/wp-content/uploads/2009/05/agscreen01.png "agscreen01")](https://www.artificialgames.co.uk)

Well I think it was about time I gave [www.artificialgames.co.uk](https://www.artificialgames.co.uk) abit of a spit shine. For this overhall I went for a minimalist theme by [Chris Wallace](https://www.chris-wallace.com/). I decided to ditch the news updates and just keep it as a portfolio to my flash games and projects.
