why I am getting nodelist empty when I am trying to get lines by let lines = document.querySelectorAll('.line');

'use strict';

const score = document.querySelector('.score');
const popup = document.querySelector('.popup');
const gameArea = document.querySelector('.gameArea');
const gameBoard = document.querySelector('.gameBoard');

let player = { speed: 5, start: false };
let keys = {
  ArrowUp: false,
  ArrowDown: false,
  ArrowLeft: false,
  ArrowRight: false,
};
gameBoard.addEventListener('click', start);
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);

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

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

function gamePlay() {
  console.log('game started');
  let car = document.querySelector('.car');
  let carD = car.getBoundingClientRect();
  let road = gameArea.getBoundingClientRect();
  if (player.start) {
    if (keys.ArrowDown && player.y < road.height - carD.height)
      player.y += player.speed;
    if (keys.ArrowUp && player.y > road.height * 0.3) player.y -= player.speed;
    if (keys.ArrowLeft && player.x > 0) player.x -= player.speed;
    if (keys.ArrowRight && player.x < road.width - carD.width)
      player.x += player.speed;

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

    window.requestAnimationFrame(gamePlay);
  }
}

function movesLines() {
  let lines = document.querySelectorAll('.line');
  console.log(lines);
  lines.forEach(function (item) {
    item.y += player.speed;
    item.style.top = item.y + 'rem';
  });
}

function start() {
  if (player.start) return;
  movesLines();
  popup.classList.add('hide');
  player.start = true;
  window.requestAnimationFrame(gamePlay);

  for (let i = 0; i < 6; i++) {
    let roadLine = document.createElement('div');
    roadLine.setAttribute('class', 'line');
    roadLine.y = i * 15;
    roadLine.style.top = roadLine.y + 'rem';
    gameArea.appendChild(roadLine);
  }


  let car = document.createElement('div');
  car.setAttribute('class', 'car');
  gameArea.appendChild(car);

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

  // console.log('top position' + car.offsetTop);
  // console.log('Left position' + car.offsetLeft);
}

/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
 
FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}

.gameBoard {
  display: flex;
  background-color: lightgreen;
  overflow-x: hidden;
  overflow-y: hidden;
}

.score {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 10rem;
  height: 5rem;
  border: 2px solid green;

}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  color: black;
  font-weight: bold;
  padding: 2rem;
  border-radius: 11px;
  background-color: #777;
  z-index: 999;
}
 
.gameArea {
  position: relative;
  width: 40vw;
  height: 100vh;
  background-color: #333;
  margin-left: auto;
  margin-right: auto;
}

.car {
  position: absolute;
  bottom: 1rem;
  width: 8rem;
  height: 10rem;
  background-color: red;
}

.enemy {
  position: absolute;
  bottom: 1rem;
  width: 8rem;
  height: 10rem;
  background-color: blue;
}

.line {
  position: absolute;
  width: 1rem;
  height: 10rem;
  background-color: white;
  left: 50%;
  transform: translateX(-50%);
}

.hide {
  display: none;
} 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Game</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="gameBoard">
    <div class="score"></div>
    <div class="popup">
      Click or Press any arrow to start!!
    </div>
    <div class="gameArea"></div>
  </div>

  <script src="./script.js"></script>
</body>
</html>