A simple canvas-based Javascript game, with a Django back-end

February 24th, 2010 at 7:17 pm

A few years ago I’ve released a clone of the "Colorful lines" game (called GLines on Gnome), named Perlines. It still works quite well and is available from the Programs and code section of the website.

In the past couple of weeks I’ve implemented a web-based version the game, using Javascript and the HTML5 canvas element for the game itself, and a Django back-end server for storing high-scores in a centralized manner.

Here’s a screenshot:

http://eli.thegreenplace.net/wp-content/uploads/2010/02/linesshot.png

And the game itself is available for playing here. Note that due to its use of the canvas element, it doesn’t support Internet Explorer. I tested it in Firefox, Safari and Chrome.

Some observations on the development of the game:

  • It’s really the first time I’ve written a large amount of Javascript code. It was an interesting experience about which I have mixed feelings – so I think it deserves a separate post.
  • The HTML5 canvas element is really nice and works just like any other canvas / graphical device context in a GUI framework. It has nice performance and an intuitive API.
  • It’s also the first time I’ve actually done any serious AJAX. It turned out to be pretty straightforward on the client, with the generous help of jQuery. On the server side it’s even simpler.
  • I was surprised how easy it is to craft a simple DB-backed server for storing the high-scores using Django. It was probably the most effortless part of the project – Django really does make server development in Python ridiculously simple.

I will play with it myself for a few more days and then release all its source code to the public domain. Naturally, the client-side code is accessible even now by viewing the source of the page in your browser.

P.S. There seems to be at least one other Javascript clone of the lines game online, but it doesn’t use canvas and doesn’t have a global high-scores table.

Related posts:

  1. Finding out the mouse click position on a canvas with Javascript
  2. The server-side Javascript meme
  3. Django sessions – part I: Cookies
  4. How Django sessions work – introduction
  5. Should I learn Javascript ?

3 Responses to “A simple canvas-based Javascript game, with a Django back-end”

  1. DmitriNo Gravatar Says:

    Fun game! Sorry for the leader board :)
    One thing – if you scroll the page mouse clicks on canvas get misplaced. I believe you can fix that in JS with the following:
    var y = ev.clientY – Game.canvas.offsetTop+$(window).scrollTop();
    Cheers!

  2. elibenNo Gravatar Says:

    @Dmitri,

    Thanks for the tip – I’ve fixed it. Never thought the window will be scrolled :-)

    Glad you’re enjoying the game.

  3. john shawNo Gravatar Says:

    Very fun game. I play it frequently.

Leave a Reply

To post code with preserved formatting, enclose it in `backticks` (even multiple lines)