Question

I’m making a game using jQuery but using a simple example that I found made by someone else and building on top of it.

Here is the sample that i’m using: http://motyar.blogspot.com/2010/04/angel-dreams-jquery-game.html

I need to change the chase() function so that when the angel chases the dream, I want to be able to use different images of the angel facing in different directions. So basically if the angel has to go up to catch the dream, it would use the image of the angel facing up. Same thing if going down, left, right and even on a slant.

I want it to look like the character (angel) is actually chasing after the dream as it will be facing the dream wherever it goes.

Here is the function that fired when the angel chases the dream:

 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();
    });
} 

There is nothing wrong with the example. I just need to add the feature for being able to rotate the character(angel) and face it toward the direction that it moves when it chases after the dream. (look at the sample link I provided. I need to modify that sample to do what I explained above)

I have been trying to do this for a while now but have been unsuccessful. Hope someone can help.

Thanks

Answer 1

I would suggest have more than one image of the angel looking in various directions and display the one that is appropriate based on where she is headed on the screen (you’ll have to determine this logic).

function chase(x, y, dream) {
    // if angel is going left load the "looking left" image
    //     angel.attr('src', 'angel_left.gif');

    // if angel is going right load the "looking right" image
    //     angel.attr('src', 'angel_right.gif');

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