We are ready to start making some games with canvas help, so in this first exercise we will a Car Race using some basic animations we learned today.
Remember you have the Learning Units to check any concept you might need. We are working with 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.
- Fork this repo
- Clone this repo into your
~/code/labs - The images are also included in the repository
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 StartGame button, we need to create the canvas and display our road.
Once we have our road, we need the player´s car. On the images folder, you will find a .png file you should use for the player.
In our game, the player will only be able to move the car to the right and left. Using left and right arrows, the player should be able to move the car.
💡 Remember the boundaries!
Now let´s make this interesting. We should create obstacles that shows up every certain amount of times. (Remember how we did them on the Learning Unit). In this iteration, just limit to create them 😉
They will always start in the position 0 of the y axis, but you should make them appear in a random place of the x axis.
For moving the obstacles, we need to continuously update our canvas. In this iteration you need to continuously change the position of the obstacles in every update, making them move down the road.
Oh! If we want to challenge somebody, we need to quantify who is making it better. So we need to add a score. Go ahead and add a method to count points while you keep the car avoiding obstacles.
