CodeAgeBy Sitezack
Canvas for MakersDraw and animate your game0 XP
Chapter progress0/6

Lesson 4 of 7

Make the car move

To animate, change the data (car.x) then redraw everything: clear with clearRect, redraw the car at its new position.

Put that in two functions: drawCar() draws, moveCar(dx) moves then redraws.

function moveCar(dx) {
  car.x = car.x + dx;
  ctx.clearRect(0, 0, 300, 200);
  drawCar();
}

🎯 Your goal

Write the drawCar() function that draws the car at car.x, car.y, and the moveCar(dx) function that adds dx to car.x, clears the canvas and calls drawCar() again.

PRO lesson

This advanced chapter is part of CodeAge PRO. Unlock it to keep your adventure going.

Discover PRO