const score = document.querySelector('.score');
const startScreen = document.querySelector('.startScreen');
const gameArea = document.querySelector('.gameArea');

startScreen.addEventListener('click', initializeGame);

let player = {
  speed: 5,
  score: 0
};

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

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

function keyDown(e) {
  e.preventDefault();
  keys[e.key] = true;
}

function keyUp(e) {
  e.preventDefault();
  keys[e.key] = false;
}

function isCollide(a, b) {
  aRectangle = a.getBoundingClientRect();
  bRectangle = b.getBoundingClientRect();

  return !((aRectangle.bottom < bRectangle.top) ||
    (aRectangle.top > bRectangle.bottom) ||
    (aRectangle.right < bRectangle.left) ||
    (aRectangle.left > bRectangle.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 = "Game over  Your final score is " + player.score +
    "  press here to restart the game.";
}

function moveEnemy(myCar) {
  let enemyCarList = document.querySelectorAll('.enemyCar');
  enemyCarList.forEach(function(enemyCar) {
    if (isCollide(myCar, enemyCar)) {
      endGame();
    }

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

    enemyCar.y += player.speed;
    enemyCar.style.top = enemyCar.y + "px";
  })
}

function runGame() {

  let car = document.querySelector('.myCar');
  let road = gameArea.getBoundingClientRect();

  if (player.start) {
    moveLines();
    moveEnemy(car);

    if (keys.ArrowUp && player.y > (road.top + 150)) {
      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 - 50)) {
      player.x += player.speed
    }

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


    player.score++;
    score.innerText = "Score: " + player.score + "\n Speed: " + player.speed;

  }
}

function initializeGame() {
  startScreen.classList.add('hide');
  gameArea.innerHTML = "";

  player.start = true;
  player.score = 0;
  window.requestAnimationFrame(runGame);

  for (x = 0; x < 5; 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', 'myCar');
  gameArea.appendChild(car);

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

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

}
* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hide {
  display: none;
}

.car Game {
  width: 100%;
  height: 100vh;
  background-image: ;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.my Car {
  width: 50px;
  height: 90px;
  /* background: red; */
  position: absolute;
  bottom: 120px;
  background-image: u r l('');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.enemy Car {
  width: 30px;
  height: 60px;
  /* background: red; */
  position: absolute;
  bottom: 120px;
  background-image: ('');
  /* border-radius: 15px; */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.lines {
  width: 10px;
  height: 100px;
  background: white;
  position: absolute;
  margin-left: 195px;
}

.game Area {
  width: 400px;
  height: 100vh;
  background: #2d3436;
  margin: auto;
  position: relative;
  overflow: hidden;
  border-right: 7px dashed #c8d6e5;
  border-left: 7px dashed #c8d6e5;
}

.score {
  position: absolute;
  top: 15px;
  left: 40px;
  background: #10ac84;
  width: 300px;
  line-height: 70px;
  text-align: center;
  color: white;
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 5px 5px #777;
}

.start Screen {
  position: absolute;
  background-color: #ee5253;
  left: 24%;
  top: 40%;
  transform: translate(-50% -50%);
  color: white;
  z-index: 1;
  text-align: center;
  border: 1px solid #ff6b6b;
  padding: 15px;
  margin: auto;
  width: 50%;
  cursor: pointer;
  letter-spacing: 5;
  font-size: 20px;
  word-spacing: 3;
  line-height: 30px;
  text-transform: uppercase;
  box-shadow: 0 5px 5px #777;
}
<div class="carGame">
  <div class="score"></div>
  <div class="startScreen">
    <p>
      press here to start Arrow key to move if you hit another car you will lose.
    </p>
  </div>
  <div class="gameArea"> </div>
</div>