HTML and CSS Reference
In-Depth Information
x: 120, y: 100, shape: 'polygon', color: "red",
points: [[ 0, 0 ], [ 100, 0 ],[ 120, 25],[ 50, 50]]
}));
stage.viewport(400,400);
stage.centerOn(100,200);
$(Q.wrapper).on('touchstart',function(e) {
var touch = e.originalEvent.changedTouches[0];
if(touch.target.sprite) {
touch.target.sprite.destroy();
} 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
}));
}
e.preventDefault();
});
}));
Q.stageScene("level");
});
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.)
