これは無限ループですが、私の人生のためにはできません理由を理解してください

Question

それほど私はキャンバスを使ってうまくいくために少しウェブアプリケーションを作っていますが、私は立ち往生しています。私は、回転するn-sidedポリゴン（線の描画はすでに動作します）をしたいと思います。ゲームループはグリッド配列をループし（グリッド上の各点はPoint（）オブジェクトのサブクラスを保持します）、それぞれに対してtick（）メソッドを呼び出します。 ShapePoint（）オブジェクト（中央のマウスをキャンバスに配置する）に当たるまで、すべてがうまく動作します。 ShapePointのtick（）メソッドは、何とか無限ループです。内部にconsole.log（ "hi"）を置くと、約2000の "hi"メッセージが得られますので、（理論的には）動作しています。面白いのは、たとえそれがstoke（）でループしていても、何も起こっていないということです！

//################################################################ 
//     THIS IS THE PROBLEM CLASS. 
// So pretty much, when the game loop calls the tick() funciton 
// of ANY ShapePoint object, everything hangs. The game is still 
// looping through the ENTIRE tick() function (put console.log() 
// functions in and you'll see what I mean) continually, but the 
// effects it is supposed to display aren't shown. 
// 
//################################################################ 
    function ShapePoint(x, y, sides) { 
     //position variable 
     this.positionOnCanvas = [x, y]; 
     //number of sides 
     this.N = sides; 
     //current step 
     this.step = 0; 
     //the array to store all the angle data 
     this.thetas = new Array(this.N); 
     //the array to store all the vertex data 
     this.vertList = new Array(this.N); 
     //function to increase all the angels by an even amount 
     this.stepPoints = function(s) { 
      //for every side 
      for (i=0; i<this.N; i++) { 
       //multiply the current 'i' value by ((360/number of sides) + current step). This serves to create points at even intervals all the way around a circle, and have it increase by s every loop 
       this.thetas[i] = i*((360/this.N) + s); 
       //get the x value with 40*cos(angle for this point). Same for y, only with sin. Round both to 2 decimal places 
       this.vertList[i] = [Math.round((40*(Math.cos(this.thetas[i])))*100)/100, Math.round((40*(Math.sin(this.thetas[i])))*100)/100]; 
       //if the current angle is between 90 and 180... 
       if (this.thetas[i]>=90 && this.thetas[i]<=180) { 
        //invert the x value 
        this.vertList[i][0] *= -1; 
       //else if the angle is between 180 and 270... 
       } else if (this.thetas[i]>=180 && this.thetas[i]<=270) { 
        //invert both the x and the y values 
        this.vertList[i][0] *= -1; 
        this.vertList[i][1] *= -1; 
       //else if the angle is between 270 and 360... 
       } else if (this.thetas[i]>=270 && this.thetas[i]<=360) { 
        //invert the y value 
        this.vertList[i][1] *= -1; 
       } 
      //nothing needed for 0-90 because both are positive 
      } 
     } 
     this.tick = function() { //<<<<<<<<THIS IS THE PROBLEM FUNCTION! 
      //setup all the points forward 
      this.stepPoints(this.step); 
      //for every side in this polyogn... 
      for (i=0; i<this.N; i++) { 
       //shorten the location of the positions 
       var posX = this.vertList[i][0] + this.positionOnCanvas[0]; 
       var posY = this.vertList[i][1] + this.positionOnCanvas[1]; 
       //begin drawing 
       ctx.beginPath(); 
       //move to the x and y location of the current point 
       ctx.moveTo(posX, posY); 
       //if point is not the last in the array... 
       if (i < this.N-1) { 
        //draw a line to the next point in the array 
        ctx.lineTo(this.vertList[i+1][0] + this.positionOnCanvas[0], this.vertList[i+1][1] + this.positionOnCanvas[1]); 
       //else... 
       } else { 
        //draw a line to the first point in the array 
        ctx.lineTo(this.vertList[0][0] + this.positionOnCanvas[0], this.vertList[0][1] + this.positionOnCanvas[1]); 
       } 
       //draw a line 
       ctx.strokeStyle = "#000000"; 
       ctx.lineWidth = 0.5; 
       //end 
       ctx.stroke(); 
       //draw the vertex 
       ctx.fillStyle = "orange"; 
       ctx.fillRect(posX-2, posY-2, 4, 4); 
      } 
      //draw the origin of the polygon 
      ctx.fillStyle = "lightPurple"; 
      ctx.fillRect(this.positionOnCanvas[0]-2, this.positionOnCanvas[1]-2, 4, 4); 
      //if the step is greater than 360, set it to 0 
      this.step = this.step % 36; //(thanks Neikos!) 
     } 
    } 
    ShapePoint.prototype = new Point(); 

私は時間を別々に調整しましたが、私の人生にとって問題は何かを見ることはできません！もし誰かがそれを理解できれば、それは素晴らしいだろう。これがどの程度正確に実装されているかについての詳細が必要な場合は、JSFiddleを作成しました。事前に感謝して、この場所は常にとても有用です！

EDIT ::私は私のコードを実現行うには、少し不格好ですが、私はすべてが私は

Answer 1

user2310289次の時間のために学ぶのは本当に助けないものを入力すると、上記の彼/彼女のコメントで正しいです：あなたが使用しています単一のグローバルi変数がstepPointsとtickの両方にあるため、これらのメソッドは相互に干渉しています。

メソッド内で使用される変数は、別途宣言されていない限り、暗黙的にローカルな言語がありますが、JavaScriptはそれらの言語の1つではありません。 JavaScriptでは、varキーワードを使用してローカル変数を宣言する必要があります。そうでない場合は暗黙的にグローバル変数になります。