Javascript-форум - Не работает clearInterval

Есть заголовок который двигается по квадрату
Нужно, чтобы заголовок при клике на него ускорялся и при достижении 10 кликов на 11-й менял фразу на "Вы победили" и ОСТАНАВЛИВАЛСЯ.
Код работает нормально за исключением остановки. На 11-й клик фраза меняется, но заголовок продолжает движение. Прошу помощи. В чем ошибка, почему он не останавливается и как решить?
<head>
<meta charset="UTF-8">
<title> INTERACTIVE PAGE <3 </title>
</head>
<body>
<h1 id="heading"> Hello, world! </h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var leftOffset = 0;
var downOffset = 0;
var rightOffset = 200;
var topOffset = 200;
var moveHeading = function () {
if (leftOffset <= 200) {
$("#heading").offset({left: leftOffset});
leftOffset++;
downOffset = 0;
} else if (downOffset <= 200) {
$("#heading").offset({top: downOffset});
downOffset++;
rightOffset = 200;
} else if (rightOffset >= 0) {
$("#heading").offset({left: rightOffset});
rightOffset--;
topOffset = 200;
} else if (topOffset >= 0) {
$("#heading").offset({top: topOffset});
topOffset--;
} else leftOffset = 0
};
var fast = 1000;
var moveInterval = setInterval(moveHeading, 1000);
var clickNumbers = 1;
var clicks = function () {
if (clickNumbers < 10) {
clearInterval(moveInterval);
var moveIntervalSecond = setInterval(moveHeading, fast = fast*0.5 );
$("#heading").text(clickNumbers);
clickNumbers++;
}
else {
$("#heading").text("Вы победили!!!");
clearInterval(moveIntervalSecond);
}
};
$("h1").click(clicks)

</script>
</body>
</html>