14. Lectura del Ratón

  14: Trabajando con el Ratón en JavaScript

¡Muy buenas y bienvenidos a la sesión número 14 del curso de programación de juegos con JavaScript!

Hoy aprenderemos a detectar la posición y las pulsaciones del ratón dentro de nuestro juego. ¡Vamos a ello!

---

🖱️ El Canvas: Nuestro "lienzo" de juego

Antes de empezar, recordemos qué es el Canvas:

• Es como una imagen dinámica donde dibujaremos nuestros elementos (personajes, objetos, etc.).

• Podemos actualizarlo cada fotograma para crear animaciones.

• Será el área visible de nuestro juego (no toda la pantalla del navegador, solo la sección que definamos).

🛠️ Configuración básica del Canvas:

html

<canvas id="miCanvas" width="500" height="300"></canvas>

css

<style>
  #miCanvas {
    border: 2px solid black; /* Para visualizarlo mejor */
  }
</style>

📌 Nota: Sin estilos, el Canvas es "invisible", por eso le añadimos un borde.

---

🔍 Detectando el Ratón en el Canvas

Queremos que las acciones del ratón (clics, movimiento) solo se registren dentro del Canvas.

📝 Pasos:

1. Asegurarnos de que el Canvas está cargado:

   javascript

   let miCanvas;
   window.onload = inicializar;
   
   function inicializar() {
     miCanvas = document.getElementById("miCanvas");
     // Configuramos los eventos aquí...
   }

2. Eventos del Ratón:

   • Click:

     javascript

     miCanvas.addEventListener("click", clickRaton);
     
     function clickRaton(evento) {
       console.log("Ratón pulsado");
     }

   • Soltar el botón:

     javascript

     miCanvas.addEventListener("mouseup", sueltaRaton);
     
     function sueltaRaton(evento) {
       console.log("Ratón liberado");
     }

   • Movimiento:

     javascript

     miCanvas.addEventListener("mousemove", movimientoRaton);
     
     function movimientoRaton(evento) {
       let x = evento.clientX;
       let y = evento.clientY;
       console.log(`Posición: X=${x}, Y=${y}`);
     }

---

🎮 Resultado

• Al hacer clic/soltar en el Canvas, veremos mensajes en la consola.

• Al mover el ratón dentro del Canvas, se mostrarán las coordenadas (X, Y) en tiempo real.

👉 Prueba tú mismo: ¡Intenta crear un botón que cambie de color al pasar el ratón por encima!

---

🔜 Próximos pasos

En futuras sesiones, veremos:

• Cómo usar estos eventos para interactuar con objetos del juego.

• Adaptar los controles para dispositivos táctiles (smartphones/tablets).

¡Nos vemos en la próxima! 🚀

¿Dudas? ¡Dejadlas en los comentarios! 👇

#JavaScript #GameDev #Programación #AprendeJavaScript