ASP2: Collisions


	Menu Setting up your HTML Programming Event Inputs Mouse Keyboard E.H. Template Movement Sprite Object Collision Detection Sprite Template Up one level

Collision Detection

The collide() method returns a value of either 0 or 1 - 0 for a miss and 1 for a hit. To check for a collision between two sprites (in this case, ships[0] and ships[1]), a variable is used -

strike=ships[0].collide(ships[1]);

Prior to this, an array of two sprite objects was created, which looked like this -

ships=new Array(2); for(i=0;i<2;i++){ ships[i]=new sprite(50,36,"ship"+i,"ww"); ships[i].xPos+=100+i*100; ships[i].yPos+=300; ships[i].power=0.25; ships[i].bearing=i*90; }

The first code example is, put simply "If ships[0] has collided with ships[1], strike=1, else strike=0." Now, watch the two flying saucers until they collide. Did they flash red? They should. This is how the strike variable is used -

if(strike==1){ ships[0].dv.style.background="#ff0000"; ships[1].dv.style.background="#ff0000"; }else{ ships[0].dv.style.background="#0000ff"; ships[1].dv.style.background="#0000ff"; }

There is a similar method to the collide() method - the getBearing() method. For example -

fromDirection=ships[0].getBearing(ships[1]);

One useful application of this method is to check if the other sprite came from above or below (like in Mario Bros).
If it came from below (returned value greater than 90 and less than 270), score one to the sprite doing the checking - if not, the other sprite came from above, score one to the other sprite.

Finally, there is the hide() method. Simply call this method on a sprite object, like so -

ships[0].hide();

and the sprite will become invisible! Call the function again, and the sprite will re-appear!

I will put the spri.js and eHan.js (event handler) files into the common folder. Please do not overwrite these files, but feel free to copy them and use them in your own games.