GWT games

Many years ago I wrote javascript application that took an image, broke it up into many pieces, then shuffled them into a puzzle for the user. It only worked in I.E. and was horribly written and hard to maintain.

I wanted to revisit this application and was trying to figure out what the best language/framework to use.

I decided that GWT (Google Web Toolkit) would be an excellent choice for this application.

To see the application go here: http://imageoverflow.appspot.com/puzzle.html?imageUrl=http://imageoverflow.appspot.com/get/3b20793dfc300d058ad04d411da152eb?f=t

Now to the code...

The code consists of the following main classes.

ImagePuzzleWidget
PuzzleGrid
ClickableImage

ImagePuzzleWidget

The ImagePuzzleWidget is the main widget that encapsulates the game. It takes no arguments and is added directly to the Root Panel in the GWT entry point.


public void onModuleLoad() {
RootPanel.get().add(new ImagePuzzleWidget());
}

PuzzleGrid

PuzzleGrid extends the Grid GWT component. Its constructor looks like this:

public PuzzleGrid(final String url,final int cols,final int rows)

This class takes the url of the image you want to scramble as well as how many rows and cols you want.

We add an onLoadHandler that will get executed after the image has been loaded:

image.addLoadHandler(new LoadHandler() {

public void onLoad(LoadEvent event) {
setWidth(image.getWidth() + "px");
setHeight(image.getHeight() + "px");


int blockWidth = image.getWidth() / cols;
int blockHeight = image.getHeight() / rows;
for (int col = 0; col <>
for (int row = 0; row <>
setWidget(row, col,
new ClickableImage(url, blockWidth * col, blockHeight * row, blockWidth, blockHeight, row, col));
}
}
shuffle();

setVisible(true);
}
});

It is this class that does most of the work by splitting the image into sub parts and making ClickableImages out of them.

The class then shuffles the images and sets it as visible.


So now we have an image displayed broken into sub parts and displayed in a grid fashion.


ClickableImage

ClickableImage class, as its name implies embodies a section of the image that can be clicked.

The class basically just extends Image and adds a ClickHandler. I add some extra convenience methods like select and unselect which I won't show for the sake of brevity.

public ClickableImage(String url, int left, int top, int width, int height, int row, int col) {
super(url, left, top, width, height);
this.row = row;
this.col = col;
this.addStyleName("unselected");
this.addClickHandler(new ClickHandler() {

public void onClick(ClickEvent event) {
toggleSelected();

}
});
}


And that is really all there is to it. By using GWT we can focus on writing our OO style code and not worry about the browser.

Make sure you check out the app at: http://imageoverflow.appspot.com/puzzle.html?imageUrl=http://imageoverflow.appspot.com/get/3b20793dfc300d058ad04d411da152eb?f=t

This post was written hastily, if there is any interest or question leave a comment and I'll ake the time to expand.

HTH