Examples

Click & Catch

The following sample code demonstrates how we can create a simple click me and catch me mini game by applying the move animation effect on 2 different objects (image and button) to random locations on screen, when they have either been clicked on or when the mouse is over them.

/**********************************************
 * FancyPants JavaScript demo: Click me and Catch me
 **********************************************/

// Initialize and acquire FancyPants 
fp = fp_init(); 

// Constants 
X_BOUND = fp.w; 
Y_BOUND = fp.h; 

// Helper functions 
function randValue(bound) { 
    return Math.floor(Math.random()*bound); 
} 

function moveObjToRandomLocation(obj) { 
    // Get new X & Y coordinate 
    s = obj.get("size"); 
    newX = randValue(X_BOUND - s.w); 
    newY = randValue(Y_BOUND - s.h); 

    // Apply the move animation effect 
    obj.moveto({ 
        dest: {x: newX, y: newY}, 
        accel: true  // optional 
    }); 
} 

// Setup background image 
bg = fp.image({ 
    file: "./bg.png", 
    coord: {x: 0, y: 0}, 
    size: {w: X_BOUND, h: Y_BOUND}, 
}); 

// Setup button 
button = fp.button({ 
    coord: {x: 10, y: 50}, 
    size: {w: 100, h: 50}, 
    text: "Click me!", 
    textStyle: "strong", 
}); 

// Setup image (set coordinate to 0,50 and uses image's native size by ignoring the “size” parameter) 
img = fp.image({ 
    file: "./puppy.jpg", 
    coord: {y: 50}, 
    size: {w: 200, h: 100}, 
}); 

// Perform an initial move effect after program starts up 
moveObjToRandomLocation(button); 
moveObjToRandomLocation(img); 

// Perform subsequent move effect when button has been clicked on 
button.addEventListener("change", function(evt_data) { 
    moveObjToRandomLocation(button); 
}); 

// Perform subsequent move effect when mouse cursor is on top of the image 
img.addEventListener("mouseIn", function(evt_data) { 
    moveObjToRandomLocation(img); 
}); 

// Begin the FancyPants main loop 
fp.begin();