Bestimmung der falschen Behavior der Schlangen Bewegung in Snake-Spiel

Question

Ich habe ein Snake-Spiel mit Klassen: BodyPart, Snake und SnakeGame. Die BodyPart-Klasse agiert als ein Knoten, der die Snake-Klasse zusammenstellt, die im Wesentlichen eine verknüpfte Liste von BodyParts ist, deren Methoden Rekursion zum Zeichnen und Abrufen/Festlegen des Speicherorts jedes BodyParts verwenden, der erstellt wird, wenn ein Apple gegessen wird.

Ich teste die Zugabe von Körperteilen in die Schlange aus der Verzehr von Äpfeln durch dieses Ereignis mit einem Mausklick zu simulieren. Mein Problem liegt in der Eigenartigkeit des Verhaltens, das verursacht wird, wenn das Fenster geladen wird, weil das Element <canvas> standardmäßig nicht den Fokus hat, also muss ich darauf klicken, damit Tastaturereignisse auf dem <canvas> zu hören sind. Dieser erste Klick, der den Fokus <canvas> liefert, bewirkt, dass ein Körperteil erstellt und zur Schlange hinzugefügt wird. Mein Problem ist, dass, wenn die Schlange sich zu bewegen beginnt, der neu geschaffene Körperteil nicht dem Kopf folgt. Erst nach ein paar Sekunden beginnt die Funktionalität des neu erstellten Körperteils zu funktionieren und folgt dem Kopf. Zusätzliche Klicks zum Erstellen von Körperteilen verursachen keine Fehler, nur der erste Klick.

Ich habe versucht, den Grund dafür zu lokalisieren, aber nicht kann. Ich bin sicher, dass dieses Problem behoben wird, wenn ich keine neuen Körperteile mit Mausklicks erstelle, aber in diesem speziellen Kontext würde ich gerne die Ursache dieses Verhaltens wissen!

Haupt-Code bei der Arbeit:

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}; 
    } 
} 

Heres ein jsfiddle des Spiels: https://jsfiddle.net/gabewest1/hq8wqwt4/7/

Answer 1

ich mit Ihrer Geige gespielt und der Körper nach dem Kopf nicht passiert, in der Nähe der Grenze, wo x == 0 oder y == 0.

Code Lesen, ich gefunden:

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

Das bedeutet, dass, wenn Sie auf eine dieser Grenzen sind, die folgenden Zeilen nicht ausgeführt werden:

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

Lösung:

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

Siehe die Geige: https://jsfiddle.net/vzsf2nee/1/