0

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

var arr = [1, 2, 3, 4, 5]
var arr2 = []
var buttons = document.querySelectorAll('.button')

function getrandom() 
{
  while (true)
  {
    var num = Math.floor(Math.random() * arr.length)
    if (!arr2.includes(num))
    {
      arr2.push(num)
      return num
    }
  }
}

function pushrand()
{
  buttons.forEach(element => 
  {
    let random = getrandom()
    element.innerHTML = arr[random]
  })
  arr2 = [];
}
html {
    font-size: 62.5%;
    height: 100%;
}
.container{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items:center;
    flex-direction: column;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.button {
    width: 10rem;
    height: 10rem;
    justify-self: center;
    align-self: center;
}

button{
    font-size: 3rem;
}
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Пятнашки</title>
</head>

<body>
    <button class="block1" onclick = pushrand()><span class="randNumbers">Новая игра</span>
    </button>
    <div class="container">
        <div class="game">
            <div class="buttons">
                <button class="button"></button>
                <button class="button"></button>
                <button class="button"></button>
                <button class="button"></button>
                <button class="button"></button>
            </div>
        </div>
    </div>

    <script src="index.js"></script>
</body>

</html>

5
  • 3
    Мы ничего не поняли, так как мы тут на русском общаемся ¯\_(ツ)_/¯ 17 окт 2022 в 8:12
  • Добрый день уважаемые программисты, нужна помощь с перемещением кнопок. Вы наверняка слышали про игру "Пятнашки", я создал рандомизацию чисел. Они распределяются по кнопкам. Но как сделать так, чтобы кнопки двигались в пустое место. Для многих это глупый вопрос, но я только начинаю вникать в эту среду и прошу о помощи. Заранее вам спасибо.
    – Meksik
    17 окт 2022 в 8:39
  • Извините,просто мне друг сказал, что за русские темы банят)))
    – Meksik
    17 окт 2022 в 8:40
  • ну, это RUso, а не ENso. Поэтому тут как раз на русском. А вот на en - на английском 17 окт 2022 в 8:41
  • Хорошо, буду знать, не знаете решение проблемы, а то идей у меня нет...(((
    – Meksik
    17 окт 2022 в 8:42

1 ответ 1

3

Мой ответ намеренно не содержит весь нужный вам код, но основные принципы и подсказки я предоставил. Успехов в освоении программирования!

Математические обоснования:

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

Подробнее можно посмотреть видео урок известного российского математика Алексея Саватеева

Двумерный массив в качестве структуры данных:

Так же эта игра 2-мерная, нужно использовать двумерный массив для простоты оценки координат и отображения.

Таким образом общая логика выглядит так:

  1. делаете верстку используя либо таблицу, либо грид, либо 4 флексбокса, в общем на вкус.

  2. создаете начальный массив

Например:

 const board = [
  [1,2,3,4],
  [5,6,7,8],
  [9,10,11,12],
  [13,14,15,0]
 ]

Тут 0 отвечает за пустую ячейку - удобно пользоваться только цифрами. Что касается легальных движений то на нулевую ячеку в данном случае можно переставить фигуру либо сверху либо слева (снизу и справа нет доски) Таким образом вам нужно совершить перестановку.

Базовое осуществление ходов:

Перестановка сверху будет выглядеть так:

const temp = board[2][3];  // запомнили 12
board[2][3] = board[3][3]; // поставили 0 на место 12 
board[3][3] = temp; // поставили 12 на место 0

А перестановка слева так:

const temp = board[3][2];  // запомнили 15
board[3][2] = board[3][3]; // поставили 0 на место 15 
board[3][3] = temp; // поставили 15 на место 0

Вам не составит труда написать код для еще двух перестановок.

Итак используя функцию проверки валидности кода (которую Вам еще предстоит написать) и функцию перестановки Вы сможете правильно перемешать фигуры. Далее используя эти же функции можно позволить игроку играть.

Например если движение осуществляется по клику на фигуру, то нужно убедится что рядом с ней есть 0, но не по диагонали, иначе ничего не делать.

Убедившись что 0 есть рядом вы уже можете сделать ход.

Как я предлагаю вам организовать это в HTML:

Пусть у нас будет 16 ячеек и мы их будем заполнять цифрами, у каждой ячейки мы можем добавить data-x data-y атрибуты - это координаты в массиве и мы будем знать на что нажал игрок.

А так же при перестановке мы можем менять значения только в них, не отрисовывая все заново (тоже Вам реализовать)

Пример:

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

По поводу изначального смешивания - вы знаете всегда где находится 0 просто двигайте его туда где есть фигуры (программно определяя куда он может пойти) сделав 100 таких ходов случайно вы осуществите правильное перемешивание.

const rows = [
  document.getElementById('row1').children,
  document.getElementById('row2').children
]
const myBoard = document.getElementById('board')

const board = [
  [1, 2],
  [3, 0]
]

function drawAll(){
  for (let y = 0 ; y < 2; y++)
    for (let x = 0 ; x < 2; x++){
      rows[y][x].textContent = board[y][x] ? board[y][x] : '';
      rows[y][x].dataset.x = x;
      rows[y][x].dataset.y = y;
      if (board[y][x] === 0){
        rows[y][x].classList.add('empty')
      } else {
        rows[y][x].classList.remove('empty')
      }
    }
}

drawAll();

function getEmptyCellCoordinates(){
  let x = -1
  let y = -1
  for (let row = 0;  row < 2;  row++){
    y = row; // строка всегда соответсвует `y` 
    x = board[row].indexOf(0) // x будет -1 если не найдена колонка с 0
    if (x != -1) break // нашли 0
  }
  return {y, x}
}

myBoard.addEventListener('click', (event)=> {
  if (event.target.tagName === 'BUTTON'){
    const from = {y: event.target.dataset.y, x: event.target.dataset.x};
    const to = getEmptyCellCoordinates();
    console.clear();
    console.log(`выбранная ячейка была ${from.y}, ${from.x}`);
    console.log(`пустая ячейка была: ${to.y}, ${to.x}`);
    move(from, to);
  }
}, false) 

function validate( from, to){
   // проверка валидности хода
   // ячейки должны быть поблизости,
   // но не по диагонали друг к другу
   // сейчас работает и по диагонали
   // подсказка:
   // по одной из координат ячейки должны полностью совпадать
   // по другой разница должна быть не больше 1 (с любым знаком + или -) 
   return true // если ход не возможен возвращаем falsе
}

function move( from, to){
  if (validate(from, to)){
    const temp = board[from.y][from.x]
    board[from.y][from.x] = board[to.y][to.x]
    board[to.y][to.x] = temp
    // отрисовываем либо все либо только изменения
    drawAll() // в данном пример все (излишне)
  }
}
div[id^=row] {
  display: flex;
}

button  {
  height:32px;
  width: 32px;
  margin: 1px;
}

button.empty {
  background: grey;
  border: 0;
  border-radius: 2px;
}
<div id="board">
  <div id="row1">
    <button> </button><button> </button>
  </div>
  <div id="row2" >
    <button> </button><button> </button>
  </div>
</div>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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