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.
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.
Después de meses sin actualizar, he aquí algunas cosas nuevas que pueden encontrar en canvas-event:
Ideas que tengo pero no he implementado:
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 *¬*)
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:
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.