Canvas y el efecto de rebote
Si estas pensando crear un videojuego el efecto de rebote, gravedad y movimiento son imprescindibles para que tu aplicación se vea real y sobre todo llame la atención del jugador, debemos saber que como aficionados a los videojuegos somos quisquillosos en que cada detalle sea cercano a la realidad, es por ello que en este post te muestro un ejemplo de como implementar estos tres elementos en tus canvas.
Es importante mencionar que todo es manejo de coordenadas y sobre todo matemáticas, por lo que te recomiendo lo visualices como si tuvieras que diseñar basándote en un plano cartesiano; y es ahora cuando recuerdo que muchas personas dicen… ¿matemáticas? bla! jamás las necesitaré.
Debes saber que el código base que utilicé para iniciar fue el del post «Canvas Bouncing Balls» sin embargo mi enfoque es crear objetos con propiedades aleatorias (posición y color) de tal forma que lo que veas sea diferente cada que presionas F5 en tu navegador.
El primer paso es crear un archivo .html con la estructura básica es decir las etiquetas de <html>, <head>, <body> y entro de tu body un <canvas> que será el encargado de almacenar los elementos que serán creados, para este ejemplo llamado contenedor, debes tener algo como lo siguiente:
Es momento de enforcarnos a Javascript donde te explicaré paso a paso cada función para que sea más claro, en la siguiente imagen puedes visualizar las variables globales que utilizaremos a lo largo del ejercicio, puedes cambiar los valores y ver como afecta a tu desarrollo.
Lo siguiente será crear nuestro objeto en este caso es un círculo donde lleva por parámetros la posición dentro del plano (x, y) y el color a asignar, éstas son sus propiedades.
Esta función así como en muchos ejemplos se manda a llamar en body onload y es la encargada de inicializar las llamadas a las funciones principales, en este caso tiene un intervalo para empezar a generar cada círculo dentro del canvas.
updateStage es llamada en init() y su tarea es limpiar el canvas y actualizar los elementos que va creando en el espacio asignado.
initStageObjects es una de las funciones más importantes, es la encargada de generar los círculos y posicionarlos aleatoriamente así como asignarles un color, estos podrás encontrarlos en el arreglo llamado colors así que puedes agregar más colores, así mismo encontrarás la variable total que genera aleatoriamente el número de elementos que serán creados. Es por ello que realizo un for y dentro de ese bucle se asignan sus propiedades.
drawStageObjetcs será aquél que crea los elementos (arc) y «pinta» con su color asignado con anterioridad.
updateStageObjetcs es la función más importante de este ejemplo pues se encarga de obtener la posición del mouse en X y Y y mover los elementos ya creados dependiendo de donde se encuentre tu puntero, de esta manera damos un efecto de «empujar» los círculos cuando acercamos el mouse a alguna sección.
El código completo podrás descargarlo del siguiente enlace, hasta un siguiente post 🙂
@silvercorp | Twitter
Canal | Youtube
Publicado el diciembre 26, 2012 en Básicos, Código Fuente, Intermedios, Programación, Tutoriales y etiquetado en bouncing balls, canvas. Guarda el enlace permanente. 4 comentarios.
Silvercorp 
Muchisimas Gracias! (:
😀 no hay de que
hola yeci, buscando por hay encontre esta web, quizas te interese ya que haces tutoriales, esta web tiene la opcion de play en la parte baja – un botncito verde tambien tiene un timeline – y asi quien mira el codigo puede ver como se creo el tutorial codigo a codigo mientras ve el resultado en tiempo real, tiene soporte HTML – CSS – JS, aqui te pongo el link DE UNO QUE ACABO DE VER, SUERTE Y FELIZ ANO NUEVO http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background
Hoooola muchas gracias!! 🙂 lo checaré, muy amable por la información, feliz año para ti tambien 😀