In this tutorial we will write a simple function that will tell us if any two objects are touching. The algorithm for this function is surprisingly simple. If the distance between object A and object B is less than their combined radii, they are touching. So, what we need first is a smaller function that will give us the distance between two objects. This is were the Pythagorean distance formula comes in handy.

The Pythagorean distance formula.

Actionscript function that gives us the distance between two objects:

function getDistance(object1,object2):Number{
    return Math.sqrt(Math.pow(object2._x-object1._x,2) +
            Math.pow(object2._y-object1._y,2));
} 

Now that we have a way to calculate the distance between two objects, we can create our collision detection function. First, let's take a look at the code.

function detectCollision(object1,object2):Boolean{
    var combinedRadius = object1._width/2 + object2._width/2;
    var distance = getDistance(object1,object2);
    if(distance < combinedRadius){
        return true;
    }
    else{
        return false;
    }
}

This function returns a Boolean (true or false) depending on whether or not the two objects passed into the function are touching. First, we declare a variable that will hold the combined radii of the two objects. This is done simply by dividing each object's width by 2 and then adding the two values. Next we declare a variable that will tell us the distance between the two objects. We use the getDistance(object1,object2):Boolean function above to get this value. The rest of the function basically says, "if the distance between the two objects is less than their combined radii then they must be touching, so return true, if not, return false".

We will test our collision detection function with the following:

function spiderCollision():Boolean{
    for(i=1; i<=3; i++){
        if(detectCollision(spider_mc,_root["ball"+i])){
            return true;
        }
    }
    return false;
}

Here we have a function that checks to see if the spider is colliding with any of the balls on the screen (see example above). If there is a collision, the function immediately returns true. We can now use this function to make sure the spider doesn't move anywhere it's not supposed to when the arrow keys are pressed.

this.onEnterFrame = function(){
    if(Key.isDown(Key.UP)){
        spider_mc._y -= speed;
        if(spiderCollision()){
            spider_mc._y += speed;
        }
        else{
            spider_mc.play();
        }
    }
    ...repeat for DOWN, LEFT, RIGHT 

If the UP key is being pressed we move the spider up by subtracting from it's y position. Next, we check to see if this new position is valid by using our spiderCollision() function. If the function returns true then we know that there is a collision and the spider's new position is invalid, so we simply set the spider's y position back before the screen is rendered. If there was no collision then everything is fine so we go ahead and play the walking animation to accompany the spiders movement. After we check the UP key we do the same for the DOWN, LEFT and RIGHT keys. Just make sure to change +'s to -'s and X's to Y's and vise-versa when necessary.