Как написать приложение перестановки набора карточек?

Question

[evg_96]

Есть головоломка где есть поле с семью позициями, первые три позиции занимают карточки со стрелками вправо, последние три занимают карточки со стрелкой влево. (центральное место пусток)


Предложили написать приложение для игры в эту головоломку.
Условия* Переставлять можно только на соседнее свободное место или через одну карточку также на свободное место.
Карточки монут направляться только в ту сторону которая на них нарисована.

В итоге нужно чтобы левые карточки поменялись местами с правыми, а пустое место также было по центру.

Впринципе можно написать на чем угодно. Перемещение карточки должно осуществляться после нажатия на нее и после проверки условий*.

Пробовую писать уже часа 2-3. Вроде что то начало получаться колхозными методами, то после пары ходов все ломается и ведет себя неопределенным образовам.
Пробовал для облегчения писать на реакте. Делал в состоянии модель поля игры (массив ) и после каждого нажатия на карточку при успешной проверки условий, происходил автоматический перерендер.

В общем подскажите пожалуйста как написать данное приложение. Никак не могу додуматься. Вроде бы легко на первый взгляд, но все равно мозги сломал.
Спасибо заранее.

Answer 1

[0xD34F]

Ну типа вот, дальше допиливайте сами:

class Game extends React.Component {
  state = {
    panesCurrent: [],
    panesDefault: [ 1, 1, 1, 0, -1, -1, -1 ],
    panesWin: [ -1, -1, -1, 0, 1, 1, 1 ],
  }

  componentDidMount() {
    this.reset();
  }

  componentDidUpdate() {
    if (this.state.panesCurrent.every((n, i) => n === this.state.panesWin[i])) {
      setTimeout(alert, 25, 'WIN');
    }
  }

  onClick(index) {
    const clicked = this.state.panesCurrent[index];
    if (clicked === 0) {
      return;
    }

    for (let i = 1; i <= 2; i++) {
      const t = index + clicked * i;
      if (this.state.panesCurrent[t] === 0) {
        const panes = [...this.state.panesCurrent];
        [ panes[index], panes[t] ] = [ panes[t], panes[index] ];
        this.setState({ panesCurrent: panes });
        break;
      }
    }
  }

  reset = () => {
    this.setState(({ panesDefault }) => ({
      panesCurrent: [...panesDefault],
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.reset}>reset</button>
        <div className="game">
          {this.state.panesCurrent.map((n, i) => (
            <div
              className={'pane ' + [ 'left', '', 'right' ][n + 1]}
              onClick={() => this.onClick(i)}
            ></div>
          ))}
        </div>
      </div>
    )
  }
}

.game {
  font-size: 5px;
}

.pane {
  display: inline-block;
  width: 10em;
  height: 10em;
  margin: 1em;
}

.pane.right::after,
.pane.left::after {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: monospace;
  font-size: 4em;
}
.pane.right::after {
  content: "-->";
  color: red;
  border: 2px solid red;
}
.pane.left::after {
  content: "<--";
  color: lime;
  border: 2px solid lime;
}

Comments

[evg_96]

0xD34F Подскажите пожалуйста некоторые моменты в решении. Конкретно про условие цикла. Непонятно почему именно for (let i = 1; i <= 2; i += 1)
Скорее всего логика заложения именно в условие данного цикла, но скажите пожалуйста, где именно обрабатывается то что можно перескочить через один элемент на пустое место?

[0xD34F]

Перескакивание через элемент - вторая итерация цикла.

В чём тут суть. Значения в массиве, отвечающие за перемещаемые элементы, это +1/-1. Знак обозначает направление движения. Когда необходимо решить, можно ли переместить элемент, к его индексу последовательно добавляются потенциально возможные значения смещений (в данном случае это 1 и 2), с учётом знака (умножение смещения на значение элемента). Если полученный в результате сложения индекс соответствует пустому месту - перемещение возможно.