Reactで、数字を並べ替える15パズルを作る方法

// 盤面は、左上から右へ、上から下へ読んだ順の配列。0 は空きマス
export type Board = number[];
export const SIZE = 4; // 横に並ぶマスの数

// そろった盤面（1, 2, …, 15, 空き）
export function solvedBoard(size = SIZE): Board {
  const n = size * size;
  return Array.from({ length: n }, (_, i) => (i === n - 1 ? 0 : i + 1));
}

export function isSolved(board: Board): boolean {
  return board.every((v, i) => v === (i === board.length - 1 ? 0 : i + 1));
}

// 位置 i と j が、上下左右に隣り合っているか
export function isAdjacent(i: number, j: number, size = SIZE): boolean {
  const [ri, ci] = [Math.floor(i / size), i % size];
  const [rj, cj] = [Math.floor(j / size), j % size];
  return Math.abs(ri - rj) + Math.abs(ci - cj) === 1;
}

// 位置 i のタイルを空きマスへ動かした新しい盤面を返す。動かせないときは null
export function move(board: Board, i: number, size = SIZE): Board | null {
  const blank = board.indexOf(0);
  if (!isAdjacent(i, blank, size)) return null;
  const next = [...board];
  [next[i], next[blank]] = [next[blank], next[i]];
  return next;
}

// 解ける並びかどうか（転倒数と、空きマスの段から判定する）
export function isSolvable(board: Board, size = SIZE): boolean {
  const tiles = board.filter((v) => v !== 0);
  let inversions = 0;
  for (let a = 0; a < tiles.length; a++) {
    for (let b = a + 1; b < tiles.length; b++) {
      if (tiles[a] > tiles[b]) inversions++;
    }
  }
  if (size % 2 === 1) return inversions % 2 === 0;
  const rows = board.length / size;
  const blankRowFromBottom = rows - Math.floor(board.indexOf(0) / size); // いちばん下の段が 1
  return (inversions + blankRowFromBottom) % 2 === 1;
}

// 解けて、まだそろっていない並びを作る
export function shuffleBoard(size = SIZE, rand: () => number = Math.random): Board {
  const a = solvedBoard(size);
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  if (!isSolvable(a, size)) {
    // 空きマス以外の2枚を入れ替えると、解けるかどうかが反対になる
    const [p, q] = [0, 1, 2].filter((k) => a[k] !== 0);
    [a[p], a[q]] = [a[q], a[p]];
  }
  return isSolved(a) ? shuffleBoard(size, rand) : a;
}

横3×縦3: 並べ方 362880 通り / 動かしてたどり着ける 181440 通り / isSolvable が true 181440 通り / 判定が一致 362880 通り
横4×縦2: 並べ方 40320 通り / 動かしてたどり着ける 20160 通り / isSolvable が true 20160 通り / 判定が一致 40320 通り
横2×縦2: 並べ方 24 通り / 動かしてたどり着ける 12 通り / isSolvable が true 12 通り / 判定が一致 24 通り

import { useState, type KeyboardEvent } from 'react';
import { SIZE, isSolved, move, shuffleBoard, type Board } from './puzzle';

type Props = { initial?: Board }; // initial は、決まった並びから始めたいとき（検証用）

// 矢印キーの向きに動かすタイルが、空きマスから見てどちらにあるか
const FROM: Record<string, [number, number]> = {
  ArrowUp: [1, 0], ArrowDown: [-1, 0], ArrowLeft: [0, 1], ArrowRight: [0, -1],
};

export function FifteenPuzzle({ initial }: Props) {
  const [board, setBoard] = useState<Board>(() => initial ?? shuffleBoard());
  const [moves, setMoves] = useState(0);
  const solved = isSolved(board);

  function tryMove(i: number) {
    if (solved) return;
    const next = move(board, i);
    if (!next) return; // 空きマスの隣でなければ何もしない
    setBoard(next);
    setMoves((m) => m + 1);
  }

  function onKeyDown(e: KeyboardEvent) {
    const d = FROM[e.key];
    if (!d) return;
    e.preventDefault();
    const blank = board.indexOf(0);
    const r = Math.floor(blank / SIZE) + d[0];
    const c = (blank % SIZE) + d[1];
    if (r < 0 || r >= SIZE || c < 0 || c >= SIZE) return;
    tryMove(r * SIZE + c);
  }

  function reset() {
    setBoard(shuffleBoard());
    setMoves(0);
  }

  // タイルは番号の順に並べ、位置は transform で決める（DOM の順番を変えない）
  const tiles = Array.from({ length: SIZE * SIZE - 1 }, (_, k) => k + 1);

  return (
    <div className="puzzle">
      <p className="moves">手数：{moves}</p>
      <div className="board" onKeyDown={onKeyDown}>
        {tiles.map((n) => {
          const i = board.indexOf(n);
          return (
            <button
              key={n}
              type="button"
              className="tile"
              style={{ transform: `translate(${(i % SIZE) * 100}%, ${Math.floor(i / SIZE) * 100}%)` }}
              onClick={() => tryMove(i)}
              disabled={solved}
            >
              {n}
            </button>
          );
        })}
      </div>
      <p className="status" role="status">{solved ? `クリア！ ${moves}手でそろいました` : ''}</p>
      <button type="button" className="reset" onClick={reset}>並べ直す</button>
    </div>
  );
}

.board {
  position: relative; width: 288px; height: 288px;
  background: #eefafd; border: 4px solid #00c8e8; border-radius: 8px; box-sizing: content-box;
}
.tile {
  position: absolute; left: 0; top: 0; width: 72px; height: 72px;
  padding: 0; border: 3px solid #eefafd; border-radius: 10px; box-sizing: border-box;
  background: #00c8e8; color: #fff; font-size: 26px; font-weight: bold; cursor: pointer;
  transition: transform 0.15s ease-out;
}
.tile:disabled { cursor: default; background: #067a98; }
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
}