HTML5 Canvas 2/X

Gracias por todos los comentarios y los puntos del post pasado en verdad no lo esperaba

Antes que nada quisiera aclarar algo, soy desarrollador web pero no aplico mi carrera porque “No tengo experiencia laboral” lo que si, me encanta programar en cualquier lenguaje... Claro mientras sea libre hahahaha así que disculpen algún error de código o algo que se me pueda pasar.

Aqui la primera parte


Y recuerden esta no es “la manera” solo es una de tantas, mi interés de estos post es que vean como lo hago y comiencen a crear las cosas a su manera

Ahora hay algo que todos tenemos claro, una animación es una sucesión de imágenes con 24 fps se logra la sensación de movimiento, vayamos a el inicio de los tiempos hay que volver a ver a el plano cartesiano.



Estoy seguro que todos lo recuerdan que depende de la coordenada (X,Y) sera el lugar donde el punto se posicionara pues el movimiento en canvas es muy similar a el ubiquemos el frame de canvas en el 4to cuadrante solo que en lugar de que el eje de las Y sea negativo es positivo...



Si tenemos un punto en (2,2) y queremos moverlo a la derecha comenzamos a incrementar el valor de X y a la velocidad correcta creara el movimiento que buscamos

Comenzamos con un background (esta en el post anterior) pero vamos a hacer algo diferente lo vamos a agregar el código de background a una función (para que tenga un poco de estructura... ) no es nada de otro mundo solo declaramos
function nombre(){ 
... Acá va el código ... 
} 

y para que se ejecute el código solo llamamos la función
nombre();



Ahora vamos a crear un hermoso píxel azul para esto crearemos un objeto existen diferentes formas yo usare la literal, estos llevan una sintaxis similar a esta.

var miObjeto = {
    propiedad1: valor,
    propiedad2: “valor”,
    propiedad3: 93
}

Ahora llevemos el ejemplo a lo que los maestros nos explican en las aulas (que por cierto siempre odie... )

miAuto = {
    numeroDeLlantas: 4,
    color: “negro”,
    puertas: 4
}

y para mostrar cierto valor por ejemplo usaremos una alerta para mostrar en numero de llantas:
alert(miAuto.numeroDeLlantas);
esto mostrara una cuadro de alerta que mostrara un 4. No es nada del otro mundo lo hago así para que sea fácil de entender

bueno crearemos nuestro píxel ahora que medio sabemos que es un objeto y como declararlo este objeto tendrá su posición X, Y, su Width y Height ( Ancho y Altura ) y ya que estamos aquí también crearemos una función dentro del objeto que dibuja el píxel.



Llamamos la función para dibujar el píxel pixel.draw(); en este caso. Y si todo sale bien debe ser posible ver ese lindo pixel azul ( si por algún motivo no se ve... Te recomiendo que abras el depurador de javascript de cualquier navegador y veas que linea esta mal



Ahora si, viene lo interesante como movemos el píxel ya vimos explique de manera rápida como generar movimiento ahora apliquemoslo a código

1.- Crearemos otra función fncPixelMove que solo aumentara en 1 el valor de pixel.X

2.- Crearemos una función donde fncUpdate que llamara todas las funciones y objetos para dibujar ( para que se entienda mas facilmente )

3.- Asignaremos un intervalo de tiempo para que se actualice la función update



setInterval(function, tiempo);
function: se puede usar como una función completa y llamar alli todos los componentes algo así

setInterval(function(){
... Muchas LoC ...
}, 1000);

Pero intento explicarlo de la manera mas clara sin tantos trucos de magia

tiempo: es el tiempo en milisegundos
1000 milisegundo = 1 segundo



Y tenemos ese lindo pixel que se mueve a la derecha y se pierde en el infinito... Pero al menos ya se mueve hahaha

Intenta cambiar agregar código en la función fncPixelMove, aumenten en uno el eje Y o eliminen X y dejen Y jueguen con los intervalos de actualización

Eso es todo por hoy en la siguiente explicare colisiones para que el píxel no se vaya de largo y parezca que rebote con el borde de canvas y también como mover el objeto con las teclas.

Acá dejo el mini-proyecto en JSFiddle http://jsfiddle.net/z94WY