Jogo da Velha com Minimax e Poda Alfa-Beta

jogo_velha/README.md

@@ -0,0 +1,41 @@
+# Jogo da Velha com Minimax e Árvore de Decisão
+
+Este é um jogo da velha implementado em HTML, CSS e JavaScript, que permite jogar contra o computador utilizando o algoritmo Minimax ou contra outro jogador humano. Além disso, o jogo exibe as próximas possibilidades de jogadas na forma de uma árvore de decisão.
+
+## Funcionalidades
+
+- **Modos de Jogo**:
+  - **Jogar com o Computador**: Enfrente um adversário artificial inteligente.
+  - **Jogar com outro Jogador**: Jogue contra um amigo no mesmo dispositivo.
+- **Algoritmo Minimax**: O computador utiliza o algoritmo Minimax para decidir as melhores jogadas.
+- **Árvore de Decisão**: Visualize as próximas possibilidades de jogadas.
+- **Interface Responsiva**: Layout adaptado para diferentes tamanhos de tela.
+- **Melhorias de UX/UI**:
+  - Destaque das células vencedoras.
+  - Mensagens de status para indicar o vencedor ou empate.
+  - Botões para reiniciar e selecionar o modo de jogo.
+  - Estilo visual aprimorado para melhor experiência do usuário.
+
+## Como Jogar
+
+1. Abra o arquivo `index.html` em um navegador web.
+2. Escolha um modo de jogo:
+   - **Jogar com o Computador**: Clique no botão "Jogar com o Computador".
+   - **Jogar com outro Jogador**: Clique no botão "Jogar com outro Jogador".
+3. O jogo iniciará e você pode começar a jogar clicando em uma célula vazia.
+4. O jogo continua até que haja um vencedor ou empate.
+5. Use o botão "Reiniciar" para começar um novo jogo.
+
+## Estrutura do Projeto
+
+- `index.html`: Estrutura HTML do jogo.
+- `styles.css`: Estilos CSS para a interface.
+- `script.js`: Lógica do jogo e implementação do algoritmo Minimax.
+- `README.md`: Documentação do projeto.
+
+## Melhorias Implementadas
+
+- **Aplicação do Melhor CSS**: O arquivo `styles.css` foi atualizado com estilos aprimorados para melhor responsividade e experiência do usuário.
+- **Responsividade Melhorada**: Utilização de media queries para adaptar o layout em diferentes tamanhos de tela.
+- **Destaque de Jogadas Feitas**: As jogadas já realizadas são destacadas na árvore de decisão.
+- **Interface Intuitiva**: Botões e elementos organizados para facilitar a interação.

jogo_velha/css/styles.css

@@ -0,0 +1,185 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+@media (min-width: 768px) {
+  #container {
+    flex-direction: row;
+  }
+}
+
+#game-board-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f4f4f4;
+  border-bottom: 1px solid #ccc;
+  padding: 20px;
+}
+
+@media (min-width: 768px) {
+  #game-board-container {
+    width: 40%;
+    border-right: 1px solid #ccc;
+    border-bottom: none;
+  }
+}
+
+#game-board {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  width: 100%;
+  max-width: 360px;
+  margin-bottom: 20px;
+}
+
+.cell {
+  width: 100%;
+  padding-bottom: 100%;
+  background-color: #fff;
+  border: 2px solid #ccc;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.cell::after {
+  content: attr(data-value);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 3em;
+}
+
+.cell.X::after {
+  color: blue;
+}
+
+.cell.O::after {
+  color: red;
+}
+
+.cell:hover {
+  background-color: #eaeaea;
+}
+
+.winning-cell {
+  background-color: #d4edda !important;
+  border-color: #c3e6cb !important;
+}
+
+#button-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+button {
+  flex: 1 1 100%;
+  padding: 10px 20px;
+  margin: 5px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  button {
+    flex: 1 1 auto;
+    margin: 0 5px;
+  }
+}
+
+#play-vs-computer-button {
+  background-color: #28a745;
+  color: white;
+}
+
+#play-two-players-button {
+  background-color: #17a2b8;
+  color: white;
+}
+
+#reset-button {
+  background-color: #dc3545;
+  color: white;
+}
+
+button:hover {
+  opacity: 0.8;
+}
+
+#status {
+  margin-top: 20px;
+  font-size: 1.2em;
+  text-align: center;
+}
+
+#tree {
+  width: 100%;
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+@media (min-width: 768px) {
+  #tree {
+    width: 60%;
+  }
+}
+
+#tree ul {
+  list-style-type: none;
+}
+
+.mini-board {
+  display: grid;
+  grid-template-columns: repeat(3, 20px);
+  grid-template-rows: repeat(3, 20px);
+  gap: 2px;
+  margin-bottom: 10px;
+}
+
+.mini-cell {
+  width: 20px;
+  height: 20px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 20px;
+}
+
+.mini-cell::after {
+  content: attr(data-value);
+  font-size: 0.8em;
+  color: inherit;
+}
+
+.mini-cell.X {
+  color: blue;
+}
+
+.mini-cell.O {
+  color: red;
+}
+
+.played-move {
+  background-color: #d3d3d3;
+}

jogo_velha/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Jogo da Velha com Minimax</title>
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+
+<body>
+
+  <div id="container">
+    <div id="game-board-container">
+      <h1>Jogo da Velha</h1>
+      <div id="game-board">
+        <div class="cell" id="0"></div>
+        <div class="cell" id="1"></div>
+        <div class="cell" id="2"></div>
+        <div class="cell" id="3"></div>
+        <div class="cell" id="4"></div>
+        <div class="cell" id="5"></div>
+        <div class="cell" id="6"></div>
+        <div class="cell" id="7"></div>
+        <div class="cell" id="8"></div>
+      </div>
+      <div id="button-container">
+        <button id="play-vs-computer-button">Jogar com o Computador</button>
+        <button id="play-two-players-button">Jogar com outro Jogador</button>
+        <button id="reset-button">Reiniciar</button>
+      </div>
+      <div id="status"></div>
+    </div>
+
+    <div id="tree">
+      <h3>Próximas Possibilidades</h3>
+      <ul id="tree-root"></ul>
+    </div>
+  </div>
+
+  <script src="js/script.js"></script>
+
+</body>
+
+</html>