🚗 Motivation

Users will want to control the car, but they have to be able to see it!

🏎 Implementation

• Source a graphic for the car.
• Create an HTML element to represent the car and append it to the DOM.

🚗 Motivation

Once the user starts the car, they'll need to be able to stop it!

🏎 Implementation

• Add an instance method to the Car to stop it.
• Add a computed instance property to the Car to check if the car is started.
• When the spacebar is pressed, conditionally start the car based on whether it is started, else stop it.

Closing in favor of #15

🚗 Motivation

Users will expect the car to accelerate to full speed rather than abruptly begin moving across the screen.

🏎 Implementation

• Move start/stop controls to the "s" key.
• Enhance car class with properties for topSpeed and isAccelerating.
• Enhance car class with an accelerate method.
• Enhance car class with a decelerate method.
• Update ' ' (spacebar) control to toggle acceleration.
• Update speed property to be currentSpeed.
• Rename move method to update for better semantics.
• Add an acceleration property to the Car.
• Enhance car's move method to account for whether the car is isAccelerating.
  • If the car's currentSpeed is 0 and not isAccelerating, do nothing.
  • If the car's currentSpeed is below its topSpeed and the car isAccelerating, update the car's position and increase its currentSpeed by its acceleration.
  • Add a traction property to the car.
  • If the car's currentSpeed is above zero and not isAccelerating decrease its currentSpeed by its traction.
• Refactor.
  • Declare variables in move method closer to their use.
  • Rename decelerate method to coast.
• Change isStarted to a Boolean value.
• Car can only be isAccelerating if it isStarted.
• Decouple changes in car's currentSpeed from whether it isStarted.
• Keep track of overlapping intervals between cycling of start/stop.

🚗 Motivation

Releasing the accelerator may not slow the car down fast enough.

🏎 Implementation

• Add an isBraking property to the car.
• Add a control to toggle the state of isBraking.
• Add a brakes property to the car.
• Enhance update method to account for whether the car isBraking.

🚗 Motivation

Once their car is started, the user will want to steer it.

🏎 Implementation

• Add an instance method to Car that updates its direction and marker rotation.
• Update the move instance method to account for direction.
• Update keypress listener to also turn the car when arrows are pressed.
• Prevent the user from turning the car if it's not started.

🚗 Motivation

The user will want to drive their car, so they need to start it.

🏎 Implementation

• Fix the position of the car image element.
• Define a Car class that takes a marker element, direction, speed, and location.
• Add a move method to the Car that updates its location and its marker position.
• Add a start method to the Car that continuously updates its location and its marker position.
• Add an event listener for spacebar presses to start the car instance.