Labyrinth Game with W3C Widget, Accelerometer API and Nokia N900

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.

My Labyrinth game for Nokia N900

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.

  • http://twitter.com/waiseto Wai Seto

    I am going ask some of the Qt WRT experts and engineers on the blacklight question. Stay tuned.

  • http://twitter.com/waiseto Wai Seto

    I am pasting the text I got from my engineer. Hope this helps.

    QtWRT supports differents viewmodes configurable with the viewmodes property in config.xml:

    You can get and set the current view mode with widget.viewMode
    o
    widget.viewMode = “fullscreen”;

    Note: you can force a view mode switch only between windowed and fullscreen modes
    Monitor view mode changes with widget.onviewmodechange
    widget.onviewmodechange = function(){console.log(widget.viewMode)};

  • http://twitter.com/rajeshlalnokia Rajesh Lal

    viewmode=fullscreen in config.xml ?

  • Cad2print

    Thanks for sharing….