这是一个无限循环，但是我无法为自己的生活弄清楚为什么

Question

So pretty much I'm making a little web app to get better with using the canvas, but I'm stuck. I would like a rotating n-sided polygon (the drawing of lines already works). The game loop loops through a grid array (each point on the grid holds a subclass of a Point() object), and calls the tick() method on each. Everything works fine until it hits a ShapePoint() object (middle mouse to place on canvas). The ShapePoint's tick() method is somehow an infinite loop. If you put a console.log("hi") inside it, it will give you about 2000 "hi" messages, so it's working (in theory). The funny bit is, even though it is looping through stoke()'es, nothing is happening!

//################################################################
//                 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();

So I've spent hours tweaking different things, and I cannot for the life of me see what the problem is! If anybody can figure it out, it would be fantastic. If you need more context as to how exactly this is implemented, I've created a JSFiddle for you. Thanks in advance, this place is always so helpfull!

EDIT :: I do realize my code is a bit clunky, but I typing out what everything does really helps me learn for the next time

Answer 1

user2310289 is correct in his/her comment above: you're using a single global i variable in both stepPoints and tick , so these methods are interfering with each other.

There are some languages where a variable used in a method is implicitly local unless declared otherwise, but JavaScript is not one of those languages. In JavaScript you need to use the var keyword to declare your local variables, otherwise they are implicitly global.