Category Archives: Games

Nokia Series 40 and W3C Widgets

I was quite surprised to notice that latest Series 40 phones support standard W3C widgets. If that wasn’t enough to get my attention I also noticed that they have a competition for creating apps that run on Series 40 Feature Pack 1 devices.

What I did was converted my Symbian^3 game, Blockers, for Series 40 screen size and packaged the game as stated in W3C standard. Unfortunately I don’t have a Series 40 phones myself but luckily Nokia also provides simulator with Nokia Web Tools for testing e.g. Series 40 Web Apps. The shown screenshot was taken from the simulator.

If you happen to have a Series 40  (especially Touch and Type) phone, I would be really interested on hearing how the game works on your phone!

Game can be downloaded from project site, here. …or direct link to .wgt file.

DoodleDrive Alpha Preview Release

The “game” we created with my son on Wednesday, DoodleDrive, got a lot of attention and many of you wanted to try it out yourselves. I have now created a new project to Forum Nokia Projects where you can download the binaries (sis for N8, E7, C7… or deb for N900). I also uploaded the source code for the game so you can study how to make a simple game in ~300 lines of QML. Go ahead and start coding your own games now :)

projects.forum.nokia.com/doodledrive

DoodleDrive

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.