Creating value through Programming

Apr 8, 2010

Angel & Dreams - A jquery game

The "Angel and dreams" is a jquery game inspired by the cursor chaser game.
In this game there is an angel, chases dreams that appears on the screen with random colors and positions. You can use mouse to get the dream (by clicking) before the angel does.


Dreams appear, angel follows and get them, you can too, by clicking them. Who does first gets a score.
Here are two elements (dream and angel) and six functions(init(), do_dream(), chase, explode, lose, won).


This function creates the angel and them start creating dream bubbles.

 function init(){
    // create angel
    // you can download it from 
    angel = $('<img>').attr({
        top: -10,
        left: -10

    //append it to body

    //start dreaming


This function creates dreams and calls angel to chase them, also sets a time period to repeat itself.

 function do_dream() {
    //take a random color
    var color 'rgb(' Math.floor(Math.random() * 255) + ',' +
                        Math.floor(Math.random() * 255) + ',' + 
                        Math.floor(Math.random() * 255) + ')';

    //generate random position
    var Math.floor(Math.random() * $(window).width());
    var Math.floor(Math.random() * $(window).height());
    //decorating the dream
    dream = $('<span>').css({
        left50 //offsets
    //append it to body
    //bind the explode on click event
    dream.bind('click', function (e) {
        //you won
        //hide the dream
        explode(e.pageXe.pageY, $(;
    //call angel to chase the dream
    //dreams are endless

chase(x, y, dream)

Angel chases the dream, this function hides the dream as the angel touches.

 function chase(xydream) {
    //angel gets the dream 
    }, 1000, function () {
        //explode the dream
        //you lose

explode(x, y, dream)

This function fadesOut the dream with explosion effect.

 function explode(xydream) {
    }, 100, function () {

lose() and won()

These functions simply updates the scores.

 function lose() {
    $('#angel').html(parseInt($('#angel').html()) + 1);
function won() {
    //stop the angel
    $('#you').html(parseInt($('#you').html()) + 1);

<span id='you'>0</span> /

<span id='angel'>0</span


Okey? this is the time to see this code in action, yes sure the demo is here.

Labels: , ,

By :