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>
<html>
<head>
<meta charset="utf-8">
<title>Droppable</title>
<link rel="stylesheet" href="development-bundle/themes/redmond/jquery.ui.all.css">
<script src="http://code.jquery.com/jquery...
