Week 5 – Khalifa Alshamsi

For the midterm, I plan on creating a car racing game in which the objective is to get as many points as possible depending on how far you reach before colliding with a vehicle.

The Sketch:

Description:

The game uses a simple rectangular design so far until I can finish the game in more detail in which the white rectangle is your car and the blue rectangles are the other cars on the road and you aim to not collide with them.

Script:

let player;
let obstacles = [];
let gameSpeed = 2;

function setup() {
  createCanvas(400, 600);
  player = new Player();
}

function draw() {
  background(51);
  
  // Player
  player.show();
  player.move();
  
  // Obstacles
  if (frameCount % 120 == 0) { // Adds a new obstacle every 100 frames
    obstacles.push(new Obstacle());
  }
  
  for (let obs of obstacles) {
    obs.show();
    obs.update();
    
    // Checking for collision
    if (player.collidesWith(obs)) {
      noLoop(); // Stop the game
      textSize(32);
      textAlign(CENTER, CENTER);
      fill("White");
      text("Game Over", width / 2, height / 2);
    }
  }
}

// Player class
class Player {
  constructor() {
    this.size = 30;
    this.x = width / 2;
    this.y = height - this.size * 2;
  }

  show() {
    fill("white");
    rectMode(CENTER);
    rect(this.x, this.y, this.size, this.size);
  }

  move() {
    if (keyIsDown(LEFT_ARROW)) {
      this.x -= 5;
    } else if (keyIsDown(RIGHT_ARROW)) {
      this.x += 5;
    }
  }

  collidesWith(obstacle) {
    let hit = collideRectRect(this.x, this.y, this.size, this.size, obstacle.x, obstacle.y, obstacle.size, obstacle.size);
    return hit;
  }
}

// Obstacle class
class Obstacle {
  constructor() {
    this.size = random(20, 50);
    this.x = random(this.size, width - this.size);
    this.y = 0;
  }

  show() {
    fill("blue");
    rect(this.x, this.y, this.size, this.size);
  }

  update() {
    this.y += gameSpeed;
  }
}

// Function to check rectangular collision (Note to self p5.collide2D library needed)
function collideRectRect(x, y, w, h, x2, y2, w2, h2) {
  return x < x2 + w2 && x + w > x2 && y < y2 + h2 && y + h > y2;
}

Problems Encountered:

The problem that I faced the most was setting up the collision format, but I will, later on, be able to fix it by using a p5.collide2D library because, from my understatement, it will make the collision simpler and exact to the collision I want the game to run.

Future goals:

1. Improved graphics: By using either a better code format for the cars instead of the rectangles or implementing pictures to represent the cars.
2. Scoring system: The scoring system is yet to be implemented into the game but the idea is for it to score a higher number the further you reach in the game while avoiding collisions.
3. Sound Effects:  Adding music to the background to add more to the game’s value while playing.
4. Increased difficulty: Making gradual increases to the gameSpeed or the number of cars in the game to make it harder to continue.