2

Решил сделать игру змейку, не используя 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>

1 ответ 1

0

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

Есть 4 вектора смещения по осям x и y

  • Верх [0, 1] (первая цифра по X, вторая по Y)
  • Низ [0, -1]
  • Право [1, 0]
  • Лево [-1, 0]

При каждом тике таймера сложите вектор смещения с текущими координатами змейки и получите новую позицию головы змеи. В вашем случае нет необходимости смещать каждую ячейку змеи, для перемещения в пустую ячейку достаточно лишь добавить новую ячейку с новой позицией головы и удалить 1 ячейку с хвоста.

Не могу понять как правильно удлинять тело змейки

Если в новой ячейке есть еда, то не надо удалять 1 ячейку с хвоста.

В целом, см. пример ниже.

//константа размер поля
const GAMEFIELD_SIZE = {x: 20, y: 20} //константа кол-ва квадратов по X и Y 
let snakeMoveInterval //здесь будет храниться интервал
let gameFieldSquares //здесь будут храниться все квадраты игрового поля

let currentAxis = [1, 0] //активный вектор смещения

//все возможные вектора смещения
const ARROW_AXIS = {
  ArrowUp : [0, -1],
  ArrowRight: [1, 0],
  ArrowDown: [0, 1],
  ArrowLeft: [-1, 0]
}

//Тело змеи, массив координат. 
//координата - это массив, в котором первый элемент - X, второй - Y)
let snake = [[0, 0]] 

//создание ячейки
const createSquare = () => {
  const square = document.createElement('div')
  square.classList.add('square')
  return square
}

//создание игрового поля, в целом все тоже самое, что было у вас, ф-я возвращает HTML элемент поля.
const createGameField = () => {
  const {x, y} = GAMEFIELD_SIZE
  const root = document.getElementById('squareField');
  //В CSS изменил display на grid,необходимо установить шаблон колонок
  root.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
  
  const gameField = new Array(x * y)
    .fill(0)
    .reduce((acc, cell)=>{
      const square = createSquare()
      acc.appendChild(square)
      return acc
    }, root)
  return gameField
}


//Все ячейки(квадраты) мы храним в одномерном массиве. Ф-ция получения индекса нужной клетки по координатам
const getSquareIndexFromPosition = ([x, y]) => {
  return y*GAMEFIELD_SIZE.y + x
}

//получение нужно клетки по координатам
const getSquareFromPosition  = (position) => {
  return gameFieldSquares[getSquareIndexFromPosition(position)]
}

//Переключение клетки между пустой и со змейкой (сейчас это делается просто через css класс snake)
const toggleSquare = (position) => {
    const squareIndex = getSquareIndexFromPosition(position)
    const square = gameFieldSquares[squareIndex]
    square.classList.toggle('snake')
}

//создание еды в рандомной пустой клетке. Еда обозначается как css класс food
const createFood = () => {
  const emptySquares = gameFieldSquares.filter((square)=>!square.classList.contains('snake'))
  const randomIndex = Math.floor(Math.random() * emptySquares.length)
  emptySquares[randomIndex].classList.toggle('food')
}

//движение


const moveSnake = () => {
  const [axisX, axisY] = currentAxis // извлекаем выбранное смещение
  const [headPosition] = snake //извлекаем координаты головы змеи
    
  const nextHeadPosition = [headPosition[0] + axisX, headPosition[1] + axisY] //вычисляем новую пощзицию головы
  
  //проверяем ход на валидность (новая позиция больше 0 и меньше ширины/высоты поля)
  const xAxisIsValid = nextHeadPosition[0] >= 0 && nextHeadPosition[0] < GAMEFIELD_SIZE.x
  const yAxisIsValid = nextHeadPosition[1] >= 0 && nextHeadPosition[1] < GAMEFIELD_SIZE.y
  const isValidPosition = xAxisIsValid && yAxisIsValid

  if(!isValidPosition) 
    return gameOver()
  
  //Переключаем класс snake у новой позиции головы
  const nextHeadSquare = getSquareFromPosition(nextHeadPosition) 
  nextHeadSquare.classList.toggle('snake')
  
  //добавляем в тело змеи новую ячейку
  snake.unshift(nextHeadPosition)
   
  // Проверяем есть ли еда в новой позиции
  if(nextHeadSquare.classList.contains('food')) {
    //если есть еда в новой позиции, то отключаем текущую еду
    nextHeadSquare.classList.toggle('food')
    //создаем новую
    createFood()
    //выходим
    return //в итоге у нас получает змея + 1 ячейка
  }
  
  const tailPosition = snake.pop() //удаляем хвост и извлекаем его позицию
  // получаем квадрат хвоста и убираем класс snake
  const tailSquare = getSquareFromPosition(tailPosition) 
  tailSquare.classList.toggle('snake')
}

const startGame = () => {
  gameFieldSquares = Array.from(createGameField().childNodes)

  //вешаем обработчик нажатий
  document.onkeydown = ({key}) => {
    if (key in ARROW_AXIS) {
      //здесь еще необходимо проверить, чтобы новое направление не было противоположным текущему (верх/низ, лево/право)
      currentAxis = ARROW_AXIS[key]
    }
  }
  snake.forEach(toggleSquare)
  createFood()
  
  snakeMoveInterval = setInterval(()=>{
    moveSnake()
  }, 500)
}

const gameOver = () => {
  console.log('gameOver')
  clearInterval(snakeMoveInterval)
}

startGame()
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.play {
  display: flex;
  align-items: center;
}
.square-field {
  display: grid;
}
.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 {
  background: blue;
}

.food {
  background: red;
}
<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>

2
  • Идея удаления и добавления тела змеи решила проблему. Код ваш крут, но для такой игры немного замудрённый. А для чего нужно объявлять все константы в верхнем регистре с использованием нижних чёрточек, это так принято у программистов?
    – Daniil
    Commented 11 янв. 2022 в 9:57
  • верхний регистр это просто стилистическое оформление.
    – xydope
    Commented 11 янв. 2022 в 12:51

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.