Tres en raya. Exámenes. PHP. Bartolomé Sintes Marco. www.mclibre.org

En este ejercicio se debe crear un programa que simule un tablero de tres en raya de un jugador.

Tres en raya - Comentarios

El programa debe mostrar una tabla de tres filas y tres columnas en la que inicialmente se mostrarán nueve círculos blancos.
Al hacer clic en un círculo blanco, se cambiará por un círculo negro.
No se podrá hacer clic en un círculo negro.
Cuando se marquen tres círculos negros en una línea horizontal, vertical o diagonal se mostrará un mensaje indicándolo.
Se podrán seguir marcando círculos negros tras conseguir tres en raya, y el mensaje se seguirá mostrando.
Al hacer clic en el botón Reiniciar, se mostrarán de nuevo los nueve círculos blancos.
Capturas de pantalla de ejemplo:

Tres en raya - Ejemplos de código HTML

    <table>
      <tbody>
        <tr>
          <td><button type="submit" name="posicion" value="1"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><button type="submit" name="posicion" value="2"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><button type="submit" name="posicion" value="3"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
        </tr>
        <tr>
          <td><button type="submit" name="posicion" value="4"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><button type="submit" name="posicion" value="5"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><button type="submit" name="posicion" value="6"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
        </tr>
        <tr>
          <td><button type="submit" name="posicion" value="7"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><button type="submit" name="posicion" value="8"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><button type="submit" name="posicion" value="9"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
        </tr>
      </tbody>
    </table>

    <table>
      <tbody>
        <tr>
          <td><img src="img/circulo-negro.svg" height="120" alt="Ficha"></td>
          <td><button type="submit" name="posicion" value="2"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><button type="submit" name="posicion" value="3"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
        </tr>
        <tr>
          <td><button type="submit" name="posicion" value="4"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><img src="img/circulo-negro.svg" height="120" alt="Ficha"></td>
          <td><button type="submit" name="posicion" value="6"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
        </tr>
        <tr>
          <td><button type="submit" name="posicion" value="7"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><button type="submit" name="posicion" value="8"><img src="img/circulo-blanco.svg" height="120" alt="Ficha"></button></td>
          <td><img src="img/circulo-negro.svg" height="120" alt="Ficha"></td>
        </tr>
      </tbody>
    </table>

    <p>¡Ha hecho tres en raya!</p>

Exámenes - Tres en raya

Tres en raya - Comentarios

Tres en raya - Ejemplos de código HTML

Tres en raya - Ejemplo de programa