スネークゲームでヘビの動きの間違った行動を特定する

Question

BodyPart、Snake、SnakeGameというクラスのスネークゲームがあります。 BodyPartクラスは、本質的に、BodyPartのリンクリストであるSnakeクラスを作成するノードとして機能します。このメソッドは、リンゴが食べられたときに作成された各BodyPartの位置を取得および設定するために再帰を使用します。

マウスクリックでこのイベントをシミュレートすることで、Snakeに体の部分を追加してリンゴを食べることをテストしています。私の問題は、デフォルトでは<canvas>要素にフォーカスがないので、ウィンドウがロードされたときに発生する奇妙な動作にあります。そのため、キーボードのイベントを<canvas>で聞く必要があります。その最初のクリックで<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

私はあなたのバイオリンで演奏し、頭以下ではない体は、x == 0の国境付近で発生しましたかy == 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/