LAB | Canvas Race Car

Learning Goals

This exercise allows you to practice and apply the concepts and techniques taught in class.

Upon completion of this exercise, you will be able to:

• Use Canvas API to create a simple 2d game.
• Implement game logic and UI using HTML, CSS, and JavaScript, including start, game, and end game screens.
• Draw shapes using Canvas API methods.
• Change the style and color of the Canvas shapes.
• Create animations in Canvas using a game loop that continuously updates the screen.
• Load and display images of different formats on canvas.
• Display text on canvas.
• Handle user input and events to control game elements.
• Create and display randomly generated obstacles to add complexity to the game.

---

Introduction

We are ready to start making some games with canvas help, so in this first exercise, we will do a Car Race using some basic animations we learned today.

Remember, you have the Learning Units to check any concept you need. We are working with the 2D context, so you should think the canvas is a cartesian plane, where you can move elements changing their position in any of the axis.

Requirements

• Fork this repo
• Clone this repo

Submission

• Upon completion, run the following commands:

  git add .
  git commit -m "done"
  git push origin master
  

• Create Pull Request so your TAs can check up your work.

Instructions

Iteration 1: Draw the game board

The first thing we need is to create our board. The left side of the image is already on the HTML file, but when we click on the Start Game button, we need to create the canvas and display the road.

The canvas HTML element is already part of the HTML starter code provided in the index.html file. In addition, you can find the image of the road in the images folder.

Iteration 2: Draw the car

Once we have our road, we need the player's car - the same as the road. In the images folder, you will find a .png file you should use.

Iteration 3: Make the car move right and left

In our game, the player can only move the car to the right and left. Using the left and right arrows, the player should be able to move the car.

💡 Remember the boundaries!

Iteration 4: Create obstacles

Now let's make this interesting. First, we should create obstacles that show up every specific amount of time.

They will always start in the position 0 of the y axis (the obstacles will be coming from the top of the canvas), but you should make them appear in a random place on the x-axis.

Iteration 5: Move the obstacles

To move the obstacles, we need to update our canvas continuously. In this iteration, you need to continually change the position of the obstacles in every update, making them move down the road.

Iteration 6: Points, points, points

Oh! If we want to challenge somebody, we need to quantify who is making it better. So we need to add a score. Add a method to count points while you keep the car avoiding obstacles.

Happy coding! ❤️