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.