Arx777,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.eat {
background-image: url(http://wwww.lenagold.ru/fon/kam/kampl/chb/kampl33.jpg);
}
.water {
background-image: url(http://static.hdw.eweb4.com/media/thumbs/1/97/961788.jpg);
}
td {
height: 25px;
width: 30px;
background-image: url(http://pics.geekweekgerman.de/2012/05/bg_gras041-150x150.gif);
border: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var mazePacman = [
[2, 2, 2, 2, 2, 0, 0, 0, 0, 2, 2, 2, 2, 2],//0
[2, 0, 2, 0, 2, 2, 2, 2, 2, 2, 0, 2, 0, 2],//1
[2, 2, 2, 2, 2, 0, 0, 0, 0, 2, 2, 2, 2, 2],//2
[0, 0, 2, 0, 2, 2, 2, 2, 2, 2, 0, 2, 0, 0],//3
[2, 2, 2, 0, 2, 0, 0, 0, 0, 2, 0, 2, 2, 2],//4
[2, 0, 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2],//5
[2, 2, 2, 0, 2, 0, 0, 0, 0, 2, 0, 2, 2, 2],//6
[0, 0, 2, 2, 2, 0, 0, 0, 0, 2, 2, 2, 0, 0],//7
[0, 0, 2, 0, 1, 1, 1, 1, 1, 1, 0, 2, 0, 0],//8
[0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 0, 2, 0, 0],//9
[0, 0, 2, 2, 1, 1, 1, 1, 1, 1, 2, 2, 0, 0],//10
[0, 0, 2, 0, 2, 0, 0, 0, 0, 2, 0, 2, 0, 0],//11
[0, 0, 2, 0, 2, 0, 0, 0, 0, 2, 0, 2, 0, 0],//12
[2, 2, 2, 2, 2, 2, 0, 0, 2, 2, 2, 2, 2, 2],//13
[2, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 2],//14
[2, 2, 2, 0, 2, 2, 2, 2, 2, 2, 0, 2, 2, 2],//15
[0, 0, 2, 2, 2, 0, 0, 0, 0, 2, 2, 2, 0, 0],//16
[2, 2, 2, 0, 2, 2, 0, 0, 2, 2, 0, 2, 2, 2],//17
[2, 0, 2, 0, 0, 2, 2, 2, 2, 0, 0, 2, 0, 2],//18
[2, 2, 2, 2, 2, 2, 0, 0, 2, 2, 2, 2, 2, 2] //19
];
var table = $("<table/>", {
"class": "square-Pacman",
"cellSpacing": 0
});
$.each(mazePacman, function(indx, el) {
var tr = $("<tr/>").appendTo(table);
$.each(el, function(indx, elem) {
$("<td/>", {
"class": elem == 2 ? "eat" : elem == 1 ? "water" : ""
}).appendTo(tr)
})
});
table.appendTo("#main_container");
});
</script>
</head>
<body>
<div id="main_container"></div>
</body>
</html>