Делаю игру Арканойд как сделать при смене уровня возврат блоков и чтоб платформа возвращалась на место вместе с мячиком?

Question

energprofi @energprofi

JavaScript

Делаю игру Арканойд как сделать при смене уровня возврат блоков и чтоб платформа возвращалась на место вместе с мячиком?

HTML

</head>
<body>
    <h1 class="title">Арканоид</h1>
    <div class="game">
      <div class="field"></div>
    
    <div class="account">
      <p class="text_level">Уровень:</p><div class="level">1</div>
      <p class="text_counter">Cчет:</p><div class="counter">0</div>
      <p class="text_life">Жизнь:</p><div class="life">3</div>
      <button class="btn">Начать игру</button>
    </div>
  </div>
    
    
    <script src="game.js"></script>
</body>
</html>

css

body{
    background: black;
}
.field{
    position: absolute;
    left: 200px;
    width: 785px;
    height: 600px;
    border-radius: 5px;
    border: black ridge 2px;
    background-image: url(img/grounds.jpg);
    border: white ridge 2px;
    
}
.game{
  display: flex;
  justify-content: center;
    
}

.block{
    position: absolute;
    width: 105px;
    height: 25px;
    background: linear-gradient(rgb(255, 0, 0),  rgb(255, 255, 255));;
}
.block1{
    position: absolute;
    width: 105px;
    height: 25px;
    background: linear-gradient(rgb(0, 255, 34),  rgb(255, 255, 255)); 
}
.block2{
    position: absolute;
    width: 105px;
    height: 25px;
    background: linear-gradient(rgb(0, 255, 34),  rgb(255, 255, 255));
}


.user{
    position: absolute;
    width: 100px;
    height: 20px;
    background: linear-gradient(rgb(255, 255, 255),  rgb(3, 3, 3));
    border-radius: 3px;
}
.boll{
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(rgb(124, 123, 122),  rgb(251, 250, 250));
}
.title{
    color: rgb(251, 250, 250);
    text-align: center;
    font-size: 50px;
}
.counter{    
    font-size: 26px;
}
.life{   
    font-size: 26px;
}
.text_counter{    
    font-size: 26px;
}
.text_life{  
    font-size: 26px;
}
.text_level{
    font-size: 26px;
}
.level{
    font-size: 26px; 
}
.btn{
    position: absolute;
    bottom: 10px;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    background-color: rgb(97, 2, 206);
    color: cornsilk;
    font-size: 20px;
}
.account{
    position: absolute;
    right: 160px;
    background: linear-gradient(rgb(109, 107, 107),rgb(255, 255, 255),rgb(77, 76, 76));
    width: 200px;
    height: 580px;
    padding: 10px;
    border: white ridge 2px;
}

JS

const field = document.querySelector('.field')
let counterDisplay = document.querySelector('.counter')
let counter = 0
let lifeDisplay = document.querySelector('.life')
let life = 3
let levelDisplay = document.querySelector('.level')
let level = 1
let button = document.querySelector('.btn')
let blockWidth = 100
let blockHeight = 20
let bollDiameter = 20
let startPosition = [350, 30]
let bollStartPosition = [390, 50]
let x = 2
let y = 2
let timer;



class Block {
  constructor(xAxis , yAxis){
    this.bottomLeft = [xAxis, yAxis]
    this.bottomRight = [xAxis + blockWidth, yAxis]
    this.topLeft = [xAxis, yAxis + blockHeight]
    this.topRight = [xAxis + blockWidth, yAxis + blockHeight]
  }
}



let blocks = [
  new Block(10,570), 
  new Block(120,570), 
  new Block(230,570), 
  new Block(340,570), 
  new Block(450,570), 
  new Block(560,570), 
  new Block(670,570),
  new Block(10,540), 
  new Block(120,540), 
  new Block(230,540), 
  new Block(340,540), 
  new Block(450,540), 
  new Block(560,540), 
  new Block(670,540), 
]
let blocks1 = [
  new Block(10,510), 
  new Block(120,510), 
  new Block(230,510), 
  new Block(340,510), 
  new Block(450,510), 
  new Block(560,510), 
  new Block(670,510),
  new Block(10,480), 
  new Block(120,480), 
  new Block(230,480), 
  new Block(340,480), 
  new Block(450,480), 
  new Block(560,480), 
  new Block(670,480), 
]

