Aprende a crear juegos en HTML5 Canvas

domingo, 31 de mayo de 2015

Reto: rompecabezas animado

Anteriormente aprendimos a crear un juego de rompecabezas. Es tiempo de poner a prueba todo lo que hemos aprendido en los cursos hasta ahora.

A continuación, se muestra el rompecabezas con un nuevo detalle: Las piezas están animadas.

El reto consiste en realizar este efecto; todo lo que necesitas lo has aprendido ya a lo largo del blog. La única pista que daré al respecto, es que tendrás que apoyarte de lo aprendido con Doble Buffers.

Para los que participen en el reto, habrá un premio al primero en completarlo de forma exitosa, que consiste en 40 horas gratuitas de apoyo personalizado para tu proyecto.

Para entrar en el concurso, tendrás que mandar tu código terminado a karl@canvas.ninja, y dejar un comentario en esta entrada sobre tu participación en el reto. El ganador será dado a conocer de forma pública como respuesta a su comentario.

¿Estás preparado? ¡Mucha suerte para todos!

[Canvas not supported by your browser]

20 comentarios:

  1. Wooow seguro que debe ser mas simple de lo que me imagino

    ResponderBorrar
  2. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  3. Muchas gracias por tus cursos, me animaré a hacer el reto cuando termine de hacer los anteriores, saludos.

    ResponderBorrar
  4. Muchas gracias por tus cursos, me animaré a hacer el reto cuando termine de hacer los anteriores, saludos.

    ResponderBorrar
  5. Impresionante, cuando termine tus cursos anteriores me animaré a hacerlo, muchas gracias por tu cursos.

    ResponderBorrar
  6. Respuestas
    1. Al día de hoy, aún ningún valiente a tomado el reto y enviado su resultado.

      Borrar
    2. Por el momento he estado con concentrado en otros proyectos, por lo cual no he podido agregar nuevos temas por acá, pero no te preocupes, el blog no ha muerto, y aún sigo al pendiente de los nuevos lectores y sus dudas.

      Borrar
  7. Bueno espero el blog no este muerto ya que me he divertido bastante con el y quería dejar mis gracias.

    Aqui esta mi demo: https://formatcom.github.io/devGameJS/example/reto

    ResponderBorrar
    Respuestas
    1. Aqui esta el codigo Fuente
      https://formatcom.github.io/devGameJS/
      aunque de igual forma no lo comprimí

      Borrar
    2. Damas y caballeros, tenemos un ganador. No sólo completó el reto, si no que además le agregó detalles personales como el efecto de rebote en la imagen, y el acceso a multiples rompecabezas posibles.

      ¡Muchas felicidades!

      Borrar
    3. Muchas gracias y sobre tu blog me ha gustado mucho no lo dejes y eso que no es por el primero que paso xD... y que también tengo a;os en esto y me gusto mucho tu trabajo en space station rainbow y me he dado cuenta que tienes un botón para debug aunque me da curiosidad que utilidad tiene el circulo centrar en la cámara en modo debug.

      Borrar
    4. No te preocupes, el proyecto sigue en pie y seguiré con este blog. Estoy planeando grandes cambios, espero puedan llegar pronto.

      Sobre el debug de la cámara, es un código antiguo, así que no recuerdo bien, pero creo que se trataba de un sprite dummy para evaluar algo dentro de la vista de la cámara, posiblemente los disparos, pero no te puedo garantizar la verdadera razón de este elemento.

      Borrar
  8. He limpiado el codigo del puzzle y organizado para que sea mucho mas legible para todos, aunque tiene un bug que aun no localizo que es que cuando al juego se le da restart se relentiza

    ResponderBorrar
    Respuestas
    1. Posiblemente se trate de algún elemento que no estés limpiando correctamente, esto es muy común. Podría revisarle más tarde a detalle para ver si localizo el origen de este problema.

      Borrar
    2. yo creo que es porque llamo de nuevo al loop, y debería detenerlo o pensar otro método para el reset.

      Borrar
    3. Definitivamente es eso. Lo ideal es iniciar el ciclo en cuanto cargue la página, una sola vez, y ya en todo caso si quieres que no esté jugable tu juego hasta que termine de cargar, como parece ser tu intensión, tal vez lo mejor será bloquearlo con una pantalla de carga.

      Borrar
    4. Solucionado y compartido, ahora tiene pantalla de loading. como he dicho antes esta código abierto para que puedan utilizarlo los de este blog sin ningún problema. Menos las ilustraciones esas si son privadas :D ya que solo yo tengo el permiso de utilizarlas

      Borrar
    5. ¡Buen trabajo! ¡Y muchas gracias por compartir!

      Borrar