Классическая страница

HTML

<body>
	<div id="matrix"></div>

    

</body>

CSS

#matrix
{
	width: 400px;
	height: 400px;
	border-top: 1px solid #999;
	border-left: 1px solid #999;	
}

#matrix .cell
{
	float: left;
	width: 19px;
	height: 19px;	
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;	
}

JavaScript

//

// Создание матрицы.
//
function createMatrix()
{
	
	var matrix = document.getElementById('matrix');
	var n = 20 * 20;	
	
	for (var i = 0; i < n; i++)
	{
		var div = document.createElement('div');
		div.className = 'cell';
		div.id=i;
		matrix.appendChild(div);
	}
	
}

//
// Чтение ячейки матрицы.
//
function getCell(row, col)
{
	var id_div = document.getElementById('matrix').children [(row - 1) * 20 + (col-1)];
	var atribut=id_div.getAttribute('style');
    if (atribut==null ||atribut==undefined || atribut=='') {return false}
    	else return true;
	

	// Функция принимает координаты ячейки
	// должна вернуть true, если она закрашена,
	// false, если не закрашена.
}

//
// Установка ячейки матрицы.
//
function setCell(row, col, val)
{
    var id_div = document.getElementById('matrix').children [(row - 1) * 20 + (col-1)];
    val==true? id_div.style.backgroundColor = 'red':id_div.removeAttribute('style');
	// Функция принимает координаты ячейки
	// если val == true, закрашивает ячейку,
	// иначе убирает закраску.
}
//обработчик клавиатуры
window.onkeydown=function(e){
	
 // way_arr=[[10,11],[10,10],[10,9],[9,9],[9,10]]
 function move_arrow(x,y){
 	if (!getFinish(way_arr[0][0]+x,way_arr[0][1]+y)) {
 	    if(!getCell(way_arr[0][0]+x,way_arr[0][1]+y)) {
 		
 	              setCell(way_arr[0][0]+x,way_arr[0][1]+y,true);
	  	          m=[way_arr[0][0]+x,way_arr[0][1]+y];
	  	          setCell(way_arr[4][0],way_arr[4][1]);
	  	          way_arr.unshift(m);
	  	          way_arr.pop();
	  	      
	  	}
	}
 }
	//============
	function getFinish(row,col){
		var div=document.getElementById('matrix').children [(row - 1) * 20 + (col-1)];
		if (div.id==500) {
			alert('FINISH!!!')
			console.log(div.id)
			return true};
    
		return false;
		

	} 
	//============
	switch (e.which) { 
	  case 39: if (way_arr[0][1] == 20 ){break}
	 			move_arrow(0,1)
	  	
      break
      case  40: if (way_arr[1][0] == 19 || way_arr[1][0] == 20){break}
      			move_arrow(1,0)
       
   ...