jQuery Labyrinth plugin example 1

Simple labyrinth, 1 path.

by matteosistisette

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://matteosistisette.github.io/jquery-ui-labyrinth/css/jquery.labyrinth.css">
<script src="http://matteosistisette.github.io/jquery-ui-labyrinth/js/jquery.labyrinth.js"></script>
<body>
    <div id="labyrinth2" class="labyrinth">
        <img class="labyrinth-image" id="lab2-mouse" src="http://matteosistisette.github.io/jquery-ui-labyrinth/example-images/mouse.jpg"/>
        <img class="labyrinth-image" id="lab2-cheese" src="http://matteosistisette.github.io/jquery-ui-labyrinth/example-images/cheese.jpg"/>
        <img class="labyrinth-image" id="lab2-bear" src="http://matteosistisette.github.io/jquery-ui-labyrinth/example-images/bear.jpg"/>
        <img class="labyrinth-image" id="lab2-honey" src="http://matteosistisette.github.io/jquery-ui-labyrinth/example-images/honey.jpg"/>
  	</div>
</body>

CSS

body {
	font-family: Helvetica, Arial, sans-serif; 
}

.labyrinth {
	position: relative;
	margin-top: 30px;
	margin-bottom: 60px;
}
.labyrinth-image {
	position: absolute;
}
.labyrinth canvas {
	position: absolute;
}

#lab2-mouse {
	top: 0;
	left: 20px;
}
#lab2-cheese {
	top: 320px;
	right: 0;
}

#lab2-bear {
	top: 280px;
	left: 0;
}
#lab2-honey {
	top: 30px;
	right: 20px;
}

JavaScript

$(function(){
 
        // First labyrinth: one in-out pair. 
 
    	$("#labyrinth2").labyrinth({
            cellSize: 40, 
		rows: 10, 
		columns: 12, 
		borderWidth: 5,
		borderLineCap: "round", //only "round" or "square"
		borderColor: "#aa6060",
		drawWidth: 2,
		drawColor: "#000000",
		
		// Two enter-exit pairs:
		inOutPairs: [[12,107], [96,23]],
		
		padding: [2, 100, 2, 140],
		
		onComplete: function(n, isLast) {
			this.options.drawColor="#ff0000";
			var message1="";
			var message2="";
			switch (n) {
				case 0:
					message1= "Congratulations! The mouse got the cheese!\n";
					message2= "Now go help the bear get the honey!!";
				break;
				case 1:
					message1= "Congratulations! The bear got the honey!\n";
					message2= "Now go help the mouse get the cheese!!";
				break;
			}
			var message=message1;
			if (!isLast) message+=message2;
			alert(message);
			if (isLast) {
				this.options.drawColor="#000000";
				this.reset();
			}
		}
    	});
});

//See another example here:
// http://jsfiddle.net/matteosistisette/Tw8kz/