Tres En Raya PHP

Tres En rayajuego en php sencillo

Autor/a: Avellá Navarro, Andrés.

06/11/2024

03.Variables y sesiones

02.Estructura

01.introducción

Indice

06.OPCIONES DE JUEGO

05.CHECKWINNER()

04.MANEJO DE TURNOS

07.INTERFAZ DE USUARIO

08.EXPERIENCIA DEL USUARIO

09.DESPEDIDA

01

Introducción

01. Introduccion

¿En que consiste?

El proyecto consiste en desarrollar un juego interactivo de Tres en Raya, en el que dos jugadores pueden participar en un juego de consola web utilizando PHP, HTML y CSS.

Tecnologias utilizadas

PHP, HTML Y CSS

02

ESTRUCTURA

02. ESTRUCTURA

CONTENIDO

• Tablero de 3x3 celdas.

• Validación del ganador.

• Interacción en tiempo real.

FLUJO DEL JUEGO

• Jugador X realiza una jugada.
• El servidor verifica si hay ganador.
• Jugador O realiza una jugada.
• El ciclio se repite hasta la victoria o empate.

03

vARIABLES Y SESIONES

VARIABLES CLAVE

03. VARIABLES Y SESIONES

VARIABLES CLAVE:

$_SESSION['GANADOR']

$_SESSION['tablero']

Indica quién es el ganador ('X', 'O', o 'empate').

Una matriz 3x3 que almacena el estado de cada celda (vacío, 'X', o 'O').

$_SESSION['TURNO']

$_SESSION['PUNTUACIONES']

Almacena quién es el jugador activo ('X' o 'O').

Lleva el control de las victorias de cada jugador y los empates.

04

Manejo de Turnos

04. MAnejo de turnos

movimiento

Cada vez que un hace clic en una celda, se envian las coordenadas mediante el $_POST. El codigo verifica si la celda esta vacia y si no hay ganador.

cambio de turno

Si después del movimiento no hay ganador, el turno cambia automaticamente.Este cambio se realiza modificando el valor de $_SESSION['turno'] entre 'X' y 'O'.

05

Checkwinner()

Verifica SI HAY GANADOR

05. CHECKWINNER

combinaciones ganadoras

Existen 8 combinaciones ganadores: 3 filas, 3 columnas, 2 diagonales. checkWinner() recorre cada combinación y verifica si las celdas tienen el mismo valor.

declaración ganador o empate

Si se encuentra con una combinacion ganadora, $_SESSION['ganador'] se actualiza con el simbolo del ganador y se incrementa en $_SESSION['puntuaciones'].En cambio, si no hay combinacion ganadora, se considera empate y se incrementa $_SESSION['puntuaciones']['empates']

06

OPCIONES DE JUEGO

06. OPCIONES DE JUEGO

Nueva Partida

reinicio completo

Este reinicio borra el tablero $_SESSION['tablero'] y $_SESSION['ganador'].Esto no afecta las estadísticas acumuladas, para poder seguir llevando el conteo de victorias y empates

Destruye la sesion activa con session_destroy(), lo cual lo elimina todo y redirige a la pagina inicial para que carge desde cero.

07

INTERFAZ DE USUARIO

08. INTERFAZ DE USUARIO

Botones: Botones para nueva partida y reiniciar juego completo que permiten controlar el juego.

Estadísticas:Visualización de las victorias de cada jugador y el total de empates, actualizado en tiempo real.

Tablero de 3x3:Representado con unatabla HTML, cada celda es un boton que permite hacer clic para registrar movimientos.

Indicador de Turno:Muestra al jugador actual, ayudando a ambos jugadores a saber cúando es su turno.

08

Experiencia del usuario

CSS y diseño limpio

07. Experiencia del Usuario

diseño limpio

estilos de css

La aplicación usa CSS para mejorar la visualización y la experiencia de usuario. Los bordes, colores y animaciones de las celdas hacen que la interacción sea clara y atractiva.

Colores agradables y tipografía fácil de leer para mejorar la usabilidad. Las celdas cambian de color al pasar el cursor, guiando al usuario a realizar un movimiento.

'Un buen CSS y Diseño limpio siempre es agradable y mejora la experiencia del usuario'

Trabajo realizado por:

Andrés Avellá navarro!