Canvas - de Cero a Profesional

Eventos e Interactividad

Detectar y manejar eventos del mouse.

La interacción con el usuario es un componente clave de muchas aplicaciones web, y en HTML5 Canvas, manejar eventos del mouse es fundamental para crear experiencias interactivas. Vamos a ver cómo detectar y manejar estos eventos en un contexto de Canvas.

Paso 1: Configuración Básica del Canvas

Asegúrate de tener tu elemento <canvas> listo en tu archivo HTML:

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Interacción con Mouse en Canvas</title>
</head>
<body>
    <canvas id="miCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Preparar el Script para Manejar Eventos del Mouse

En el archivo JavaScript asociado (script.js), comenzaremos configurando algunos elementos básicos para interactuar con el canvas.

Dibujar un Elemento Interactivo

Primero, dibujemos un objeto simple que el usuario pueda interactuar, como un círculo:

				
					var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');

var circle = {
    x: 250,
    y: 200,
    size: 30,
    color: 'blue'
};

function drawCircle() {
    ctx.fillStyle = circle.color;
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.size, 0, Math.PI * 2);
    ctx.fill();
}

drawCircle();

Paso 3: Añadir Eventos del Mouse

Ahora, añadiremos eventos del mouse para interactuar con el círculo. Podemos manejar eventos como mousedown, mouseup, mousemove, etc.

Detectar un Clic del Mouse

Vamos a hacer que el círculo cambie de color cuando el usuario haga clic en él. Primero, necesitamos una función para verificar si el clic ocurrió dentro del círculo:

				
					function isInside(pos, obj) {
    return Math.sqrt((pos.x - obj.x) ** 2 + (pos.y - obj.y) ** 2) < obj.size;
}

canvas.addEventListener('mousedown', function(event) {
    var rect = canvas.getBoundingClientRect();
    var mouseX = event.clientX - rect.left;
    var mouseY = event.clientY - rect.top;

    if (isInside({x: mouseX, y: mouseY}, circle)) {
        circle.color = circle.color === 'blue' ? 'red' : 'blue';
        drawCircle();  // Redibujar el círculo con el nuevo color
    }
});

Explicación

  1. Función isInside: Calcula si la posición del clic del mouse está dentro del círculo utilizando el teorema de Pitágoras.
  2. Event Listener mousedown:
    • Obtener la posición del mouse: Calcula la posición del mouse relativa al canvas, ajustando por la posición del canvas en la pantalla.
    • Comprobar y actuar: Usa isInside para verificar si el clic fue dentro del círculo y cambia el color si es necesario.

Crear gráficos interactivos y juegos simples.

Paso 1: Configuración del Proyecto

Empezaremos por establecer la base de nuestro proyecto con un archivo HTML que contenga un elemento <canvas>.

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Juego Simple en Canvas</title>
</head>
<body>
    <canvas id="miCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Crear el Archivo JavaScript

El archivo JavaScript (script.js) contendrá toda la lógica del juego. Comencemos por dibujar algunos elementos básicos y configurar la interactividad.

Dibujar Elementos Básicos

Vamos a dibujar un personaje y algunos obstáculos.

				
					var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');

// Personaje
var player = {
    x: 100,
    y: 550,
    width: 50,
    height: 50,
    color: 'blue'
};

// Obstáculo
var obstacle = {
    x: 300,
    y: 550,
    width: 50,
    height: 50,
    color: 'red'
};

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar el canvas
    // Dibujar el personaje
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y, player.width, player.height);

    // Dibujar el obstáculo
    ctx.fillStyle = obstacle.color;
    ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

    requestAnimationFrame(draw);
}

draw();

Añadir Interactividad

Para hacer el juego interactivo, permitiremos al jugador mover el personaje usando el teclado.

				
					function movePlayer(event) {
    // Detectar la tecla presionada
    if (event.key === 'ArrowLeft') {
        player.x -= 10;
    } else if (event.key === 'ArrowRight') {
        player.x += 10;
    }
}

window.addEventListener('keydown', movePlayer);

Paso 3: Agregar Lógica de Juego

Incorporemos algunos elementos de juego como la detección de colisiones y el marcador.

Detectar Colisiones

				
					function checkCollision(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
}

function updateGame() {
    if (checkCollision(player, obstacle)) {
        alert('¡Colisión detectada!');
        // Reiniciar la posición del jugador
        player.x = 100;
    }
}

Paso 4: Ejecutar el Juego

Finalmente, actualizaremos nuestro bucle de animación para incluir la lógica de juego y redibujar los elementos en cada fotograma.

				
					function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y, player.width, player.height);
    ctx.fillStyle = obstacle.color;
    ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

    updateGame();
    requestAnimationFrame(draw);
}

draw();

Recursos