HTML5 Curation

In this guide I’ll explain how to curate HTML5 games. This will only cover games that don’t require a persistent server connection.

Recognizing an HTML5 game

Without looking at a web page’s source, there’s no definitive way to tell if you’re dealing with an HTML5 game. You can however easily discard Flash by whether a lego brick-shaped plug-in icon is displayed to the left of the address bar. The same goes for any technologies that make use of browser plugins (e.g. Java).

Required software

These will be required to perform the curation process:

• Flashpoint Core (Optional, recommended)
• wget for Windows

The guide below will explain how to use them.

Curation

In order to curate an HTML5 game, we first want to retrieve all the URLs required by the specific game we’re dealing with.

There’s two ways to do so:

• Using a web debugging proxy like Fiddler or Charles Proxy
• Using the browser’s console

I personally prefer using Charles Proxy, I also use it for curating Flash games, which requests are not displayed in the browser’s console. I like its interface and it allows you to view the directory hierarchy of all HTTP requests.

For the purposes of this guide I’m going to keep it simple and stick to Firefox’s console, which should be similar enough to that of Chrome. If you do opt for a debugging proxy it’s imperative to clear the browser’s cache EVERY time you attempt to capture the game’s requests.

I’ll illustrate each step with an example of a real HTML5 game. I’m going to attempt to curate Google’s snake clone that you get by performing a search for “snake”.

Here’s our prey:

Let’s start off by opening the console, we can easily do this by pressing Ctrl+Shift+I or by right clicking anywhere in the page and then selecting “Inspect”. Then navigate to the “Network” tab.

If any requests are already shown, click on the “Clear” icon to get a fresh start. While this tab is selected, our browser will record all requests made by the page and display them as a list.

Refresh the page, this will cause it to make a bunch of requests to display the page. As the game loads, a bunch more requests will be made.

Now, here’s where it gets tricky because most HTML5 games won’t request all of the files it needs at once but rather will request them sort of on-demand.

Imagine a game that has multiple stages, and stage two uses a different music track, it may not request it until that stage starts. Depending on the game though, it is sometimes possible to retrieve a list of most if not all of the files it needs by exploring the contents of other files it requests.

This could be an XML or JSON file that lists the music track to be used for each stage, for example. However, I won’t get into detail for now. This game does not require any of that.

Play around with the game until no more requests are made or you feel satisfied. Then look for a button named “HAR”, it should be in the top right of the editor in Firefox, download icon in Chrome. Click it and select “Save everything as HAR”.

This file contains the data of all the requests listed in the console. You can quickly extract all the requested URLs by opening the file in a text editor (i.e. notepad) and copy/pasting the contents in the left text box shown here.

Copy the URLs from the right and save them in a new text file in its own dedicated folder.

At this point, make sure you have a copy of Flashpoint for testing. Flashpoint Core is recommended but any version can be used.

Next up, we’ll need to use a tool called wget. Chances are you have heard about it before, you can download it for Windows here.

Save it in the same folder as the text file with the URLs, then open a command line window. To do so, simply press Win+R, type “cmd” and then Enter.

Type “cd”, without quotes, followed by the path to the folder where you saved your text file and Enter. Example: cd C:\Users\Foo\Game\

Then enter “wget -x -i filename.txt” and let it do its thing. Once all files have been downloaded, copy the resulting folder(s) to the “htdocs” folder in your Flashpoint directory, you will find it under a folder named “Server”.

Navigate into a folder named “FPSoftware” next to where you found “Server”, find an executable for a web browser named Basilisk in it and run it. Copy the base URL of the game into its address bar and press Enter.

If the game works then you’re almost done! :)