JQuery für Schleife & Array - Warum ist diese Variable nicht definiert?

Question

Ich folge einer Schlange Spielanleitung. Ich habe 'snake_array.pop()' in die 'paint()' -Funktion für-loop gesetzt, um zu sehen, was passieren würde, und ich versuche zu verstehen, warum ich den folgenden Fehler erhalte:

"Uncaught TypeError: Die Eigenschaft 'x' von undefined kann nicht gelesen werden.

Ich sehe nicht, warum 'x' nicht definiert ist. Die letzte Iteration der paint() for-Schleife macht c = snake_array [2] und snake_array [2] ist {x: 2, y: 2}. Also warum gibt es an, dass x undefiniert ist?

$(document).ready(function(){ 
 
    
 
var canvas = $("#canvas")[0]; 
 
var ctx = canvas.getContext("2d"); 
 
var w = $("#canvas").width(); 
 
var h = $("#canvas").height(); 
 

 
ctx.fillStyle = "white"; 
 
ctx.fillRect(0, 0, w, h); 
 
ctx.strokStyle = "black"; 
 

 
var snake_array; 
 

 
create_snake(); 
 
function create_snake() 
 
{ 
 
    var length = 5; 
 
    snake_array = []; 
 
    for(var i = length - 1;i>=0;i--) 
 
    { 
 
     snake_array.push({x:i,y:2}); 
 
    } 
 
} 
 
    
 
function paint() 
 
{ 
 
    
 
    for(var i=0; i < snake_array.length; i++) 
 
    { 
 
     var tail = snake_array.pop(); 
 
    
 
\t \t \t var c = snake_array[i]; 
 
\t \t \t ctx.fillStyle = "blue"; 
 
\t \t \t ctx.fillRect(c.x*10, c.y*10, 10, 10); 
 
\t \t \t ctx.strokeStyle = "white"; 
 
\t \t \t ctx.strokeRect(c.x*10, c.y*10, 10, 10); 
 
     
 
    } 
 
} 
 
paint(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas" width="450" height="450"></canvas>

Answer 1

Wenn die Variable tail gesetzt ist, werden Sie ein Element aus dem Array entfernt wird. Dieses Array wird in der nächsten Zeile referenziert: var c = snake_array[i];

Das bedeutet, dass bei der letzten Iteration der for-Schleife c in einem leeren Array auf Objekt i referenziert! Nichts wird gefunden, daher der undefinierte Fehler.