HTML and CSS Reference
In-Depth Information
<style>
body { padding:0px; margin:0px; }
canvas { background-color:black; }
</style>
</head>
<body>
</body>
</html>
Next, create the
blockbreak.js
file referenced in
Listing 11-5
and enter the code in
Listing 11-6
to get
a simple paddle up and running. To run the game, you need to run it from a server on localhost because of the
loaded sprite file. You also need to copy in the
blockbreak.png
file from the game assets into
images/
and the
blockbreak.json
file into
data/
subdirectories under the game to make the assets available.
Listing 11-6:
blockbreak.js
$(function() {
var Q = window.Q = Quintus()
.include('Input,Sprites')
.setup();
Q.input.keyboardControls();
Q.input.touchControls({
controls: [ ['left','<' ],[],[],[],['right','>' ] ]
});
Q.Paddle = Q.Sprite.extend({
init: function() {
this._super({
sheet: 'paddle',
speed: 200,
x: 0
});
this.p.x = Q.width/2 - this.p.w/2;
this.p.y = Q.height - this.p.h;
if(Q.input.keypad.size) {
this.p.y -= Q.input.keypad.size + this.p.h;
}
},
step: function(dt) {
if(Q.inputs['left']) {
this.p.x -= dt * this.p.speed;
} else if(Q.inputs['right']) {
this.p.x += dt * this.p.speed;
}
if(this.p.x < 0) {
this.p.x = 0;