function addBlocks() {
  for(let i = 0; i < 14; i++){
  let block = document.createElement("div")
  block.classList.add('block')
  block.style.left =  blocks[i].bottomLeft[0] + 'px'
  block.style.bottom = blocks[i].bottomLeft[1] + 'px'
  field.appendChild(block)
 }
 for(let i = 0; i < 14; i++){
  let block1 = document.createElement("div")
  block1.classList.add('block1')
  block1.style.left =  blocks1[i].bottomLeft[0] + 'px'
  block1.style.bottom = blocks1[i].bottomLeft[1] + 'px'
  field.appendChild(block1)
}
}
addBlocks()


let user = document.createElement('div')
user.classList.add('user')
user.style.left = startPosition[0] + 'px'
  user.style.bottom = startPosition[1] + 'px'
field.appendChild(user)


function moveUser(e) {
    switch (e.key){
      case 'ArrowLeft':
        if(startPosition[0] > 0){
        startPosition[0] -= 10
        user.style.left = startPosition[0] + 'px'
        user.style.bottom = startPosition[1] + 'px'
        }
        break;
      case 'ArrowRight':
        if(startPosition[0] < 700 ){
          startPosition[0] += 10
          user.style.left = startPosition[0] + 'px'
          user.style.bottom = startPosition[1] + 'px'
        }  
        break;
    }
}

document.addEventListener('keydown', moveUser)


let boll = document.createElement("div")
boll.classList.add('boll')
boll.style.left = bollStartPosition[0] + 'px'
boll.style.bottom = bollStartPosition[1] + 'px'
field.appendChild(boll)

function moveBoll() {
  bollStartPosition[0] += x;
  bollStartPosition[1] += y;
  boll.style.left = bollStartPosition[0] + 'px'
  boll.style.bottom = bollStartPosition[1] + 'px'
  collisions();
  
}

button.addEventListener('click', () => timer = setInterval(moveBoll, 5), () => clearInterval(timer) )

  function startUser() {
    if(startPosition[0] < 350 || startPosition[0]>350){
      startPosition[0] =350
    }
  }


function collisions(){
  for( let i = 0; i < blocks.length; i++){
    if( (bollStartPosition[0] > blocks[i].bottomLeft[0] && bollStartPosition[0] < blocks[i].bottomRight[0] ) &&
     ((bollStartPosition[1] + bollDiameter) > blocks[i].bottomLeft[1] && bollStartPosition[1] < blocks[i].topLeft[1])
     ){
      let allBlocks = Array.from(document.querySelectorAll(".block"))
      allBlocks[i].classList.remove('block')
      blocks.splice(i, 1) 
       trajectoryBoll()
       counter++ + counter++
       counterDisplay.innerHTML = counter
     }
      
     for( let i = 0; i < blocks1.length; i++){
      if( (bollStartPosition[0] > blocks1[i].bottomLeft[0] && bollStartPosition[0] < blocks1[i].bottomRight[0] ) &&
       ((bollStartPosition[1] + bollDiameter) > blocks1[i].bottomLeft[1] && bollStartPosition[1] < blocks1[i].topLeft[1])
       ){
         let allBlocks1 = Array.from(document.querySelectorAll(".block1"))
         allBlocks1[i].classList.remove('block1')
         blocks1.splice(i, 1)
         trajectoryBoll()
         counter++
         counterDisplay.innerHTML = counter
        }       
      }
    } 
  if( bollStartPosition[0] >= 765 ||
     bollStartPosition[1] >= 580 || 
     bollStartPosition[0] <= 0){
    trajectoryBoll()
  }
  
   if(
    (bollStartPosition[0] > startPosition[0] && bollStartPosition[0] < startPosition[0] + blockWidth) &&
    (bollStartPosition[1] > startPosition[1] && bollStartPosition[1] < startPosition[1] + blockHeight)
   ){
    trajectoryBoll()
   }
   if(blocks.length === 0 && blocks1.length === 0){
    level++
    levelDisplay.innerHTML = level
    clearInterval(timer)
    if( level === 2){
      boll.style.left = 390 + "px"
      boll.style.bottom = 50 + 'px'
      startUser()
      trajectoryBoll()
      collisions();
    }
  }
  if(level >= 10){
    levelDisplay.innerHTML = "Победа"
  }
 
  
  if(bollStartPosition[1] <= 0){
    life--
    lifeDisplay.innerHTML = life 
    trajectoryBoll()    
 }
 /*if(life === 2){
  clearInterval(timer)
 }
 if(life === 1){
  clearInterval(timer)
 }*/
 if (life <= 0){
  lifeDisplay.innerHTML = 'Game Over'
  
 }
 
}



function trajectoryBoll() {
  if(x === 2 && y === 2){
    
    return y = -2
  }
  if (x === 2 && y === -2){
   
    return x = -2
  }
  if(x === -2 && y === -2){
    
    return y = 2
  }
  if( x === -2 && y === 2){
    
    return x = 2
  }

}