racecar.js

const canvas = document.querySelector("canvas");
canvas.style.border = "2px solid black";
const ctx = canvas.getContext("2d");
const startScreen = document.querySelector(".game-intro");

//adding some cool song
const song = new Audio("../Eye_of_the_Tiger.mp3");
song.volume = 0.1;

//variables
const background = new Image();
background.src = "../images/road.png";
const background2 = new Image();
background2.src = "../images/road.png";
const car = new Image();
car.src = "../images/car.png";
let carX = 200;

let bgy = 0;
let bgy2 = -canvas.height;

let isGameOver = false;
let gameId = 0;
let isMovingRight = false;
let isMovingLeft = false;

//traffic car variables
const trafficCar1 = new Image();
trafficCar1.src = "../images/car.png";
let trafficCar1_Y = 200;

//traffic array of cars
const trafficArr = [
  { x: 275, y: -200, img: trafficCar1 },
  { x: 75, y: -800, img: trafficCar1 },
  { x: 275, y: -1200, img: trafficCar1 },
];

window.onload = () => {
  document.getElementById("start-button").onclick = () => {
    console.log("starting");
    //song.play();
    startGame();
  };
  //movement of the car
  document.addEventListener("keydown", (event) => {
    if (event.code === "ArrowRight") {
      console.log("We are going right!");
      isMovingRight = true;
    } else if (event.code === "ArrowLeft") {
      console.log("We are going left!");
      isMovingLeft = true;
    }
  });

  //stop the car from moving
  document.addEventListener("keyup", () => {
    isMovingRight = false;
    isMovingLeft = false;
  });

  //recursive function that calls itself and 'animates' the canvas
  function startGame() {
    startScreen.style.display = "none";
    ctx.drawImage(background, 0, bgy, canvas.width, canvas.height);
    ctx.drawImage(background, 0, bgy2, canvas.width, canvas.height);
    //parameters for drawing an image (image, x starting point, y starting point, width, height)
    ctx.drawImage(car, carX, 550, 100, 150);

    //traffic Cars
    //ctx.drawImage(trafficCar1, 275, trafficCar1_Y, 100, 150);
    //move the traffic car
    //trafficCar1_Y += 3;
    for (let i = 0; i < trafficArr.length; i += 1) {
      let current = trafficArr[i];
      ctx.drawImage(current.img, current.x, current.y, 100, 150);
      current.y += 3;
      if (current.y > canvas.height) {
        current.y = -300;
      }
    }

    //move traffic car to the top of the page
    if (trafficCar1_Y > canvas.height) {
      trafficCar1_Y = -300;
    }

    //collision with traffic car
    if (
      trafficCar1_Y + 150 - 5 > 550 &&
      carX + 100 - 10 > 275 &&
      carX < 275 + 100 - 10 &&
      550 + 150 > trafficCar1_Y
    ) {
      isGameOver = true;
    }

    //move the canvas's
    bgy += 3;
    bgy2 += 3;

    if (bgy > canvas.height) {
      bgy = -canvas.height - 20;
    }
    if (bgy2 > canvas.height) {
      bgy2 = -canvas.height;
    }

    //ends the game when the boolean isGameOver is true
    if (isGameOver) {
      cancelAnimationFrame(gameId);
    } else {
      gameId = requestAnimationFrame(startGame);
    }

    //Check if the moving variables are true and then move the car accordingly
    if (isMovingRight === true) {
      carX += 2;
    } else if (isMovingLeft === true) {
      carX -= 2;
    }
  }
};