HTML and CSS Reference
In-Depth Information
Exercising the TileLayer Code
To test out this code, you need the standard HTML bootstrap file. Create a new file called
platform.html
and
enter in the code in
Listing 18-2
.
Listing 18-2:
The platform.html bootstrap
<!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>Platformer</title>
<script src='js/jquery.min.js'></script>
<script src='js/underscore.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_anim.js'></script>
<script src='js/quintus_platformer.js'></script>
<script src='platform.js'></script>
<style>
* { padding:0px; margin:0px; }
</style>
</head>
<body>
</body>
</html>
This is the standard Quintus code, pulling in the required dependencies and previously written modules along
with the new
quintus_platformer.js
module you started to write.
Next, create the
platform.js
file mentioned in the preceding file, and enter the start of the platformer that
will be built in the rest of this chapter. Note that it contains some additional loading and animation code that
Listing 18-3:
The initial platformer code
$(function() {
var Q = window.Q = Quintus()
.include('Input,Sprites,Scenes,Anim,Platformer')
.setup('quintus', { maximize: true })
.controls();
Q.scene('level',new Q.Scene(function(stage) {
Q.compileSheets('sprites.png','sprites.json');
stage.insert(new Q.Repeater({ asset: 'background-wall.png',
