canvas-event Posts

jsaw5: Crea rompecabezas personalizados

Ya llevo tiempo sin escribir, y es que en estos días han pasado muchas. Ahora que tengo tiempo libre (ya que estoy desempleado) me puse en la tarea de crear un juego en javascript y HTML5: jsaw5.

Actualización: el demo fue movido a dropbox

En jsaw5 podrán crear, resolver y compartir rompecabezas personalizados con amigos en twitter y facebook. Espero que lo visiten y den sus opiniones, aun debe tener varios errores pero si esperaba a que fuera “perfecto” 
En el proceso de creación agregue algunas mejoras a canvas-event-js las cuales espero hacer disponibles en cuanto pueda.

Actualización: canvas-event-js 0.2

Después de meses sin actualizar, he aquí algunas cosas nuevas que pueden encontrar en canvas-event:

Ideas que tengo pero no he implementado:

  • Drag-n-Drop live para evitar llamar drag en cada objeto creado, ya que demasiados callback pueden poner lenta las aplicaciones.
  • moveUp, moveDown, toFront, toBack: para mover objetos entre capas (como en PowerPoint). 

Todo esto lo pueden encontrar en el repositorio de github a donde he movido el proyecto, donde ademas pueden dejar sus sugerencias y reportes de errores, su ayuda es muy importante y siempre bien recibida.

P.D.: Has creado alguna aplicación usando canvas-event, deja el link en los comentarios (simple curiosidad *¬*)

Ejemplo método find de canvas-event

Varias personas han estado buscando como usar el método find de canvas-event, por lo que dejo un ejemplo de su uso mientras termino la documentación.

Interfaz del programa Kmines

Usando el método find, es posible seleccionar un grupo de objetos y aplicarles un método o manejador de evento. para esto debemos usar un selector como:

  • tipo: Corresponde con el nombre del método usado para crear el objeto (circle, rect, line…).
  • id: Un nombre que podemos dar a un objeto con el fin de diferenciarlo de otros del mismo tipo.

Imagine estar creando un buscaminas, el campo esta lleno con varios rectángulos: unos son minas y otros no. Todos los rectángulos tienen el mismo color, pero solo los rectángulos mina explotan y terminan el juego, mientras los demás aumentan el puntaje del jugador.

Nota Al igual que en css, el símbolo # indica que mina y safe son id.

for (var i = 0; i < 5; i++) {
ce.rect(i*10, 0, 10).setId("mina");
}

for (var i = 0; i < 5; i++) {
ce.rect(i*10; 10; 10).setId("safe");
}

// selector tipo: todos los rectángulos, tanto #mina como #safe
ce.find("rect").attr("fill", "gray");

// selector id: solo rectángulos #mina
ce.find("#mina").click(function(c, e) {
alert("Boom!");
alert("Game Over");
});

// selector id: solo rectángulos #safe
ce.find("#safe").click(function(c, e) {
puntos += 1;
});

Por otro lado el método getAll (solo en repo de github) retorna un array con los objetos que coinciden con el selector:

// encontrar y retornar los objetos rect dibujados hasta el momento
var rects = ce.findAll("rect");
// rects ahora es igual a [Rect, Rect, Rect...]

// obtener el primer circulo dibujado
var first_circle = ce.getAll("circle")[0];

Si tienen dudas o sugerencia pueden dejarlas en los comentarios, prometo tenerlas en cuenta.