Uncaught TypeError: Cannot read property undefined

Greetings,

I am having a problem with these blocks of code here:

update(){
        this.rays=[]; // Set rays to an empty array
        for(let i=0; i<this.rayCount;i++){
            const rayAngle=lerp(
                this.raySpread/2,
                -this.raySpread/2,
                i/(this.rayCount-1)
            );

            const start={x:this.car.x, y:this.car.y};
            const end={
                x:this.car.x-
                    Math.sin(rayAngle)*this.rayLength,
                y:this.car.y-
                    Math.cos(rayAngle)*this.rayLength
            };
            this.rays.push([start,end]);
            console.log(this.rays.push()) //debug statement


 draw(ctx){
        try {
        for(let i=0;i<this.rayCount;i++){
            ctx.beginPath();
            ctx.lineWidth=2;
            ctx.strokeStyle="red";
            ctx.moveTo(
                this.rays[i][0].x,
                this.rays[i][0].y,
            
            );
            if (this.rays[i][0]=0){
                console.log(this.rays)
            } else {
                console.log(`The current value for rays is ${this.rays}`); //printing the current value of this.rays to make sure they are within range
            }
            ctx.lineTo(
                this.rays[i][1].x,
                this.rays[i][1].y,
            )
            ctx.stroke();
            }
        } catch (e) {
            console.error(e); // Allows the road to display but not the car or rays
        }

on ctx.moveTo(this.rays[i][0].x),, the index seems to be out of range. However, when I wrap the code in a try catch block and print out the values of the rays to make sure they aren’t undefined, they seem to be working just fine in both the update method and the draw method. What I expect to happen is for the car to be driving around with rays coming out of the front of the car, but the indexing error in the draw method breaks the whole car. With the try catch block, the road still exists along with all the controls (the car is still moving but no longer visible to the user).

Let me know if there is any more information I can provide.

Code Repository

I had figured that was the problem, I just wasn’t completely sure. Now, what will fix the problem? I see that on google chrome, when I print out the number of rays, it gives a continuous output of how many there are in the update method, which comes out to three, so I don’t understand how the array itself is being read as undefined. Should I increment from a different number, or wrap it in a try/catch block?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.