To flex my atrophied html and javascript knowledge, I decided to first go through the course on Udacity (CS255 HTML5 Game Development) before leaping into the more complicated task of porting the whole project to html5 along with the box2d physics engine.

The CS255 class is the 3rd wave of classes offered to the public and has lost a lot of the refinement that existed in the 1st and 2nd waves of classes and you don’t get star teachers like Sebastian Thrun teaching the classes anymore. So right away, students unfamiliar with the underlying technologies used will bump into problems. Sure you can just use their online interpreter to complete homework and quizes, but it is not really done in a production environment. So we’ll start with setting up the development environment.

My particular system is a Microsoft Surface Pro with Windows 8 installed. I chose this platform so I can sign agreements with a precise pen and use it as a cheap artist’s Cintiq as well as a great sales presentation tablet.

Text Editor

I try to do everything with Sublime Text if I can. So for this, I installed Sublime Text 3 and paired it up with the Nodejs package.

Script only build

Sublime Text 3 can be found here: It is free as a trial, but $70 if you wan to get rid of the annoying pop ups. You will need to enable the package manager. Follow the instruction on this page to install package control which basically sums up to:

1. Press [ctrl `] in sublime text
2. Paste the following code:

   •  import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

Next, you can either go to the web repository to download the Nodejs package by the author tanepiper or you just do it in Sublime Text 3 by click:

1. Preference –> Package Control –> Install Packages
2. Type in Nodejs

Of course, we also need to install Node.js This is as easy as going to http://nodejs.org/ and click on install. Once that’s done, you can now build and run javascript in your Sublime Text 3 editor by pressing [ctrl b]

Full html build

Sometimes the whole page needs to be tested together, this is when a shortcut key for building comes in handy. Follow the tutorial here for a quick and easy hack.

import sublime, sublime_plugin
import webbrowser


class OpenBrowserCommand(sublime_plugin.TextCommand):
   def run(self,edit):
      url = self.view.file_name()
      webbrowser.open_new(url)

Save the file as openinbrowser.py (it really doesn't matter what you name it though).Then go to "Preferences > Key Bindings - User", and add the following:

{ "keys": ["ctrl+shift+b"], "command": "open_browser" }

Now when you are working on the javascript, you can press "control + shift + b" to open the file in your browser