The below example shows an object being controlled by user input. To get the object to turn left or right is a relatively simple procedure as seen below:

if (e.Key == Key.Left)
tankRotate.Angle -= 1;
if (e.Key == Key.Right)
tankRotate.Angle += 1;

The above example turns the object by 1 degree left or 1 degree right, you can use any value to make the object turn faster or slower.

To get the object to move forward in the direction it is facing is going to require our old friend ‘Trig’ to take center stage. We can use the following formulae to calculate how far to move our object by its X and Y co-ordinates:

Move X by: Math.Cos(Angle) * Speed

Move Y by: Math.Sin(Angle) * Speed

Where Angle is in radians.


1 radian is equal to 57.29577 degrees of a full circle. So if our object is turned at an angle of 57.29577 degrees it is equal to 1 radian. To work out the value of our angle in radians we can use the following formula:

Radians = Angle / 360 * 2 * Pi

Working out how much to move our object

i.e. if our object is turned to 45 degrees and our required movement speed is 2.

X += Math.Cos(45 / 360 * 2 * 3.14159) * 2;

Y += Math.Sin(45 / 360 * 2 * 3.14159) * 2;

Applying this formula to the C#

So to return to the example at the begining of this post. I use the below calculations to work out how much to increase or decrease the X and Y positions of my object:

if (e.Key == Key.Up) 


        tankMovement.X += Math.Cos(tankRotate.Angle / 360 * 2 * 3.14159) * 1;

        tankMovement.Y += Math.Sin(tankRotate.Angle / 360 * 2 * 3.14159) * 1;


Get the code

Feel free to grab the code here and start playing!

The below example shows an object being controlled by user input on a keyboard. I capture the ‘Keydown‘ event and then check what keys are being pressed using a range of ‘if‘ statements.

Upon recognition of a key assigned to a direction, an increase (or decrease depending on direction) is made to a variable that is then applied to the the Helicopters ‘Canvas.setTop‘ or ‘Canvas.setLeft‘.

This movement is then applied every frame using the ‘CompositionTarget.Rendering‘ event.

The ‘Space bar’ or Numeric ’5′ key will level the Helicopter out and stop it moving in any direction. This is done by reducing or increasing the movement in all directions until all values equal zero.

I constantly repeat 2 storyboards to animate the helicopter blades and make visible/collapse one of 5 graphics to display the helicopter facing in the relevant direction that it is moving in. Finally I constantly run a calculation to tilt (RotateTransform) the helicopter in the direction it is moving and making it level when not moving.

To save the user from loosing sight of the helicopter in the above example I have put in a collision check to make sure the helicopter can not fly outside of the viewable area. If the user controls the helicopter to fly past any boundary then the helicopters movement in that direction will be reset to zero.

Next steps

I would like to add a winch that can be dropped down below the helicopter. The winch could then be made to pick objects up and drop them on command.

Get the code

Feel free to grab the code here and start playing!

The below example shows the beginnings of my entry to the Mashooo S Prize Game Contest. The aim of “Cup-o-Salt” is to fill up the cups with the falling salt. You can use the mouse to draw lines that the salt will hit and react to and thus direct the salt into the cups. You only get a limited amount of salt so you need to act fast to fill both cups up before you run out. Until I build in a ‘restart’ feature, you will need to refresh the page to start again.


I use the Random function to make each grain of salt different in the following ways:
Distance between grains height
Distance between grains width ways
Salts level of opacity 
The direction a grain of salt will fall to if it hits a flat object

To get the drag and draw action working I used the method I blogged about titled ‘Building a paint application in Silverlight using the ‘Line’ element‘.

For collision testing I am using VisualTreeHelper.FindElementsInHostCoordinates function, thanks to a little help from my colleague James Hardaker. This allows me to test what objects a specified co-ordinate on screen is touching. Once I have this information I run a check on the amount of items a grain of salt is about to touch directly below it and command it to act accordingly. I run similar checks to detect when a cup is filled with salt.

Still to do

Scoring will be worked out from how many grains of salt were left after filling each cup up.
More levels with different cups, obstacles and challenges.
A ‘how to’ instructions page.
A high scores table.
Possibly an eraser function to remove lines drawn. 

Get the code

Once the game competition is finished and the game complete I will aim to release the source code, until then I’m afraid this ones under lock and key.

All suggestions towards improving the game are most welcome :)