js/script.js - develop - AlexMLev/stage3-beginners

js/script.js
169 строк4 KB
Alexey Malchikov
Финал: сайт в корне
07 апр 2026, 14:21
07 апр 2026, 14:21db51ab2
// элементы
const puzzle = document.getElementById("puzzle");
const movesEl = document.getElementById("moves");
const winsEl = document.getElementById("wins");
const shuffleBtn = document.getElementById("shuffleBtn");
const solveBtn = document.getElementById("solveBtn");
const modal = document.getElementById("successModal");
const closeModal = document.getElementById("closeModal");

// переменные
const size = 3;
const total = size * size;
let tiles = [];
let moves = 0;
let wins = 0;

// создать решенное поле
function createSolvedState() {
  return Array.from({ length: total }, (_, i) =>
    i + 1 === total ? 0 : i + 1
  );
}

// запуск игры
function init() {
  tiles = createSolvedState();
  moves = 0;
  updateMoves();
  render();
  shuffle(160);
}

// перемешивание
function shuffle(steps = 120) {
  tiles = createSolvedState();
  let emptyIndex = tiles.indexOf(0);
  let prevIndex = -1;

  for (let i = 0; i < steps; i++) {
    const neighbors = getNeighbors(emptyIndex).filter(
      (n) => n !== prevIndex
    );

    const rand = neighbors[Math.floor(Math.random() * neighbors.length)];

    [tiles[emptyIndex], tiles[rand]] = [tiles[rand], tiles[emptyIndex]];

    prevIndex = emptyIndex;
    emptyIndex = rand;
  }

  if (isSolved()) shuffle(steps + 10);

  moves = 0;
  updateMoves();
  render();
}

// отрисовка
function render() {
  puzzle.innerHTML = "";

  tiles.forEach((value, index) => {
    const tile = document.createElement("button");
    tile.className = "tile" + (value === 0 ? " empty" : "");

    if (value !== 0) {
      const row = Math.floor((value - 1) / size);
      const col = (value - 1) % size;

      tile.style.backgroundPosition = `${col * 50}% ${row * 50}%`;
      tile.dataset.num = value;
      tile.addEventListener("click", () => handleMove(index));
    } else {
      tile.disabled = true;
    }

    puzzle.appendChild(tile);
  });
}

// обновление счетчиков
function updateMoves() {
  movesEl.textContent = moves;
  winsEl.textContent = wins;
}

// соседи клетки
function getNeighbors(index) {
  const row = Math.floor(index / size);
  const col = index % size;
  const res = [];

  if (row > 0) res.push(index - size);
  if (row < size - 1) res.push(index + size);
  if (col > 0) res.push(index - 1);
  if (col < size - 1) res.push(index + 1);

  return res;
}

// ход
function handleMove(index) {
  const empty = tiles.indexOf(0);

  if (!getNeighbors(index).includes(empty)) return;

  [tiles[index], tiles[empty]] = [tiles[empty], tiles[index]];

  moves++;
  updateMoves();
  render();

  if (isSolved()) {
    wins++;
    updateMoves();
    setTimeout(() => modal.classList.add("show"), 200);
  }
}

// проверка победы
function isSolved() {
  const solved = createSolvedState();
  return tiles.every((v, i) => v === solved[i]);
}

// кнопки
shuffleBtn.addEventListener("click", () => {
  modal.classList.remove("show");
  shuffle(180);
});

solveBtn.addEventListener("click", () => {
  modal.classList.remove("show");
  tiles = [1,2,3,4,5,6,7,0,8];
  moves = 0;
  updateMoves();
  render();
});

closeModal.addEventListener("click", () => {
  modal.classList.remove("show");
});

// клавиатура
window.addEventListener("keydown", (e) => {
  if (!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Escape"].includes(e.key)) return;

  if (e.key === "Escape") {
    modal.classList.remove("show");
    return;
  }

  const empty = tiles.indexOf(0);
  const row = Math.floor(empty / size);
  const col = empty % size;

  let target = null;

  if (e.key === "ArrowUp" && row < size - 1) target = empty + size;
  if (e.key === "ArrowDown" && row > 0) target = empty - size;
  if (e.key === "ArrowLeft" && col < size - 1) target = empty + 1;
  if (e.key === "ArrowRight" && col > 0) target = empty - 1;

  if (target !== null) handleMove(target);
});

// запуск
init();