October 08, 2011


You have three img elements with ids r, x, and a. What does the following javascript program do with them?

function tick() { if ($('#r').touches('#a')) { $('#x').turn().moveto('#a').attr('src', '/public/poof.gif'); $('#a').turn().move(); } else { $('#r').turnto('#a', 10).move(10); $(window).moveto('#r'); } } setInterval(tick, 50);

Click here to see a demo.

Open-Source Library

The jQuery extension being used here makes simple javascript game dynamics accessible enough for kids to use directly. The extension is called jQuery-turtle and I am licensing it under MIT license terms. It builds on top of Zachary Johnson's useful rotation extensions to jQuery.

jQuery-turtle source code here.

The extension adds the following methods to jQuery:

$(elt).turn(degrees)      // turns elements right by a number of degrees 
$(elt).turnto(direction)  // sets absolute compass direction
$(elt).move(pixels)       // moves elements forward by a number of pixels
$(elt).moveto(location)   // sets absolute position of the center of the elements
$(elt).mirror(flip)       // mirrors elements across the current axis
$(elt).center()           // returns the absolute center coordinates of an element
$(elt).direction()        // returns the absolute compass direction of an element
$(elt).touches(target)    // true if one element touches another
$(elt).encloses(target)   // true if one element geometrically encloses another
$(elt).pen(color)         // starts tracing a line with the given style
$(elt).fill(color)        // fills the elements with the given style

Any element can be turned and walked around the screen using turtle geometry and hit-tested against any other element. Key features of this extension avoid learning barriers for beginning programmers:

  • No need to understand cartesian coordinates. Trigonometry of turtle graphics is handled.
  • Plays nicely with css: turtle heading is css rotation, and position is set using css attributes.
  • Mouse events are easy: move to the location of a mouse event by $(elt).moveto(event).
  • Hit testing is easy: pixel-precise rotated-rectangle hit testing is implemented by $(elt).touches(otherelt).
  • Objects are positioned by their center, which simplifies most game calculations.
  • Fractional positions are remembered, avoiding roundoff problems at small steps or angles.
  • Turning towards another object is implemented by $(elt).turnto(otherelt), an alternative to $(elt).turnto(degrees).
  • Window scrolling is also easy and is done by $(window).moveto(pos).
  • Every element can have a pen with its own color and size.
  • Canvas for pen lines created on-demand and does not interfere with the document.

A Cat and Mouse Demo

Another example. Here is a simple cat-and-mouse game:

You press a key to go after the cheese, and let go of the key to flee back home. Source here. Try not to get eaten.

Posted by David at October 8, 2011 04:22 PM


I wish I could figure out how to use this. I tried to use this. My code $("#abc").play("abc"); is not making any sounds. What is the exact script I need to include on my page to make this happen?

Posted by: Earl at December 6, 2013 05:11 PM

So upon further investigation the play function only works in google chrome. Is there any way to get it to work in other browsers?

Posted by: Earl at December 31, 2013 06:08 PM

There were some bugs in jquery-turtle that have been fixed now, so play('abc') should also now work in Firefox 26.

(The issue was that jquery-turtle had been using a draft version of the WebAudio API - a few things have been renamed.)

IE still hasn't implemented WebAudio.

Posted by: David at January 1, 2014 07:08 AM

pls can to make a cat to move in different direction like moving forward taking left turn, right turn and move ahead then again to backward.

Posted by: gowthami at June 18, 2014 08:00 AM
Post a comment

Remember personal info?