Collisions

Collisions

Collecting raindrops

Download starter project

The following examples show how to use a Sprite’s intersect method to see if it has collided with something.

• Add a collector to the bottom of the screen to the “One drop over and over” example in Random events.

• Add keyboard events to the collector to let it move.

• Collect a drop.

• Collect lots of drops.
  • The creation of a droplet has been moved into a funtion to make repeating the process easier and cleaner.

Killer smile

Download starter project

The following examples show that collisions work in two dimensional play as well. They also demonstrate some additional concepts like bouncing, wrapping, and random direction at constant speed.

Bouncing smiles

• Getting a smiley face on the canvas and making it bounce around.
  • Note the game’s helper function definitions are now outside the game.onload function but still indide the myGame function.
  • The randomInt function definition has been lumped together with the game’s helper functions because nothing outside the game will need it.
  • Additional properties to store speed and direction of smiley sprite instance are added to the sprite instance itself.

• Create a hoard of similies.

• Add a monkey who dies if touched by a killer smile.
  • The makeSmiley function has been modified to destroy the hero if it collides with it.
  • The hero, a monkey, is made using a monkey-making function.

Meandering smiles

• How to make a bunch of smiley faces wander around randomly and wrap at the edges (rather than bounce).
  • Uses trigonometry for calculating relative x and y speeds based on direction.

• Add the monkey (exactly the same as above).

Shooting

Shooting is a particular case of collision. There is a supplemental example showing you how to do it.