Up and down infinite moving platform javascript html css

Question

I'm trying to realise an infinite up and down move of the platform . How can I modify the code to get this thing ? I have only managed to have just one un-down movement . I know that I could do this with CSS animations but I would like to modify my code .

var n = 0;
var grid = document.querySelector('.grid');

function move() {
  const pixels = [200, 196, 192, 188, 184, 180, 176, 172, 168, 164, 160, 164, 168, 172, 176, 180];
  const style = grid.style.bottom
  const computedStyle = window.getComputedStyle(grid)
  console.log('bottom from computed style', computedStyle.bottom)
  grid.style.bottom = pixels[n] + 'px';
  n++;
}

move();
setInterval(move, 90);

.grid {
  background-color: blue;
  height: 20px;
  width: 100px;
  left: 100px;
  bottom: 200px;
  position: absolute;
}

<div class="grid"></div>

Answer 1

You can have a Boolean checking once you get at the end of your array and once you do you start to decrement your n variable. This way it will go from 200px -> 180px -> 200px

let grid = document.querySelector(".grid");
let n = 0;
let bool = true

function move() {
  const pixels = [200, 196, 192, 188, 184, 180, 176, 172, 168, 164, 160, 164, 168, 172, 176, 180]
  const style = grid.style.bottom;
  const computedStyle = window.getComputedStyle(grid);
  console.log("bottom from computed style", computedStyle.bottom);
  grid.style.bottom = pixels[n] + "px";
  
  if(n === pixels.length - 1 ){
    bool = false
  } else if(n === 0){
    bool = true
  }
  bool ? n++ : n-- 
}

move();
setInterval(move, 90);

.grid {
  background-color: blue;
  height: 20px;
  width: 100px;
  left: 100px;
  bottom: 200px;
  position: absolute;
}

<div class="grid"></div>