Reflection on Car Project

You can find this project here

For the past week, we have been working in pairs to create a simple car mini-game using Javascript. Initially, we programmed in movement functions and a cross-hair pattern before moving on to more advanced features.

The first change we made was creating a car object, to make the code easier to read and to clean up the code base. As we added new features to the game, such as collision detection, we needed to add more properties and methods to the object. The second feature we implemented was quadrant detection, where different sections of the canvas would change colour when you entered them, along with changing the image of the car. While Zoe cleaned up the image, I began creating the basic if statements for the quadrant detection before we came back together to tackle the rest of the code work together.

function get_car_quadrant() {
    context.fillStyle = "#58c8a9";      //colour of border
    if (car.x < canvas.width / 2) {
        if (car.y > canvas.height / 2) {
            //bottom left           
            context.fillRect(0, canvas.height / 2, canvas.width / 2, canvas.height);     //create a filled rectangle
        } else {
            //top left
            context.fillRect(0, 0, canvas.width / 2, canvas.height / 2);
    } else {
        if (car.y > canvas.height / 2) {
            //bottom right
            context.fillRect(canvas.width / 2, canvas.height / 2, canvas.width, canvas.height);
        } else {
            //top right
            context.fillRect(canvas.width / 2, 0, canvas.width, canvas.height / 2);

This worked by checking if the car was in various quadrants using if statements comparing the x and y values to the width and height properties of the canvas. We then created filled rectangles the size of the quadrants to make it appear as if they lit up when the car was in them.

The next feature we added was acceleration and deceleration. When you press the same key more than once in a row, the car will speed up. If you change keys, the car will move off at a slower pace. We didn’t get the car to slow to a stop, but we are otherwise happy with our use of basic acceleration and deceleration.

In the car object, we stored the following properties:

  • x and y co-ordinates as well as x & y speed (dx, dy)
  • speed and angle of travel
  • width and height of car
  • 4 flags for if the car is at the edges of the canvas
  • the co-ordinates of the corners of the car in a two-dimensional array.

We also gave the car object two methods:

  • corner update that calculates the current position of the car’s four corners
  • detect collision which resets the collision flags before detecting if the car is at the edge of the canvas on any side.

    corner_update: function () {
        car.corners[0] = [car.x, car.y];
        car.corners[1] = [car.x + car.width, car.y];
        car.corners[2] = [car.x, car.y + car.height];
        car.corners[3] = [car.x + car.width, car.y + car.height];
    detect_collision: function () {
        this.blocked_left = this.blocked_right = this.blocked_up = this.blocked_down = false;
        var corner = [];
        for (i = 0; i < 4; i++) {
            corner = this.corners[i];
            if (corner[0] <= 50) { //left side this.blocked_left = true; } else if (corner[0] >= canvas.width) {
                this.blocked_right = true;
            if (corner[1] <= 50) { this.blocked_up = true; } else if (corner[1] >= canvas.height) {
                this.blocked_down = true;

These methods were the last code sections we added to the game, as the collision detection was the last feature we added. We decided on corner based collision detection, as we felt it was the most accurate method of keeping the car from going off the edge of the map. By creating methods rather than functions, we kept relevant code inside of car object, making our code easier to understand.

From this project, I have learnt how to use corner-based collision detection, as well as how to implement more advanced movement methods involving angles. I enjoyed working with Zoe, and we successfully split the workload as well as bouncing ideas off of each other.