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',
 
 
 
 
Search WWH ::




Custom Search