Решил сделать игру змейку, не используя canvas. Почти доделал игру, но осталась проблема с телом змейки. Не могу понять как правильно удлинять тело змейки и как создать алгоритм для движения змейки с длинным телом. Буду рад любым идеям.
let squareField = document.getElementById('squareField');
let snakeBlock = document.getElementById('snakeBlock');
let snakeEat = document.getElementById('snakeEat');
let btnTop = document.getElementById('btnTop');
let btnBottom = document.getElementById('btnBottom');
let btnLeft = document.getElementById('btnLeft');
let btnRight = document.getElementById('btnRight');
let scoreDoc = document.getElementById('scoreDoc');
let xSnake = 0,
ySnake = 0,
xEat = 0,
yEat = 0;
let intervalTop, intervalBottom, intervalLeft, intervalRight;
let score = 0;
let deleteInterval;
(function () {
// расчерчиваем поля для игры
for (let i = 0; i < 20 * 20; i++) {
squareField.innerHTML += "<div class='square'></div>";
}
})();
btnTop.onclick = () => {
// console.log('btnTop');
clearInterval(deleteInterval);
deleteInterval = setInterval(() => {
changePositionSnake(-5, 0);
}, 500);
};
btnBottom.onclick = () => {
// console.log('btnBottom');
clearInterval(deleteInterval);
deleteInterval = setInterval(() => {
changePositionSnake(5, 0);
}, 500);
};
btnLeft.onclick = () => {
// console.log('btnLeft');
clearInterval(deleteInterval);
deleteInterval = setInterval(() => {
changePositionSnake(0, -5);
}, 500);
};
btnRight.onclick = () => {
// console.log('btnRight');
clearInterval(deleteInterval);
deleteInterval = setInterval(() => {
changePositionSnake(0, 5);
}, 500);
};
function changePositionSnake(t = 0, l = 0) {
// изменение положение змеи
ySnake += t;
xSnake += l;
if (ySnake > 95) {
ySnake = 0;
} else if (ySnake < 0) {
ySnake = 95;
}
if (xSnake > 95) {
xSnake = 0;
} else if (xSnake < 0) {
xSnake = 95;
}
snakeBlock.style.top = `${ySnake}vmin`;
snakeBlock.style.left = `${xSnake}vmin`;
if (xEat === xSnake && yEat === ySnake) {
randomPositionElem();
score++;
scoreDoc.innerHTML = score;
}
}
function randomPositionElem() {
// рандомно создаём еду для змеи
xEat = Math.floor(Math.random() * 20) * 5;
yEat = Math.floor(Math.random() * 20) * 5;
snakeEat.style.left = `${xEat}vmin`;
snakeEat.style.top = `${yEat}vmin`;
}
randomPositionElem();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.play {
display: flex;
align-items: center;
}
.square-field {
width: 100vmin;
height: 100vmin;
display: flex;
flex-wrap: wrap;
}
.square {
width: 5vmin;
height: 5vmin;
border: 1px solid blue;
}
.score-block {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
font-size: 60px;
}
.snake-block {
position: absolute;
top: 0;
left: 0;
width: 5vmin;
height: 5vmin;
background: blue;
}
.snake-eat {
position: absolute;
width: 5vmin;
height: 5vmin;
background: red;
border-radius: 50%;
}
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.15.2/css/all.css"
/>
<div class="play">
<div class="snake-block" id="snakeBlock">
<!-- Здесь должны генерироваться тела змейки -->
</div>
<div class="snake-eat" id="snakeEat"></div>
<div class="square-field" id="squareField"></div>
<div class="score-block">
<span>Score:</span>
<span id="scoreDoc">0</span>
<div class="btn">
<i class="fas fa-arrow-up" id="btnTop"></i>
<i class="fas fa-arrow-up fa-rotate-180" id="btnBottom"></i>
<i class="fas fa-arrow-up fa-rotate-270" id="btnLeft"></i>
<i class="fas fa-arrow-up fa-rotate-90" id="btnRight"></i>
</div>
</div>
</div>