Почему не запускается clearInterval?
Потому что всякий раз, когда задаётся новый setInterval, старый нужно убить. А у вас они накапливаются.
Если уж давать код, то лучше так:
<html><title>Click-n-Win!</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div style='width:200px; height:250px; border:1px solid black;'>
    <div id=heading style='position:relative; width:100px; height:50px; border:1px solid red;'>Click</div>
</div>
<script>
var leftOffset = 0, topOffset = 0;

var moveHeading = function () {
  if (leftOffset < $("#heading").parent().innerWidth() - $("#heading").outerWidth() && topOffset <=0)    leftOffset += clicks * 3;
  if (leftOffset >= $("#heading").parent().innerWidth() - $("#heading").outerWidth() && topOffset < $("#heading").parent().innerHeight() - $("#heading").outerHeight())
    topOffset += clicks * 3;
  if (leftOffset > 0 && topOffset >= $("#heading").parent().innerHeight() - $("#heading").outerHeight())   leftOffset -= clicks * 3;
  if (leftOffset <= 0 && topOffset > 0)     topOffset -= clicks * 3;

  $("#heading").offset({ left: $("#heading").parent().offset().left + leftOffset, top: $("#heading").parent().offset().top + topOffset});
};
var clicks = 0, intervalId;

$("#heading").click(function () {
  clicks++;
  if (clicks == 1) intervalId = setInterval(moveHeading, 5);
  if (clicks < 10) $("#heading").text("You clicked "+clicks);
  if (clicks == 10) { clearInterval(intervalId); $("#heading").text("Congratulations! You won!"); }
});
</script>
</body>
</html>