Overview

• Added support for multiple lanes.
• Added a road class to handle the drawing of the road and its lanes.
• Changed the way the car is drawn to use the new road class.
• Added a function to lerp between two values.

File wise changes made

index.html

• Added a script tag to include "road.js".

main.js

• Changed the id of the canvas element from 'myCanvas' to 'myCanvas'.
• Changed the width of the canvas element from 200 to 200.
• Changed the context of the canvas element from '2d' to '2d'.
• Created a new instance of the Road class and stored it in the road variable.
• Changed the y-coordinate of the car to 100.
• Added a call to the road.draw() method before drawing the car.
• Added a call to the ctx.restore() method after drawing the car.
• Changed the height of the canvas element to match the height of the window.

road.js

• Created a new class called Road.
• The Road class has a constructor that takes three arguments: x, width, and laneCount.
• The constructor initializes the following properties: x, width, laneCount, left, right, top, bottom, borders.
• The Road class has a method called getLaneCenter that takes a laneIndex as an argument and returns the center of the lane.
• The Road class has a method called draw that draws the road to the canvas.
• The Road class has a method called lerp that interpolates between two values.

Summary

• In index.html, the script tag for road.js was added.
• In main.js, several changes were made:
  • The variables canvas, ctx, and car were declared with a different capitalization style compared to before.
  • The function animate was modified.
  • A new road variable was declared, and a new instance of the Road class was created.
  • The canvas.height property is now updated within the animate function instead of being set to a fixed value.
  • A new ctx.save() call was added before the ctx.translate() call, and a new ctx.restore() call was added afterward.
• In road.js, a new Road class was defined, which represents a road with multiple lanes.
  • The Road class includes constructors for initializing a road object with specified parameters.
  • The getLaneCenter() method is used to calculate the center position of a specific lane on the road.
  • The draw() method is used to draw the road onto a canvas context, including lane markings and borders.
• Additionally, a new function called lerp was added, which is used to interpolate between two values.