I’ve been crafting the W3C Widgets for Qt Web Runtime (WRT) from the day Qt guys released the version for my Nokia N900. I haven’t been so productive on any other platform.

This time I crafted a small game of Labyrinth. The idea of game should be pretty familiar to everyone. You’ll need to guide the metal ball to goal by tilting the game board. I made it so that on each level there is one hole more compared to previous level. Levels are created randomly.

On the technical side it was easy to use device sensor in JavaScript to track the tilt angles:

// Ball's acceleration
var ballAccX = 0.0;
var ballAccY = 0.0;

// Initialize sensors
wrtSensors = nokia.device.load("sensors");
wrtSensors.startChannel(callback, "AccelerometerAxis", errorCallback);

// Callback function for sensors
// The 2.5 is a magic number that felt good :)
function callback(data) {
	ballAccX = parseFloat(data.axisX) / 2.5;
	ballAccY = parseFloat(data.axisY) / 2.5;
} 

function errorCallback(err) {
}

The animation and simple ball physics are done in JavaScript timer:

// Initialize timer to be run on every 50ms
animate = setInterval("animateBall()", 50);

// Timer function contains most of game logic like
// checking if ball have reached the goal or hole.
// Ball movement and physics are also calculated here
function animateBall() {
	if(gameover==false && goal==false) {
		ballVelX = ballVelX - ballAccX;
		ballX = ballX + ballVelX;
		ballVelY = ballVelY - ballAccY;
		ballY = ballY + ballVelY;	

		checkLimits();
		checkGoal();		

		// Move the ball DIV
		$("#ball").css("left", ballX);
		$("#ball").css("top", ballY);
	} else {
		if(goal) {
			$("#gameover").text("Creating next level!");
			$("#gameover").show();
			clearInterval(animate);
			level++;
			setTimeout("reset()", 1500);
		} else {
			$("#gameover").text("GAME OVER!");
			$("#gameover").show();
			level = 1;
			clearInterval(animate);
		}
	}
}

Here is a small video of what it looks like in action on my Nokia N900:

There are still few known issues in the game:

• It can create a level where goal is unreachable.
• Another issue I’m having with the game is that I haven’t found out how the backlight could be forced to stay on. I wrote a question on Qt Web Runtime forum but haven’t received any answers. If you know how to do it, please respond to my thread.
• It would be nice to have fullscreen mode in games like this. If you know how to create fullscreen widget, please respond to this thread in Qt Forum.

Finally, if you’d like to try it out yourself you can download the widget (ChromeBall.wgt) here.