Moving objects in javascript (the start of the snake game)

Question

Does anyone have an idea how to make these 3 colored squares move around the perimeter of the board, and not like now, i.e. in lines? (lines 57-78) https://codepen.io/diana-larussa/pen/ExgpXzo

function timer() {
    ttl--

    divElement = document.querySelectorAll('div')

    divElement[nr_boxu].style.backgroundColor = "#6d5dfc"
    divElement[nr_boxu].value = 0

    nr_boxu = nr_boxu + 1
    divElement[nr_boxu].style.backgroundColor = "#F25270"
    divElement[nr_boxu+1].style.backgroundColor = "#F25270"
    divElement[nr_boxu+2].style.backgroundColor = "#F25270"

    spanTimer.innerHTML = "TIME: " + ttl
    //if (nr_boxu>gridDOMElement.value-4) stop()

    /*if (divElement[nr_boxu] == gridDOMElement.value - 4) {
        divElement[gridDOMElement.value + 1].style.backgroundColor = "#F25270"
    }*/

    if (ttl == 0) stop()
}

Answer 1

I think for each grid size it is possible to generate perimeter sequence of indices and timer() function could pick 4 of those indices to update.

For example, in this grid 5x4:

0	1	2	3	4
5	6	7	8	9
10	11	12	13	14
15	16	17	18	19