O'Reilly logo

jQuery UI 1.10: The User Interface Library for jQuery by Dan Wellman, Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a maze game using the widgets

We've now reached the point where we can have a little fun by putting what we've learned about these two components into a fully working example. In our final drag-and-drop example, we're going to combine both of these components to create a simple maze game.

The game will consist of a draggable marker that will need to be navigated through a simple maze to a specified droppable at the other end of the maze. We can make things a little more challenging so that if any of the maze walls are touched by the marker, it will return to the starting position.

The following screenshot shows what we're going to build:

Let's start with the markup. In a new page in your text editor, add the following code:

<!DOCTYPE HTML> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required