• ¿Qué hace este código HTML?

      • Define que el documento es de tipo HTML5.

      • Crea un área donde se dibujará el juego (llamada "canvas").

      • Incluye un archivo CSS para darle estilo y un archivo JavaScript para la lógica del juego.

    Código:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Simple Tennis Game</title> <link rel="stylesheet" href="style.css" /> </head> <body> <canvas id="gameCanvas"></canvas> <script src="game.js"></script> </body> </html>

    • ¿Qué hace este código CSS?

      • Centra el área del juego (canvas) en la pantalla.

      • Establece un fondo gris claro para la página.

      • Añade un borde negro alrededor del área de juego y le da un color verde al fondo del canvas.

    body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; margin: 0; } #gameCanvas { border: 2px solid #000; background-color: #009578; }

    • Estilos del Body: display: flex;: Usa Flexbox para centrar el canvas tanto vertical como horizontalmente. justify-content: center; y align-items: center;: Centran el contenido en el cuerpo. height: 100vh;: Establece la altura del cuerpo al 100% de la altura de la ventana gráfica. background-color: #f0f0f0;: Establece un fondo gris claro para la página. margin: 0;: Elimina el margen predeterminado alrededor del cuerpo.

    • Estilos del Canvas: border: 2px solid #000;: Agrega un borde negro alrededor del canvas. background-color: #009578;: Establece el color de fondo del canvas a un color verdoso.

    • ¿Qué hace este código JavaScript?

      1. Configura el área de juego (canvas) para que tenga un tamaño específico.

      2. Crea las palas: Define el tamaño y la posición de la pala del jugador y de la IA (inteligencia artificial).

      3. Crea la pelota: Establece su tamaño y su posición inicial, así como su velocidad.

      4. Dibuja las formas: Hay funciones que permiten dibujar rectángulos (para las palas) y círculos (para la pelota) en el canvas.

      5. Mueve las palas: La pala del jugador se mueve según el movimiento del mouse, mientras que la pala de la IA sigue a la pelota.

      6. Mueve la pelota: La pelota se desplaza y rebota al chocar con las palas o los bordes del canvas.

      7. Dibuja todo de nuevo: Cada vez que se actualiza el juego, se limpia el canvas y se dibujan las palas y la pelota en sus nuevas posiciones.

      8. Bucle del juego: Se crea un ciclo que mantiene el juego en marcha, actualizando la posición de la pelota y las palas continuamente.

    Por ejemplo:

    Función para Mover las Palas: Esta función escucha los movimientos del mouse para controlar la pala del jugador. La posición vertical de la pala (playerY) se actualiza en función de la posición Y del mouse. La pala de la IA (aiY) se mueve hacia la posición Y de la pelota, creando un comportamiento básico de IA. function moveBall() { ballX += ballSpeedX; ballY += ballSpeedY;

    if (ballY + ballSize > canvas.height || ballY - ballSize < 0) { ballSpeedY = -ballSpeedY; } if (ballX < playerX + paddleWidth && ballY > playerY && ballY < playerY + paddleHeight) { ballSpeedX = -ballSpeedX; } if (ballX + ballSize > aiX && ballY > aiY && ballY < aiY + paddleHeight) { ballSpeedX = -ballSpeedX; }