HTML and CSS Reference
In-Depth Information
x: 120, y: 100, shape: 'polygon', color: "red",
points: [[ 0, 0 ], [ 100, 0 ],[ 120, 25],[ 50, 50]]
$(Q.wrapper).on('touchstart',function(e) {
var touch = e.originalEvent.changedTouches[0];
if( {;
} else {
var point = stage.browserToWorld(touch.pageX,touch.pageY);
var box = stage.insert(new Q.Sprite({
x: point.x, y: point.y, w: 20, h: 20
Much of this code should start to look familiar. The initial call to Quintus() chains in some includes and
then calls svgOnly to replace the Canvas sprites. Finally, setup is called with options passed in to max-
imize the SVG element to the size of the page.
The scene method sets up a scene called level that adds a number of sprites onto the page. These sprites,
however, don't have assets or spritesheets as usual, rather they have a shape property defined (or use the de-
fault block shape) along with either a width and height or a radius (for circles). For the polygon sprite a set
of points that define the points that make up the shape are needed.
The stage is set to a smaller viewport and is centered on the first larger block. If you want to see the effect
this has, you can comment out those lines and reload the page.
Finally, the last bit of code checks for a new touch anywhere on the page. If it gets one, it first checks if
the target element has a sprite property. If it does it destroys the sprite; if the target element doesn't have a
sprite property, it uses the stage.browserToWorld method to convert the first changed touch to a point
inside of the SVG element and then adds a new box sprite at that location.
The end result is that if you touch an existing object on the page, it removes it; whereas if you touch an empty
spot on the page, it adds in a new block.
Now, open the page on a supported mobile browser (iOS or Android 3+) and give it a try. You should see one
each of the three different types of sprites: blocks, circles, and polygon. You should also remove existing sprites
by clicking them and add a new sprite by clicking a white spot.
The hit boxes for the SVG elements are precise: Unless you touch directly in the element, it won't disappear.
(No square hit boxes here.)
Search WWH ::

Custom Search