davidbau.com

jQuery-turtle

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

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