Пробелема с остонавливанем анимации через ClearInterval в игре JavaScript

Question

Идея игры в том, что заголовок двигается по странице а игрок пытаеться кликнуть по нему. После трех кликов заголовок остонавливается и меняеться на "you win". В моем случае, заголовок меняеться на "you win" но почему то продолжает двигаться несмотря на то, что я остонавливаю его через clearInterval(moveId);внутри фунции stopFunction();

var direction = "right"
var leftOffset = 0;
var topOffset = 0;
var speed = 100;
var clicks = 3;

var moveHeadingRight = function () {
	$("h1").offset({ left: leftOffset });
	leftOffset++;
	if (leftOffset > 100) {
		direction = "down";
	}
};

var moveHeadingDown = function () {
	$("h1").offset({ top: topOffset })
	topOffset++;
	if (topOffset > 100) {
		direction = "left";
	}
};

var moveHeadingLeft = function () {
	$("h1").offset({ left: leftOffset })
	leftOffset--;
	if (leftOffset === 0) {
		direction = "up"
	}
};

var moveHeadingUp = function () {
	$("h1").offset({ top: topOffset })
	topOffset--;
	if (topOffset === 0) {
		direction = "right"
	}
};
var move = function() {
if (direction === "right") {
	moveHeadingRight();
}

if (direction === "down") {
	moveHeadingDown();
}

if (direction === "left") {
	moveHeadingLeft();
}

if (direction === "up") {
	moveHeadingUp();
}
};

var stopFunction = function() {
	if (clicks === 0) {
		$("h1").text("you win!");
		clearInterval(moveId);
	} else if (clicks > 0) {
		clicks--; 
		speed /= 2
		clearInterval(moveId);
		var moveId = setInterval(move, speed);
	}
};
$("h1").click(stopFunction);
var moveId = setInterval(move, speed);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="main-heading">game</h1>

По совету UModel исправил код, не помгло и теперь заголовок не изменяет текст на "you win" по какой то причине, я что то сделал не так?

var direction = "right"
var leftOffset = 0;
var topOffset = 0;
var speed = 100;
var clicks = 3;

var moveHeadingRight = function() {
  $("h1").offset({
    left: leftOffset
  });
  leftOffset++;
  if (leftOffset > 100) {
    direction = "down";
  }
};

var moveHeadingDown = function() {
  $("h1").offset({
    top: topOffset
  })
  topOffset++;
  if (topOffset > 100) {
    direction = "left";
  }
};

var moveHeadingLeft = function() {
  $("h1").offset({
    left: leftOffset
  })
  leftOffset--;
  if (leftOffset === 0) {
    direction = "up"
  }
};

var moveHeadingUp = function() {
  $("h1").offset({
    top: topOffset
  })
  topOffset--;
  if (topOffset === 0) {
    direction = "right"
  }
};
var move = function() {
  if (direction === "right") {
    moveHeadingRight();
  }

  if (direction === "down") {
    moveHeadingDown();
  }

  if (direction === "left") {
    moveHeadingLeft();
  }

  if (direction === "up") {
    moveHeadingUp();
  }
};

var stopFunction = function() {
  if (clicks < 0) {
    $("h1").text("you win!");
    clearInterval(moveId);
  } else if (clicks > 0) {
    clicks--;
    speed /= 2
    clearInterval(moveId);
    moveId = setInterval(move, speed);
  }
};
$("h1").click(stopFunction);
var moveId = setInterval(move, speed);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>game
  <h1>

Answer 1

var direction = "right"
var leftOffset = 0;
var topOffset = 0;
var speed = 100;
var clicks = 3;

var moveHeadingRight = function() {
  $("h1").offset({
    left: leftOffset
  });
  leftOffset++;
  if (leftOffset > 100) {
    direction = "down";
  }
};

var moveHeadingDown = function() {
  $("h1").offset({
    top: topOffset
  })
  topOffset++;
  if (topOffset > 100) {
    direction = "left";
  }
};

var moveHeadingLeft = function() {
  $("h1").offset({
    left: leftOffset
  })
  leftOffset--;
  if (leftOffset === 0) {
    direction = "up"
  }
};

var moveHeadingUp = function() {
  $("h1").offset({
    top: topOffset
  })
  topOffset--;
  if (topOffset === 0) {
    direction = "right"
  }
};
var move = function() {
  if (direction === "right") {
    moveHeadingRight();
  }

  if (direction === "down") {
    moveHeadingDown();
  }

  if (direction === "left") {
    moveHeadingLeft();
  }

  if (direction === "up") {
    moveHeadingUp();
  }
};

var stopFunction = function() {
  clicks--;
  if (clicks <= 0) {
    $("#test").text("you win!");
    clearInterval(moveId);
  } else {
    speed /= 2
    clearInterval(moveId);
    moveId = setInterval(move, speed);
  }
};
$("h1").click(stopFunction);
var moveId = setInterval(move, speed);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="test">game<h1>

БЛОГ НА HUSL

Пробелема с остонавливанем анимации через ClearInterval в игре JavaScript

Ответы (1 шт):