Labyrinth

by sabof

HTML

<body>
<table id=myTable>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="wall"></td>
    <td class="finish">finish</td>
  </tr>
  <tr>
    <td></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td class="wall"></td>
    <td></td>
    <td class="wall"></td>
  </tr>
  <tr>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="wall"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   ...

CSS

html,body {
	padding:0;
	margin:0;
	height:100%;
	overflow:hidden;
}

#myTable {
    width:100%;
    height:100%;
	border-spacing: 0;
    border-collapse: collapse;
    
}

td tr{
	text-align:center;
    width:5%;
    height:5%;
    padding:0;
    margin:0;
    border-spacing: 0;
    border:0px;
}

.start {
	background:green;
    width:5%;
    height:5%;
}

.wall {
background:blue;
}

.finish {
	background:red;
    width:5%;
    height:5%;
}

JavaScript

$(document).ready(function (){
  var isRunning = false;
  
  $('#myTable tr td.wall').on('mouseenter',function(){
    if (isRunning) {
        $('body').css( "background-color", "yellow");
        alert("You hit a wall!");
        isRunning = false;
        }    
	})
  
	$('#myTable tr td.finish').on('mouseenter',function(){
    if (isRunning)
        alert("You did it!");
	})
  
	$('#myTable tr td.wall').on('mouseleave',function(){
		$('body').css( "background-color", "white");
	})
  
	$('.start').click(function() {
        isRunning = true;
    });
});