HTML5 Space Invaders

Next wednesday I’m lecturing ‘Construyendo y publicando nuestra primera app multiplataforma (II)’ for the program ‘Miércoles de profundización en e-business’ developed by Interlat Group (Colombia). I already lectured this same webinar about one year and a half ago (link here) and when preparing the slides I thought that, apart from updating contents to be along the current time where we are in, it would be great to update the sample application as well.

So first of all I wanted something that viewers could connect to and test live in their devices, and immediately after that, and idea of interaction between them came to my mind. Result: A couple of hours later I saw myself developing a HTML5 Canvas and JS simplified version of the extremely popular ‘Space Invaders’  with world ranking that is displayed both in a map and also in a table updated live by using websockets technology.

Links:

 

Construyendo y publicando nuestra primera app multiplataforma (II)

In this second session of the Interlat Webinars lecturing I review how the variety of devices on the market, related to brands (and underlying operating system), screen sizes and resolutions, input methods, available sensors, etc…, which is something really good for consumers, constitutes a big problem for those planning to develop an application or game.

The problem is technically called ‘fragmentation’ and appears when we realise all the effort that will be required for our product to run on as many devices as possible.

A possible solution is proposed and it is the use of technologies such as HTML5, CSS, JS and optionally a framework like jQuery Mobile to develop a mobile web application.

Also during the presentation I show a little example of a well-known videogame with a world ranking to show some of the possibilities that this set of technologies gives. Main features are:

  • HTML5 Canvas based 2D game
  • Usage of websockets to obtain updates to the ranking in real time.
  • Usage of Google Maps and a table to display the ranking.
  • Usage of jQuery Mobile to quickly build all pages and UI.
  • Backend built as an API using Grape, PostgreSQL and ActiveRecord and deployed to Heroku.

You can see the source of the project in my js interlat demo app github repo.