Sliding-Puzzle-JS

📋 Contexto Acadêmico

Este projeto foi desenvolvido durante a graduação em Ciência da Computação, com o objetivo de fixar conceitos de manipulação de vetores/matrizes e interação com o DOM sem o uso de frameworks.

O desafio técnico consiste em mapear um array bidimensional (matriz visual) e validar movimentos baseados na adjacência de índices, simulando a lógica física de peças deslizantes.

🚀 Funcionalidades

• Lógica de Movimento Validada: O sistema calcula matematicamente se a peça clicada é vizinha (cima, baixo, esquerda, direita) do espaço vazio antes de permitir a troca.
• Contador de Movimentos: Monitoramento de eficiência do jogador.
• Verificação de Vitória: Algoritmo que checa, a cada movimento, se o array atual corresponde ao array ordenado (1 a 15).
• Feedback Visual e Sonoro: Interatividade para melhorar a experiência do usuário (UX).

🛠️ Tecnologias e Algoritmos

• Estrutura: Grid 4x4 para alocação das peças.
• Estilização: Uso de background-position para recortar a imagem principal em 16 fragmentos lógicos.
• Engenharia:
  • Swap Logic: Troca de posição de elementos no DOM e atualização de estado interno.
  • Validação de Índices: Checagem de coordenadas (X, Y) para permitir apenas movimentos válidos.
  • Manipulação de Arrays: Comparação entre o estado atual e o estado objetivo (JSON.stringify ou loops de verificação).

📂 Estrutura do Projeto

/
├── img/                 # Imagem base e assets visuais
├── sound/               # Efeitos sonoros de interação
├── index.html           # Estrutura do tabuleiro
├── style.css            # Estilização do grid e responsividade
├── script.js            # Lógica do algoritmo de troca
└── README.md            # Documentação técnica

🏁 Como Executar Localmente

Clone o repositório:

git clone https://github.com/EderJuniorS/Sliding-Puzzle-JS.git