Javascript-форум - Игра на jQuery

Здравствуйте, знающие!

У меня к вам вопрос.
Передо мной встала задача в университете, которую попросил реализовать преподаватель, а я застрял и не могу её решить. Я надеюсь Вы мне поможете.

Суть вопроса такова.
Есть 7 ячеек. В первых трех - черные шарики, в последних трех - белые. Задача. Реализовать вроде бы как "игру", которая будет заключаться в том, что бы по очереди передвинуть черные шарики на место белых, а белые - на место черных. Шарики могут "перепрыгивать" друг через друга и ходить только в пустую ячейку.

Вот что я сумел "наваять"

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery.js"></script>
<style>
.black {background-color:#000;
border:1px solid black}
.white {background-color:white;
border:1px solid black}
.empty {background-color:white;}
.l {
	display:block;
	width:100px;
	height:100px;
	float:left;
	margin-right:10px;
	border-radius:50px;}
</style>
</head>
<body>
<div class="main">
<div class="1 l black"><a class="left" href="#"><-</a>&nbsp<a href="#" class="right">-></a></div>
<div class="2 l black"><a class="left" href="#"><-</a>&nbsp<a href="#" class="right">-></a></div>
<div class="3 l black"><a class="left" href="#"><-</a>&nbsp<a href="#" class="right">-></a></div>
<div class="4 l"></div>
<div class="5 l white"><a class="left" href="#"><-</a>&nbsp<a href="#" class="right">-></a></div>
<div class="6 l white"><a class="left" href="#"><-</a>&nbsp<a href="#" class="right">-></a></div>
<div class="7 l white"><a class="left" href="#"><-</a>&nbsp<a href="#" class="right">-></a></div>
</div>

<script>

    $(".l.black a.right").click(function () {
        $('.l').next().addClass('black');
    });

    $(".l.white a.left").click(function () {
        $('.l').prev().addClass('white');
    });

</script>

</body>
</html>

Заранее благодарю.