Блог

Я пишу приложение Snake game для практики.

У меня есть функция changeDirection, которая задает соответствующее направление в состояние на основе щелчка стрелки:

 changeDirection = event => {
  const { direction } = this.state;

  const keyPressed = event.keyCode;

  if (keyPressed === keyCodes.LEFT_KEY amp;amp; direction !== "right") {
    this.setState({ direction: "left" });
  }
  if (keyPressed === keyCodes.UP_KEY amp;amp; direction !== "down") {
    this.setState({ direction: "up" });
  }
  if (keyPressed === keyCodes.RIGHT_KEY amp;amp; direction !== "left") {
    this.setState({ direction: "right" });
  }
  if (keyPressed === keyCodes.DOWN_KEY amp;amp; direction !== "up") {
    this.setState({ direction: "down" });
  }
}
  

и это работает нормально, но проблема в другой функции.
Я обновляю положение головы змеи на основе состояния направления. и эта функция выполняется каждые 1 секунду (с setInterval), и при изменении направления голова змеи не меняет свое направление сразу. Она выполняет это на следующем шаге.

Я понимаю, что это потому, что состояние нового направления еще не установлено, когда snake перемещается в первый раз, но я не знаю, как это исправить.

вот репозиторий:https://github.com/Dito-Orkodashvili/snake

Вы можете использовать это.

    this.setState({ direction: "down" },anotherFunction());
  

Вызовите вашу функцию в обратном вызове setState, она будет вызвана после обновления состояния.

ссылка:https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296

Вы обновляете состояние только направления. Это приводит к повторному отображению компонента. Затем вы обновляете состояние змеи, и компонент повторно визуализируется снова, а затем, когда вы видите, что заголовок обновлен.

Решением могло бы быть отключение функции moveSnake. Используйте moveSnake только для перемещения змеи после рендеринга компонента.

Создайте другую функцию для обновления состояния head и snake и вызовите ее из обработчика событий клавиатуры. Таким образом, компонент будет повторно отображать все изменения состояния одновременно.

Обновление состояния из setInterval также должно работать, например:

 newDirection;

startGame = () => {
   this.interval = setInterval(() => {
     this.moveSnake();
   }, 200);
};

changeDirection = event => {
    const keyPressed = event.keyCode;

    if (keyPressed === keyCodes.LEFT_KEY amp;amp; direction !== 'right') {
      this.newDirection = 'left';
    }
    if (keyPressed === keyCodes.UP_KEY amp;amp; direction !== 'down') {
      this.newDirection = 'up';
    }
    if (keyPressed === keyCodes.RIGHT_KEY amp;amp; direction !== 'left') {
      this.newDirection = 'right';
    }
    if (keyPressed === keyCodes.DOWN_KEY amp;amp; direction !== 'up') {
      this.newDirection = 'down';
    }
};

moveSnake = () => {
   /* do updates in the snake shape */

   this.setState({
     direction: this.newDirection,
     snake: copyOfSnake
   });
};