Как создать анимацию змейка?

Question

[Алекс Иванов]

Всем привет. возникла необходимость сделать анимацию типа змекйи по заданой траектории. Долго думал кака реализовать, и пришел к одному варианту:

1) делаю сетку 4х4 с помощью стилей

<div class="snake-grid">

    <div class="grid1"><div class="snake1"></div></div>
    <div class="grid2"><div class="snake2"></div></div>
    <div class="grid2"><div class="snake3"></div></div>
    <div class="grid2"><div class="snake4"></div></div>

    <div class="grid1"><div class="snake5"></div></div>
    <div class="grid2"><div class="snake6"></div></div>
    <div class="grid3"><div class="snake7"></div></div>
    <div class="grid1"><div class="snake8"></div></div>

    <div class="grid1"><div class="snake9"></div></div>
    <div class="grid2"><div class="snake10"></div></div>
    <div class="grid3"><div class="snake11"></div></div>
    <div class="grid1"><div class="snake12"></div></div>

    <div class="grid3"><div class="snake13"></div></div>
    <div class="grid3"><div class="snake14"></div></div>
    <div class="grid3"><div class="snake15"></div></div>
    <div class="grid1"><div class="snake16"></div></div>

  </div>

<code lang="css">
.snake-grid {
  display: grid;
  width: 68px;
  height: 68px;
  gap: 2px;
  grid-template-columns: repeat(4, 1fr);
  background-color: #555;
  padding: 2px;
}
.snake-grid div{
 background-color: #ccc;
}
.snake-grid div div{
  width: 100%;
  height: 100%;
}
</code>

2) проставляю "маршрут змейки" по яйейкам:
1,2,3
2,3,7
3,7,8
7,8,12
8,12,16
12,16,15
16,15,14
15,14,10
14,10,9
10,9,5
9,5,1
5,1,2

По сути номер Х в этом списке соответствует закрашиванию элемента snakeХ.

const snakeColor = "#fff";
let snakeCell=[];
for(s=1;s<=16;s++)
{
    snakeCell.push(document.querySelector('.snake'+s))    
}

таким обраозм, раз в 3 секунды меняя фон указанных елементов на белый:

я смогу имитировать движение змейки.

let path = [[1, 2, 3], [2, 3, 7], [3, 7, 8], [7, 8, 12], [8, 12, 16], [12, 16, 15], [16, 15, 14], [15, 14, 10], [14, 10, 9], [10, 9, 5], [9, 5, 1], [5, 1, 2]]

var i = 0;
var interval = setInterval(function(){
    var obj = path[i];
    
    obj.forEach( function (item) {
        snakeCell[item].style.background=snakeColor; 
       
    });

   // console.log(obj);
    i++;
    //console.log(i+'-'+path.length);
    if(i === 12) clearInterval(interval);
}, 1000);

И вот тут меня заклинило. Как можно передать закрашивание нужных елементов, а предыдущую иттерацию делать style.background = "unset" и почему не работет цикличность?
Тут еще прикол - надо все делать без библиотек, на чистом JS

Answer 1

[Владимир Е]

Привет
Никто не мешает передать доп параметром элемент, у которого нужно убрать заливку
Не стал заморачиваться с решением - как есть (по первоначальному присланному варианту)

const snakeColor="#fff";

let snakeCell1 = document.querySelector('.snake1');
let snakeCell2 = document.querySelector('.snake2');
let snakeCell3 = document.querySelector('.snake3');
let snakeCell4 = document.querySelector('.snake4');
let snakeCell5 = document.querySelector('.snake5');
let snakeCell6 = document.querySelector('.snake6');
let snakeCell7 = document.querySelector('.snake7');
let snakeCell8 = document.querySelector('.snake8');
let snakeCell9 = document.querySelector('.snake9');
let snakeCell10 = document.querySelector('.snake10');
let snakeCell11 = document.querySelector('.snake11');
let snakeCell12 = document.querySelector('.snake12');
let snakeCell13 = document.querySelector('.snake13');
let snakeCell14 = document.querySelector('.snake14');
let snakeCell15 = document.querySelector('.snake15');
let snakeCell16 = document.querySelector('.snake16');

snakeCell1.style.background=snakeColor;
snakeCell2.style.background=snakeColor;
snakeCell3.style.background=snakeColor;

function snakeGo(Cell0, Cell1, Cell2, Cell3)
{
    Cell0.style.background='unset';
    Cell1.style.background=snakeColor;
    Cell2.style.background=snakeColor;
    Cell3.style.background=snakeColor;
}

setTimeout(snakeGo, 3000, snakeCell1, snakeCell2, snakeCell3, snakeCell7);
setTimeout(snakeGo, 6000, snakeCell2, snakeCell3, snakeCell7, snakeCell8);
setTimeout(snakeGo, 9000, snakeCell3, snakeCell7, snakeCell8, snakeCell12);

В текущем варианте, если он рабочий, также можно добавить значение в массив (для элемента, который необходимо затирать)

ПС: у setTimeout вторым параметром идет число, не строка

Comments

[Алекс Иванов]

Огромное спасибо!