in Programming

Still playing around with gameQuery

Many things changed since the first version of this article, so i updated my pong game to current gameQuery version 0.7.1 with jquery 1.10. The old version is still online and can be found here.

Basics

Playgrounds have now a much more jQuery like syntax, you define a playground with $(“#playground”).playground and get a playground with $.playground(). Your playground holds all your sprites.

$("#playground").playground({
	height: get('PLAYGROUND_HEIGHT'),
	width: get('PLAYGROUND_WIDTH'),
	refreshRate: 30
});

The game loop happens in a callback function, you can register it with … tada: registerCallback

$.playground().registerCallback(function() {
	// do something here, function is called every 30ms
}, 30);

A sprite has an animation and can do collision detection. The pong-players and the ball are sprites.

// add a sprite to your playground
$.playground().addSprite('ball', {
	animation: new $.gameQuery.Animation({
		imageURL:"./blank.gif"
	}),
	width: 10,
	height: 10
});
 
// check if ball its a player, if so, change the direction by just changing the sign
$("#ball").collision('.player').each(function(){
	$("#ball").get(0).gameQuery.velX = -$('#ball').get(0).gameQuery.velX;
});

The old version moved the sprites with jQuery left and right attributes. That don’t work anymore, now you have to use the x(), y(), xy() methods from a sprite

// set the ball to center at the beginning
$('#ball').xy(get('PLAYGROUND_WIDTH')/2, get('PLAYGROUND_HEIGHT')/2);
 
// move the player (only y axis possible)
$(player).y(newPos);

Game

… can be found here: http://bohuco.net/labs/gamequery-pong/0.7.1/index.html

gameQuery Links: