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="labyrinth1" class="labyrinth">
        <img class="labyrinth-image" id="lab1-mouse" src="http://matteosistisette.github.io/jquery-ui-labyrinth/example-images/mouse.jpg"/>
        <img class="labyrinth-image" id="lab1-cheese" src="http://matteosistisette.github.io/jquery-ui-labyrinth/example-images/cheese.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;
}
#lab1-mouse {
	top: 120px;
	left: 20px;
}
#lab1-cheese {
	top: 230px;
	right: 0;
}

JavaScript

$(function(){
 
        // First labyrinth: one in-out pair. 
 
    	$("#labyrinth1").labyrinth({
            cellSize: 40, 
            rows: 10, 
            columns: 12, 
            borderWidth: 5,
            borderLineCap: "square", //square is default
            borderColor: "#406060",
            drawWidth: 2,
            drawColor: "#000000",
            
            // Cells are numbered from left to right
            //  and from top to bottom, row-wise. First is 0
            inOutPairs: [[48,83]], 
            
            // Padding (outside labyrinth): top, right, bottom, left.
            // Padding area is drawable too.
            padding: [2, 100, 2, 140],
            
            onComplete: function(n) {
                alert("Congratulations! The mouse got the cheese!");
                this.reset();
            }
    	});
});

//See another example here:
// http://jsfiddle.net/matteosistisette/25wET/