HTML and CSS Reference
In-Depth Information
Make sure you have jQuery, underscore, and all the necessary quintus*.js files in the public/js file; oth-
erwise, the game won't run.
Next is the game in the pong.js file, as shown in Listing 21-9 . Much of this should look familiar from the
Block Break game from Chapter 10, “Bootstrapping the Quintus Engine, Part II.” The pieces of the code that
deal with Socket.io are highlighted as follows (the rest of the code is substantially different than blockbreak.js,
however, so don't just add the highlighted pieces to the previous file):
Listing 21-9: pong.js
$(function() {
var Q = window.Q = Quintus()
.include('Input,Sprites,Scenes')
.setup('quintus');
var socket = io.connect();
Q.input.keyboardControls()
Q.input.touchControls({
controls: [ ['left','<' ],[],[],[],['right','>' ]]
});
var gameType = null, delay = 0;
Q.Paddle = Q.Sprite.extend({
init: function(props) {
this._super(_(props).defaults({
w: 60, h: 20,
speed: 200,
direction: null
}));
},
step: function(dt) {
dt += this.p.paddleDelay / 1000;
this.p.paddleDelay = 0;
if(this.p.direction == 'left') {
this.p.x -= this.p.speed * dt;
} else if(this.p.direction == 'right') {
this.p.x += this.p.speed * dt;
}
if(this.p.x < 0) { this.p.x = 0; }
if(this.p.x > Q.width - this.p.w) { this.p.x = Q.width -
this.p.w; }
},
draw: function(ctx) {
ctx.fillStyle = "black";
ctx.fillRect(Math.floor(this.p.x),
Math.floor(this.p.y),
this.p.w,this.p.h);
}
});
Q.PlayerPaddle = Q.Paddle.extend({
 
 
Search WWH ::




Custom Search