Controles del rat贸n

Este es el noveno paso de 10 del tutorial Canvas para el desarrollo de juegos. Puedes encontrar el c贸digo y pegarle un vistazo despu茅s de completar esta lecci贸n Gamedev-Canvas-workshop/lesson9.html.

El juego en s铆 est谩 terminado, as铆 que ahora vamos a pulirlo. Ya le hemos puesto el control del teclado y ahora le a帽adiremos el control del rat贸n.

Detectar el movimiento del rat贸n

Detectar el movimiento del rat贸n es m谩s f谩cil que detectar las pulsaciones de las teclas. Todo lo que necesitamos es un a帽adir "escuchador" al evento mousemove.A帽ade esta l铆nea destr谩s de los otros "listeners", justo debajo del evento keyup:

document.addEventListener("mousemove", mouseMoveHandler, false);

Asociar el movimiento de la pala con el movimiento del rat贸n

Podemos cambiar la posici贸n de la pala bas谩ndonos en las coordenadas del puntero del rat贸n. Eso es lo que hace la funci贸n siguiente. A帽谩dela detr谩s de la l铆nea que acabas de a帽adir:

function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
        paddleX = relativeX - paddleWidth/2;
    }
}

En esta funci贸n calculamos un valor relativeX, que es la posici贸n horizontal del rat贸n en el "viewport" (e.clientX), menos la distancia entre el borde izquierdo del terreno de juego y el borde izquierdo del "viewport" (canvas.offsetLeft).

Si el valor resultante es mayor que cero y menor que el ancho del terreno de juego, es que el rat贸n est谩 dentro de los l铆mites, y calculamos la posici贸n de la paleta poni茅ndole el valor relativeX menos la mitad del ancho de la paleta, para que el movimiento sea de verdad relativo a la mitad de la paleta.

Ahora, la paleta seguir谩 la posici贸n del cursor del rat贸n pero, como restringimos el movimiento al <canvas>, no desaparecer谩 completamente por los lados.

Compara tu c贸digo

Aqu铆 tienes el c贸digo para comparar:

Ejercicio: ajusta los l铆mites del movimiento de la pala para que siempre se vea la pala completa (ahora s贸lo se ve media en los laterales).

Pasos siguientes

Ya tenemos el juego terminado, pero a煤n lo podemos mejorar con algunos trucos Finalizando.