HTML and CSS Reference
In-Depth Information
The demonstration consists of a set of static walls enclosing a set of balls that can react to gravity. Gravity
always stays consistent with reality, but as you rotate the device, gravity changes relative to it, which will cause
the balls to fly around the screen.
Creating a Ball Playground
To start, create a new HTML file called
orient.html
with the contents of
Listing 24-1
.
You need a number of
quintus
files and the engine's dependencies along with
Box2dWeb-2.1.a.3.js
from Chapter 14.
Listing 24-1:
The orientation example HTML file
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=0,
minimum-scale=1.0, maximum-scale=1.0"/>
<title>DeviceOrientation</title>
<script src='js/jquery.min.js'></script>
<script src='js/underscore.js'></script>
<script src='js/Box2dWeb-2.1.a.3.js'></script>
<script src='js/quintus.js'></script>
<script src='js/quintus_input.js'></script>
<script src='js/quintus_sprites.js'></script>
<script src='js/quintus_scenes.js'></script>
<script src='js/quintus_physics.js'></script>
<script src='js/quintus_svg.js'></script>
<script src='orient.js'></script>
<style>
* { padding:0px; margin:0px; }
</style>
</head>
<body>
</body>
</html>
Next, create the
orient.js
file referenced in
Listing 24-1
and fill it with the contents of
Listing 24-2
.
Listing 24-2:
orient.js
$(function() {
var Q = window.Q = Quintus()
.include('Input,Sprites,Scenes,SVG,Physics')
.svgOnly()
.setup('quintus',{ maximize: true });
Q.Ball = Q.Sprite.extend({
init: function(props) {
this._super(_(props).defaults({
shape: 'circle',
color: 'red',