Определение неправильного поведения движения змей в змеиной игре

Question

У меня есть игра-змея с классами: BodyPart, Snake и SnakeGame. Класс BodyPart действует как узел, который составляет класс Snake, который по существу является связанным списком BodyParts, который использует методы рекурсии для рисования и извлечения/определения местоположения каждой BodyPart, созданной при употреблении яблока.

Я тестирую добавление частей тела к Змее из яблок, имитируя это событие щелчком мыши. Моя проблема связана с странностью поведения, вызванной загрузкой окна, потому что по умолчанию элемент <canvas> не имеет фокуса, поэтому я должен щелкнуть его, чтобы события клавиатуры на <canvas> были услышаны. Это inital нажмите, чтобы дать фокус <canvas> вызывает создание части тела и добавление к змее. Моя проблема в том, что когда змея начинает двигаться, вновь созданная часть тела не следует за головой. Только через пару секунд функциональность вновь созданной части тела начинает работать и следует за головой. Дополнительные клики для создания частей тела не создают никаких ошибок, только первый щелчок.

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

Главная код на работе:

gameloop() { 
    var ctx = this.ctx; 

    this.snake.move(); 

    ctx.clearRect(0,0, this.canvas.width, this.canvas.height); 

    this.snake.draw(ctx); 

    setTimeout($.proxy(this.gameloop, this), this.frameLength); 
} 
move() { 
    var head = this.head; 

    //recursively pass back new position for each BodyPart node to be drawn 
    head.passBackPosition(); 

    //get new position for the root node 
    switch(this.direction) { 
     case "up": 
      head.yPosition -= this.velocity; 
      break; 

     case "down": 
      head.yPosition += this.velocity; 
      break; 

     case "left": 
      head.xPosition -= this.velocity; 
      break; 

     case "right": 
      head.xPosition += this.velocity; 
      break; 
    } 
} 
position(x, y) { 
    if(x && y) { 
     this.xPosition = x; 
     this.yPosition = y; 
    }else { 
     return {x:this.xPosition,y:this.yPosition}; 
    } 
} 

Херес jsfiddle игры: https://jsfiddle.net/gabewest1/hq8wqwt4/7/

Answer 1

Я играл с скрипкой и тело не после головы происходит вблизи границ, где х == 0 или у == 0.

Чтение кода, я нашел:

position(x, y) { 
    if(x && y) { 
     this.xPosition = x; 
     this.yPosition = y; 
    }else { 
     return {x:this.xPosition,y:this.yPosition}; 
    } 
} 

Это означает, что всякий раз, когда вы находитесь на любой из этих границ, следующие строки не выполняются:

this.xPosition = x; 
    this.yPosition = y; 

Решение:

position(x, y) { 
    this.xPosition = x; 
    this.yPosition = y; 
    return {x:this.xPosition,y:this.yPosition}; 
} 

Просмотреть скрипку: https://jsfiddle.net/vzsf2nee/1/