HTML and CSS Reference
In-Depth Information
content="width=device-width, user-scalable=0,
minimum-scale=1.0, maximum-scale=1.0"/>
<title>SVG Test</title>
<script src='jquery.min.js'></script>
<script src='underscore.js'></script>
<script src='quintus.js'></script>
<script src='quintus_input.js'></script>
<script src='quintus_sprites.js'></script>
<script src='quintus_scenes.js'></script>
<script src='quintus_svg.js'></script>
<script src='cannon.js'></script>
<style>
* { padding:0px; margin:0px; }
</style>
</head>
<body>
</body>
</html>
Next create a file called
cannon.js
referenced in the preceding file. It eventually holds the Box2D-powered
cannon game built later in this chapter, but for now, it just holds some basic SVG testing code.
Add the code in
Listing 14-8
to
cannon.js
to the new file. Its goal is to test out the three different suppor-
ted shapes—blocks, circles, and polygons—and test out the
browserToWorld
method to ensure you can add
objects at points where the user touches the screen.
Listing 14-8:
Initial cannon.js file
$(function() {
var Q = window.Q = Quintus()
.include('Input,Sprites,Scenes,SVG')
.svgOnly()
.setup('quintus',{ maximize: true });
Q.scene('level',new Q.Scene(function(stage) {
stage.insert(new Q.Sprite({
x: 100, y: 250, w: 500, h: 50
}));
stage.insert(new Q.Sprite({
w: 30, h:20, x: 0, y: 100
}));
stage.insert(new Q.Sprite({
r: 30, x: 50, y: 100, shape:'circle'
}));
stage.insert(new Q.Sprite({
