From cf9d7f6741ed1c736efc23d6672d7a8008e523bc Mon Sep 17 00:00:00 2001
From: RafaelB-F <111882977+RafaelB-F@users.noreply.github.com>
Date: Mon, 16 Sep 2024 10:55:24 -0300
Subject: [PATCH] Add files via upload

---
 puzzle8.html | 490 ++++++++++++++++++++++++++-------------------------
 1 file changed, 252 insertions(+), 238 deletions(-)
diff --git a/puzzle8.html b/puzzle8.html
index 824aff4..edfb2b7 100644
--- a/puzzle8.html
+++ b/puzzle8.html
@@ -1,238 +1,252 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>8-Puzzle</title>
-    <style>
-        body {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            font-family: Arial, sans-serif;
-            background-color: #f0f0f0;
-        }
-
-        .container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 10px;
-        }
-
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(3, 100px);
-            grid-template-rows: repeat(3, 100px);
-            gap: 5px;
-        }
-
-        .tile {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100px;
-            height: 100px;
-            background-color: #2196f3;
-            color: white;
-            font-size: 24px;
-            cursor: pointer;
-            user-select: none;
-            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-        }
-
-        .tile.empty {
-            background-color: #f0f0f0;
-            cursor: default;
-            box-shadow: none;
-        }
-
-        .board-state {
-            margin-top: 20px;
-            font-size: 18px;
-            font-weight: bold;
-            color: #333;
-        }
-
-        .inversions {
-            margin-top: 10px;
-            font-size: 16px;
-            color: #555;
-        }
-
-        .shuffle-button {
-            margin-top: 20px;
-            padding: 10px 20px;
-            font-size: 16px;
-            cursor: pointer;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-            transition: background-color 0.3s;
-        }
-
-        .shuffle-button:hover {
-            background-color: #45a049;
-        }
-
-        .move-count {
-            margin-top: 10px;
-            font-size: 16px;
-            color: #555;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="grid">
-            <div class="tile" data-value="1">1</div>
-            <div class="tile" data-value="2">2</div>
-            <div class="tile" data-value="3">3</div>
-            <div class="tile" data-value="4">4</div>
-            <div class="tile" data-value="5">5</div>
-            <div class="tile" data-value="6">6</div>
-            <div class="tile" data-value="7">7</div>
-            <div class="tile" data-value="8">8</div>
-            <div class="tile empty" data-value="0"></div>
-        </div>
-    </div>
-    <button class="shuffle-button" id="shuffleButton">Sortear Estado Inicial</button>
-    <div class="board-state" id="boardState">
-        Estado atual: [1, 2, 3, 4, 5, 6, 7, 8, 0]
-    </div>
-    <div class="inversions" id="inversionsCount">
-        Inversões: 0 (Paridade: par)
-    </div>
-    <div class="move-count" id="moveCount">
-        Número de jogadas: 0
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const tiles = document.querySelectorAll('.tile');
-            const grid = document.querySelector('.grid');
-            const boardStateDisplay = document.getElementById('boardState');
-            const inversionsDisplay = document.getElementById('inversionsCount');
-            const moveCountDisplay = document.getElementById('moveCount');
-            const shuffleButton = document.getElementById('shuffleButton');
-
-            const goalState = [1, 2, 3, 4, 5, 6, 7, 8, 0];
-            let moveCount = 0;
-
-            // Inicializa o estado do tabuleiro
-            let boardState = Array.from(tiles).map(tile => parseInt(tile.dataset.value));
-
-            function calculateInversions(state) {
-                let inversions = 0;
-                for (let i = 0; i < state.length - 1; i++) {
-                    for (let j = i + 1; j < state.length; j++) {
-                        if (state[i] > state[j] && state[i] !== 0 && state[j] !== 0) {
-                            inversions++;
-                        }
-                    }
-                }
-                return inversions;
-            }
-
-            function updateDisplay() {
-                // Exibe o estado do tabuleiro na página
-                boardStateDisplay.textContent = `Estado atual: [${boardState.join(', ')}]`;
-
-                // Calcula e exibe o número de inversões e a paridade
-                const inversions = calculateInversions(boardState);
-                const parity = inversions % 2 === 0 ? "par" : "ímpar";
-                inversionsDisplay.textContent = `Inversões: ${inversions} (Paridade: ${parity})`;
-
-                // Exibe o número de jogadas
-                moveCountDisplay.textContent = `Número de jogadas: ${moveCount}`;
-            }
-
-            function checkGoalState() {
-                if (boardState.join(',') === goalState.join(',')) {
-                    alert(`Você resolveu o puzzle em ${moveCount} jogadas!`);
-                }
-            }
-
-            function shuffleBoard() {
-                // Embaralha o estado do tabuleiro
-                do {
-                    boardState = boardState.sort(() => Math.random() - 0.5);
-                } while (calculateInversions(boardState) % 2 !== 0); // Garante que o estado seja resolvível
-
-                moveCount = 0; // Reseta o contador de jogadas
-
-                // Atualiza o conteúdo visual
-                tiles.forEach((tile, index) => {
-                    tile.textContent = boardState[index] === 0 ? "" : boardState[index];
-                    tile.dataset.value = boardState[index];
-
-                    if (boardState[index] === 0) {
-                        tile.classList.add('empty');
-                    } else {
-                        tile.classList.remove('empty');
-                    }
-                });
-
-                // Atualiza as exibições
-                updateDisplay();
-            }
-
-            updateDisplay(); // Atualiza a exibição inicialmente
-
-            grid.addEventListener('click', (e) => {
-                const tile = e.target;
-                if (tile.classList.contains('tile')) {
-                    moveTile(tile);
-                }
-            });
-
-            shuffleButton.addEventListener('click', shuffleBoard);
-
-            function moveTile(tile) {
-                const emptyTile = document.querySelector('.tile.empty');
-                const tileIndex = Array.from(tiles).indexOf(tile);
-                const emptyTileIndex = Array.from(tiles).indexOf(emptyTile);
-
-                // Define movimentos válidos (esquerda, direita, cima, baixo)
-                const validMoves = {
-                    0: [1, 3],
-                    1: [0, 2, 4],
-                    2: [1, 5],
-                    3: [0, 4, 6],
-                    4: [1, 3, 5, 7],
-                    5: [2, 4, 8],
-                    6: [3, 7],
-                    7: [4, 6, 8],
-                    8: [5, 7]
-                };
-
-                if (validMoves[emptyTileIndex].includes(tileIndex)) {
-                    // Troca de posição entre a peça clicada e a peça vazia
-                    [boardState[tileIndex], boardState[emptyTileIndex]] = [boardState[emptyTileIndex], boardState[tileIndex]];
-
-                    // Atualiza o conteúdo visual
-                    tile.textContent = boardState[tileIndex] === 0 ? "" : boardState[tileIndex];
-                    emptyTile.textContent = boardState[emptyTileIndex] === 0 ? "" : boardState[emptyTileIndex];
-
-                    // Troca as classes para manter a peça vazia correta
-                    tile.classList.add('empty');
-                    emptyTile.classList.remove('empty');
-
-                    // Incrementa o contador de jogadas
-                    moveCount++;
-
-                    // Atualiza as exibições
-                    updateDisplay();
-
-                    // Verifica se o estado meta foi alcançado
-                    checkGoalState();
-                }
-            }
-        });
-    </script>
-</body>
-</html>
+Para adicionar a funcionalidade de contar as trocas feitas no array, você precisa manter um contador para cada troca de peças realizadas no tabuleiro. Vamos adicionar um contador de trocas e atualizar o código para exibir esse valor.
+
+Aqui estão as alterações necessárias:
+
+### 1. **Adicionar o Contador de Trocas**
+
+Vamos adicionar uma variável `swapCount` para contar o número de trocas feitas e atualizar o código para incrementar esse contador sempre que uma troca for realizada.
+
+### 2. **Atualizar o Display**
+
+Vamos atualizar o display para mostrar o número total de trocas realizadas.
+
+Aqui está o código atualizado com essas funcionalidades:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>8-Puzzle</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+        }
+
+        .container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 10px;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(3, 100px);
+            grid-template-rows: repeat(3, 100px);
+            gap: 5px;
+        }
+
+        .tile {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100px;
+            height: 100px;
+            background-color: #2196f3;
+            color: white;
+            font-size: 24px;
+            cursor: pointer;
+            user-select: none;
+            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+        }
+
+        .tile.empty {
+            background-color: #f0f0f0;
+            cursor: default;
+            box-shadow: none;
+        }
+
+        .board-state {
+            margin-top: 20px;
+            font-size: 18px;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .inversions {
+            margin-top: 10px;
+            font-size: 16px;
+            color: #555;
+        }
+
+        .move-count {
+            margin-top: 10px;
+            font-size: 16px;
+            color: #555;
+        }
+
+        .swap-count {
+            margin-top: 10px;
+            font-size: 16px;
+            color: #555;
+        }
+
+        .shuffle-button {
+            margin-top: 20px;
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+            transition: background-color 0.3s;
+        }
+
+        .shuffle-button:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="grid">
+            <div class="tile" data-value="1">1</div>
+            <div class="tile" data-value="2">2</div>
+            <div class="tile" data-value="3">3</div>
+            <div class="tile" data-value="4">4</div>
+            <div class="tile" data-value="5">5</div>
+            <div class="tile" data-value="6">6</div>
+            <div class="tile" data-value="7">7</div>
+            <div class="tile" data-value="8">8</div>
+            <div class="tile empty" data-value="0"></div>
+        </div>
+    </div>
+    <button class="shuffle-button" id="shuffleButton">Sortear Estado Inicial</button>
+    <div class="board-state" id="boardState">
+        Estado atual: [1, 2, 3, 4, 5, 6, 7, 8, 0]
+    </div>
+    <div class="inversions" id="inversionsCount">
+        Inversões: 0 (Paridade: par)
+    </div>
+    <div class="move-count" id="moveCount">
+        Número de jogadas: 0
+    </div>
+    <div class="swap-count" id="swapCount">
+        Número de trocas: 0
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const tiles = document.querySelectorAll('.tile');
+            const grid = document.querySelector('.grid');
+            const boardStateDisplay = document.getElementById('boardState');
+            const inversionsDisplay = document.getElementById('inversionsCount');
+            const moveCountDisplay = document.getElementById('moveCount');
+            const swapCountDisplay = document.getElementById('swapCount');
+            const shuffleButton = document.getElementById('shuffleButton');
+
+            const goalState = [1, 2, 3, 4, 5, 6, 7, 8, 0];
+            let moveCount = 0;
+            let swapCount = 0;
+            let gameWon = false;
+
+            // Inicializa o estado do tabuleiro
+            let boardState = Array.from(tiles).map(tile => parseInt(tile.dataset.value));
+
+            function calculateInversions(state) {
+                let inversions = 0;
+                for (let i = 0; i < state.length - 1; i++) {
+                    for (let j = i + 1; j < state.length; j++) {
+                        if (state[i] > state[j] && state[i] !== 0 && state[j] !== 0) {
+                            inversions++;
+                        }
+                    }
+                }
+                return inversions;
+            }
+
+            function updateDisplay() {
+                // Exibe o estado do tabuleiro na página
+                boardStateDisplay.textContent = `Estado atual: [${boardState.join(', ')}]`;
+
+                // Calcula e exibe o número de inversões e a paridade
+                const inversions = calculateInversions(boardState);
+                const parity = inversions % 2 === 0 ? "par" : "ímpar";
+                inversionsDisplay.textContent = `Inversões: ${inversions} (Paridade: ${parity})`;
+
+                // Exibe o número de jogadas
+                moveCountDisplay.textContent = `Número de jogadas: ${moveCount}`;
+                
+                // Exibe o número de trocas
+                swapCountDisplay.textContent = `Número de trocas: ${swapCount}`;
+            }
+
+            function checkGoalState() {
+                if (boardState.join(',') === goalState.join(',')) {
+                    alert(`Você resolveu o puzzle em ${moveCount} jogadas e ${swapCount} trocas!`);
+                    gameWon = true;
+                }
+            }
+
+            function shuffleBoard() {
+                let solvable = false;
+                while (!solvable) {
+                    boardState = [...goalState];
+                    for (let i = boardState.length - 1; i > 0; i--) {
+                        const j = Math.floor(Math.random() * (i + 1));
+                        [boardState[i], boardState[j]] = [boardState[j], boardState[i]];
+                    }
+                    if (calculateInversions(boardState) % 2 === 0) {
+                        solvable = true;
+                    }
+                }
+
+                moveCount = 0; // Reseta o contador de jogadas
+                swapCount = 0; // Reseta o contador de trocas
+                gameWon = false; // Reseta o estado do jogo
+
+                // Atualiza o conteúdo visual
+                tiles.forEach((tile, index) => {
+                    tile.textContent = boardState[index] === 0 ? "" : boardState[index];
+                    tile.dataset.value = boardState[index];
+
+                    if (boardState[index] === 0) {
+                        tile.classList.add('empty');
+                    } else {
+                        tile.classList.remove('empty');
+                    }
+                });
+
+                // Atualiza as exibições
+                updateDisplay();
+            }
+
+            updateDisplay(); // Atualiza a exibição inicialmente
+
+            grid.addEventListener('click', (e) => {
+                const tile = e.target;
+                if (tile.classList.contains('tile')) {
+                    moveTile(tile);
+                }
+            });
+
+            shuffleButton.addEventListener('click', shuffleBoard);
+
+            function moveTile(tile) {
+                if (gameWon) return;
+
+                const emptyTile = document.querySelector('.tile.empty');
+                const tileIndex = Array.from(tiles).indexOf(tile);
+                const emptyTileIndex = Array.from(tiles).indexOf(emptyTile);
+
+                // Define movimentos válidos (esquerda, direita, cima, baixo)
+                const validMoves = {
+                    0: [1, 3],
+                    1: [0, 2, 4],
+                    2: [1, 5],
+                    3: [0, 4, 6],
+                    4: [1, 3, 5, 7],
+                    5: [2, 4, 8],
+                    6: [3, 7],
+                    7: [4, 6, 8],
+                    8: [5,
\ No newline at end of file
