JQuery forループと配列 - なぜこの変数は未定義ですか？

Question

私は蛇のゲームのチュートリアルに従っています。私は 'paint（）'関数for-loopの中に何が起こるかを見るために 'snake_array.pop（）'を入れました。なぜなら、私はなぜ次のエラーが出るのか理解しようとしています：

"Uncaught TypeError：定義されていないプロパティ 'x'を読み取れません。

「x」が定義されていない理由はありません。 forループの最後の繰り返しはc = snake_array [2]、snake_array [2]は{x：2、y：2}です。では、なぜxが定義されていないと言っているのですか？

$(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

あなたは変数tailを設定するときは、配列から要素を削除します。この配列は、次の行で参照されます。var c = snake_array[i];

これは、forループの最後の繰り返しに対して、cが空の配列のインデックスiでオブジェクトを参照することを意味します。何も見つからないため、未定義のエラーです。