Chase Game in Silverlight 1.0
Another brief experiment in Silverlight 1.0: this time a simple game. Originally I wanted to have an object that the player would drag around, but apparently Silverlight 1.0 does not have a hittest method for objects. It does in the next version…
As the instructions say, keep your mouse pointer away from the wall and the bouncing box… If you do touch anything, the wall you touched or the box itself will highlight with red.
My next experiment will be in Silverlight 2.0, because it is quite a bit different and I don’t want to fall behind…
[note color=”FFFFCC”][/note]
javascript code
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();
}
xaml code
<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>
