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.

view plainprint?

1. for (var i = 0; i < 5; i++) {  
2.         ce.rect(i*10, 0, 10).setId("mina");  
3.     }  
4.       
5.     for (var i = 0; i < 5; i++) {  
6.         ce.rect(i*10; 10; 10).setId("safe");  
7.     }  
8.       
9.     // selector tipo: todos los rectángulos, tanto #mina como #safe  
10.     ce.find("rect").attr("fill", "gray");  
11.       
12.     // selector id: solo rectángulos #mina  
13.     ce.find("#mina").click(function(c, e) {  
14.         alert("Boom!");  
15.         alert("Game Over");  
16.     });  
17.       
18.     // selector id: solo rectángulos #safe  
19.     ce.find("#safe").click(function(c, e) {  
20.         puntos += 1;  
21.     });  

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:

view plainprint?

1. // encontrar y retornar los objetos rect dibujados hasta el momento  
2. var rects = ce.findAll("rect");  

// encontrar y retornar los objetos rect dibujados hasta el momento
var rects = ce.findAll("rect");

view plainprint?

1. // rects ahora es igual a [Rect, Rect, Rect...]  
2.       
3. // obtener el primer circulo dibujado  
4. var first_circle = ce.getAll("circle")[0];  

// 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.