Game.js

const score = document.querySelector('.score');
const startScreen = document.querySelector('.startScreen');
const gameArea = document.querySelector('.gameArea');
// console.log(startScreen);
var audio = new Audio('intro.wav');
var audio2 = new Audio('Ting.mp3');

startScreen.addEventListener('click', start);
let player = { speed: 7, score: 0 };

let keys = { ArrowUp: false, ArrowDown: false, ArrowRight: false, ArrowLeft: false };

document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);

function keyDown(e) {
    e.preventDefault();
    keys[e.key] = true;
    // console.log(e.key);
    // console.log(keys);
}
function keyUp(e) {
    e.preventDefault();
    keys[e.key] = false;
    // console.log(e.key);
    // console.log(keys);

}

function isCollide(a, b) {
    aRect = a.getBoundingClientRect();
    bRect = b.getBoundingClientRect();
    return !((aRect.bottom < bRect.top) || (aRect.top > bRect.bottom) || (aRect.right < bRect.left) || (aRect.left > bRect.right));
};

function moveLines() {
    let lines = document.querySelectorAll('.lines');

    lines.forEach(function (item) {

        if (item.y >= 700) {
            item.y -= 750;
        }

        item.y += player.speed;
        item.style.top = item.y + 'px';
    });
}

function endGame() {
    
    player.start = false;
    startScreen.classList.remove('hide');
    startScreen.innerHTML = "<b style='color:red;font-size:40px;'>Game Over</b> <br> Your Final Score is: "  + player.score +  "<br> <b style='color:green;'>Press here to restart the Game</b>";
    audio.pause();
    audio2.play();
}

function moveEnemy(car) {
    let enemy = document.querySelectorAll('.enemy');

    enemy.forEach(function (item) {

        if (isCollide(car, item)) {
            // console.log("Boom......");
            endGame();
        }

        if (item.y >= 750) {
            item.y = -300;
            item.style.left = Math.floor(Math.random() * 350) + 'px';
        }

        item.y += player.speed;
        item.style.top = item.y + 'px';
    });
}

function gamePlay() {
    // console.log('Lets Start');
    let car = document.querySelector('.car');
    let road = gameArea.getBoundingClientRect();
    // console.log(road);

    if (player.start) {

        moveLines();
        moveEnemy(car);

        if (keys.ArrowUp && player.y > (road.top + 100)) { player.y -= player.speed }
        if (keys.ArrowDown && player.y < (road.bottom - 85)) { player.y += player.speed }
        if (keys.ArrowLeft && player.x > 0) { player.x -= player.speed }
        if (keys.ArrowRight && player.x < (road.width - 52)) { player.x += player.speed }

        car.style.top = player.y + 'px';
        car.style.left = player.x + 'px';

        window.requestAnimationFrame(gamePlay);
        // console.log(player.score++);

        player.score++
        let ps = player.score - 1;
        score.innerText = "Score: " + ps;


    }
}

function start() {
    
    audio2.pause();
    audio.play();

    // gameArea.classList.remove('hide');
    startScreen.classList.add('hide');
    gameArea.innerHTML = "";

    player.start = true;
    player.score = 0;

    window.requestAnimationFrame(gamePlay);

    for (x = 0; x < 10; x++) {
        let roadLine = document.createElement('div');
        roadLine.setAttribute('class', 'lines');
        roadLine.y = (x * 150);
        roadLine.style.top = roadLine.y + 'px';
        gameArea.appendChild(roadLine);
    }
    let car = document.createElement('div');
    car.setAttribute('class', 'car');
    // car.innerText = "Hey I am Racer!";
    gameArea.appendChild(car);

    player.x = car.offsetLeft;
    player.y = car.offsetTop;

    // console.log(car.offsetTop);
    // console.log(car.offsetLeft);

    for (x = 0; x < 3; x++) {
        let enemyCar = document.createElement('div');
        enemyCar.setAttribute('class', 'enemy');
        enemyCar.y = ((x + 1) * 350) * -1;
        enemyCar.style.top = enemyCar.y + 'px';
        // enemyCar.style.backgroundColor = randomColor();
        enemyCar.style.left = Math.floor(Math.random() * 350) + 'px';
        gameArea.appendChild(enemyCar);
    }
}

function randomColor() {
    function c(){
        let hex = Math.floor(Math.random() * 256).toString(16);
        return ("0" + String(hex)).substr(-2);
    }
    return '#'+c()+c()+c();
}