<canvas xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas	x:Name="parentCanvas"
    Width="400" Height="300"
    Cursor="Stylus"

    Loaded="onCanvasLoaded"
    MouseMove="onMouseMove">
    <Canvas.Background>
      <ImageBrush ImageSource="background.jpg"/>
    </Canvas.Background>

    <Rectangle x:Name="border"
      Width="400" Height="300"
      StrokeThickness="2" Stroke="Black"/>
      
    <Line x:Name="lineTop" X1="0" Y1="2"
      X2="400" Y2="2" Stroke="Black" StrokeThickness="2" />
    <Line x:Name="lineRight" X1="398" Y1="0" 
      X2="398" Y2="300" Stroke="Black" StrokeThickness="2" />
    <Line x:Name="lineBottom" X1="400" Y1="298"
      X2="0" Y2="298"	Stroke="Black" StrokeThickness="2" />
    <Line x:Name="lineLeft" X1="2" Y1="300"
      X2="2" Y2="0" Stroke="Black" StrokeThickness="2" />

    <Rectangle x:Name="startButton" Width="400" Height="300" 
      Fill="Gray" Opacity="0.3" Cursor="Hand"
      MouseLeftButtonDown="Start"/>

    <TextBlock x:Name="startText" 
      Canvas.Left="60" Canvas.Top="150"
      Cursor="Arrow" TextWrapping="Wrap" Width="300"
      Foreground="White"
      Text="Avoid the walls and the pink rectangle. 
        Click anywhere on the canvas to begin..."/>

    <Rectangle x:Name="target"
      Width="40" Height="40"
      Canvas.Left="170"
      Canvas.Top ="10"
      Fill="pink" StrokeThickness="2"/>

    <TextBlock x:Name="txtTicks" Foreground="White"
      Canvas.Left="10" Canvas.Top="10"/>
  </Canvas>
</canvas>

var mouseX = 0;
var mouseY = 0;

var moveX = 0.0;
var moveY = 0.0;

var X = 170;
var Y = 10;
//------------------------------
var canvas = null;
var plugin = null;
var ball;

var txtTicks;

var lineLeft;
var lineTop;
var lineRight;
var lineBottom;
//------------------------------
var gravity = 0.1;
var interval;
var seconds=0;
var ticks=0; 

function onCanvasLoaded(sender)
{
    plugin	= sender.getHost();
    txtTicks  = sender.findname("txtTicks");
	lineLeft	= sender.findname("lineLeft");
	lineTop		= sender.findname("lineTop");
	lineRight	= sender.findname("lineRight");
	lineBottom	= sender.findname("lineBottom");
    startButton = sender.findName("startButton");
    startText = sender.findName("startText");
    target  = sender.findName("target");
    canvas  = sender.findName("parentCanvas");
    
    if (interval){
		clearInterval(interval);
		interval = null;
	}	
	createStartButton();
}

function createStartButton()
{
	startButton.visibility = "Visible";
	startText.visibility = "Visible";
}

function Start (sender, MouseEventArgs)
{
	startButton.visibility = "Collapsed";
	startText.visibility = "Collapsed";
	X = 170;
	Y = 10;
	moveX = 0.0;
	moveY = 0.0;
	ticks = 0;
	lineBottom.Stroke	= "Black";
	lineLeft.Stroke		= "Black";
	lineRight.Stroke	= "Black";
	lineTop.Stroke		= "Black";
	target.Stroke		= "Black";
	interval = setInterval ("Draw()", 1);
}
//---------------------------------------

function Draw()
{	
	ticks = ticks + 1
	moveY += gravity;
	X += moveX;
	Y += moveY;
	//redraw the target position
	target["Canvas.Left"]= X;
	target["Canvas.Top"] = Y;
	//Check Wall Collision - Left
	if (X < 0)
	{
		X = 0;
		moveX = -moveX; //reverses direction
		ApplyBounceLoss();
	}
	//Check Right
	if (X > canvas.Width - 1 - target.Width)
	{
		X = canvas.Width - 1 - target.Width;
		moveX = -moveX; //reverses direction
		ApplyBounceLoss();
	}
	
	//Check Top
	if (Y < 0)
	{
		Y = 0;
		moveY = -moveY; //reverses direction
		ApplyBounceLoss();
	}
	//Check Below
	if (Y > canvas.Height - 1 - target.Height)
	{
		Y = canvas.Height - 1 - target.Height;
		moveY = -moveY; //reverses direction
		ApplyBounceLoss();
	}
	if (Math.abs(moveX) < 0.1 && 
	    Math.abs(moveY) < 0.1 && 
	    Y > canvas.Height - 1 - target.Height - 40)
	{
		BounceAgain();
	}
	
	if (Math.floor(mouseX) > Math.floor(X) && 
		Math.floor(mouseX) < Math.floor(X) + target.Width &&
		Math.floor(mouseY) > Math.floor(Y) &&
		Math.floor(mouseY) < Math.floor(Y) + target.Height)
	{
		endGame("target");
	}
	
	if (Math.floor(mouseX) <= 10 )
	{		
		endGame("lineLeft");	
	}
	 
	if (Math.floor(mouseX) >= canvas.Width - 10)
	{
		endGame("lineRight");
	}
	
	if (Math.floor(mouseY) <= 10)
	{
		endGame("lineTop");	
	} 

	if (Math.floor(mouseY) >= canvas.Height - 10) 
	{
		endGame("lineBottom");
	}
	
	txtTicks.Text	= "Ticks: "		+ (ticks+1);
}

function ApplyBounceLoss()
{
	moveY *= 0.75;
	moveX *= 0.75;	
}

function BounceAgain()
{
    moveX = Math.random()-1;
    
    //shoot up (reversed) at random angle
    moveY = -(Math.random()); 
    moveX *= 50;
    moveY *= 50;
    X += moveX;
    Y += moveY;
}

function onMouseMove(sender, mouseEventArgs)
{
	mouseX = mouseEventArgs.GetPosition(null).X;
	mouseY = mouseEventArgs.GetPosition(null).Y;
}

function endGame(touch)
{
	clearInterval(interval);
	canvas.findName(touch).Stroke = "Crimson";
	alert("You have survived for " + ticks + " ticks!");	
	createStartButton();
}