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.

Idea

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

init()

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

 function init(){
    // create angel
    // you can download it from 

    //http://sites.google.com/site/dharmmotyar/Home/angel.gif?attredirects=0&d=1

    angel = $('<img>').attr({
        'src': 'angel.gif'
    }).css({
        'position': 'absolute',
        'z-index': 75,
        top: -10,
        left: -10
    });

    //append it to body
    $(document.body).append(angel);

    //start dreaming
    do_dream();
} 

do_dream()

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 x = Math.floor(Math.random() * $(window).width());
    var y = Math.floor(Math.random() * $(window).height());

    //decorating the dream
    dream = $('<span>').css({
        'position': 'absolute',
        height: '100px',
        width: '100px',
        'background-color': color,
        'border-radius': '100px',
        '-moz-border-radius': '100px',
        '-webkit-border-radius': '100px',
        top: y - 50, //offsets
        left: x - 50 //offsets
    });

    //append it to body
    $(document.body).append(dream);

    //bind the explode on click event
    dream.bind('click', function (e) {
        //you won
        won(e); 
        //hide the dream
        explode(e.pageX, e.pageY, $(e.target));
    });

    //call angel to chase the dream
    chase(x, y, dream);
    //dreams are endless
    window.setTimeout('do_dream()', 1500);
} 

chase(x, y, dream)

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

 function chase(x, y, dream) {
    //angel gets the dream 
    angel.animate({
        top: y,
        left: x 
    }, 1000, function () {
        //explode the dream
        explode(x, y, dream);
        //you lose
        lose();
    });
} 

explode(x, y, dream)

This function fadesOut the dream with explosion effect.

 function explode(x, y, dream) {
    dream.animate({
        height: '200px',
        width: '200px',
        'border-radius': '500px',
        '-moz-border-radius': '500px',
        '-webkit-border-radius': '500px',
        opacity: 0.1,
        top: y - 100,
        left: x - 100
    }, 100, function () {
        dream.hide();
    });
} 

lose() and won()

These functions simply updates the scores.

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


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

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

Demo

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

Labels: Animation, Games, jquery

By : Motyar+ @motyar