Creating balloon shooter game in Silverlight



The game which I developed here is a balloon shooter. The goal of this game is to shoot balloons and collect points.

Now let us go through the design of the game.

The main window of the game is designed as below:

<
Canvas x:Name="maincanvas" Margin="-1,40,301,-44" Background="#FF5A6160">
         
<TextBlock Height="33" FontSize="24" Text="Balloon Shooter" TextWrapping="Wrap" x:Name="t1" Width="198" Canvas.Top="11"  Canvas.Left="47">
                  
<TextBlock.Foreground>
                            
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                      
<GradientStop Color="#FFDAF009" Offset="0"/>
                                      
<GradientStop Color="#FFFE1010" Offset="1"/>
                            
</LinearGradientBrush>
                  
</TextBlock.Foreground>
         
</TextBlock>
         
<TextBlock Height="19" FontSize="16" Text="Shoot balloons and collect points" TextWrapping="Wrap" x:Name="t2" Width="268" Canvas.Top="69"     Canvas.Left="15" Foreground="#FF10CCDC"/>
         
<TextBlock Height="21" Text="balloon - 1 point" TextWrapping="Wrap" x:Name="t3" Width="154" Canvas.Top="170" Canvas.Left="116"/>
         
<TextBlock Height="21" Text="balloon - 5 points" TextWrapping="Wrap" x:Name="t4" Width="154" Canvas.Top="213" Canvas.Left="116"/>
         
<Path Stretch="Fill" Data="F1 M 504.679,287.506C 542.303,287.506 541.857,311.02 532.755,344.503C 524.022,376.631 520.314,380.303      504.679,409.253C 491.041,434.507 472.758,386.501 462.796,349.131C 454.077,316.426 467.055,287.506 504.679,287.506 Z " StrokeLineJoin="Round" Height="36" Width="24.691" x:Name="b1" Canvas.Top="213" Canvas.Left="75">
                  
<Path.Stroke>
                            
<LinearGradientBrush StartPoint="-0.0804514,0.570173" EndPoint="1.14266,0.570173">
                                      
<GradientStop Color="#FF000000" Offset="0"/>
                                      
<GradientStop Color="#FF101010" Offset="1"/>
                            
</LinearGradientBrush>
                  
</Path.Stroke>
                  
<Path.Fill>
                            
<RadialGradientBrush GradientOrigin="1.2,-0.056">
                                      
<RadialGradientBrush.RelativeTransform>
                                               
<TransformGroup>
                                                         
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="5.023" ScaleY="5.023"/>
                                                         
<SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                         
<RotateTransform Angle="8.833" CenterX="0.5" CenterY="0.5"/>
                                                         
<TranslateTransform/>
                                               
</TransformGroup>
                                      
</RadialGradientBrush.RelativeTransform>
                                      
<GradientStop Color="#FFF45C0E"/>
                                      
<GradientStop Color="#FFFFFFFF" Offset="1"/>
                            
</RadialGradientBrush>
                  
</Path.Fill>
         
</Path>
         
<Path Stretch="Fill" Data="F1 M 504.679,287.506C 542.303,287.506 541.857,311.02 532.755,344.503C 524.022,376.631 520.314,380.303      504.679,409.253C 491.041,434.507 472.758,386.501 462.796,349.131C 454.077,316.426 467.055,287.506 504.679,287.506 Z " StrokeLineJoin="Round" Height="36" Width="24.691" x:Name="b2" Canvas.Top="170" Canvas.Left="75">
                  
<Path.Stroke>
                            
<LinearGradientBrush StartPoint="-0.0804514,0.570173" EndPoint="1.14266,0.570173">
                                      
<GradientStop Color="#FF000000" Offset="0"/>
                                      
<GradientStop Color="#FF101010" Offset="1"/>
                            
</LinearGradientBrush>
                  
</Path.Stroke>
                  
<Path.Fill>
                            
<RadialGradientBrush GradientOrigin="1.562,-0.471">
                                      
<RadialGradientBrush.RelativeTransform>
                                               
<TransformGroup>
                                                         
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="5.023" ScaleY="5.023"/>
                                                         
<SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                         
<RotateTransform Angle="8.833" CenterX="0.5" CenterY="0.5"/>
                                                         
<TranslateTransform X="0" Y="-0.083"/>
                                               
</TransformGroup>
                                      
</RadialGradientBrush.RelativeTransform>
                                      
<GradientStop Color="#FFF40EE4"/>
                                      
<GradientStop Color="#FFFFFFFF" Offset="1"/>
                            
</RadialGradientBrush>
                  
</Path.Fill>
         
</Path>
         
<Button Template="{StaticResource ButtonControlTemplate1}" Cursor="Hand" Height="24" Content="Button" x:Name="playbutton"                Width="131" Canvas.Left="83" Canvas.Top="290" Click="play_click" Foreground="Black" BorderBrush="#FF161414"                                          Background="Black"/>
</Canvas>

The result will be as follows:

1.gif

To maintain the score of the game, I have designed another canvas.

<
Canvas Height="37" x:Name="scorecanvas" Width="300" Opacity="0.885" d:LayoutOverrides="Height" VerticalAlignment="Bottom" Grid.Row="1" Visibility="Collapsed">
         
<Canvas.Background>
                  
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            
<GradientStop Color="#FFFCFAFA"/>
                            
<GradientStop Color="#FF9ECDA0" Offset="1"/>
                   
</LinearGradientBrush>
         
</Canvas.Background>
          <
TextBlock Height="29" Width="60" FontFamily="Verdana" FontSize="18" Foreground="#FF1F710D" Text="Score" TextWrapping="Wrap" Canvas.Top="7" Canvas.Left="71"/>
         
<TextBlock Height="27" x:Name="hits" Width="46" Text="" TextWrapping="Wrap" Canvas.Top="6" Canvas.Left="153" FontWeight="Bold" FontSize="16" FontFamily="Verdana" Foreground="#FFF62917"/>
</
Canvas>

2.gif

The pink and orange balloons are designed using button control. Two separate templates are designed to give buttons the shape of balloon.

Here is the tag for orange button.

<
Button x:Name="orngbutton" Height="53" HorizontalAlignment="Right" Margin="0,0,244,-46" VerticalAlignment="Bottom" Width="41" Content="Button" Template="{StaticResource ButtonControlTemplate3}" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" Grid.Row="1" Click="orngbutton_Click">
         
<Button.RenderTransform>
                  
<TransformGroup>
                            
<ScaleTransform/>
                            
<SkewTransform/>
                            
<RotateTransform/>
                            
<TranslateTransform/>
                  
</TransformGroup>
         
</Button.RenderTransform>
</
Button>
<
Canvas x:Name="cursorcanvas" Height="25" HorizontalAlignment="Left" Margin="-152,0,0,101" VerticalAlignment="Bottom" Width="25" Visibility="Collapsed">
         
<Path Height="25" x:Name="mycursor1" Width="25" Data="M43.5,22 C43.5,33.874123 33.874123,43.5 22,43.5 C10.125878,43.5 0.5,33.874123 0.5,22 C0.5,10.125878 10.125878,0.5 22,0.5 C33.874123,0.5 43.5,10.125878 43.5,22 z M1.5,22.5 L17.5,22.5 M27.5,22.5 L43.5,22.5 M22.622448,1.5009402 L22.377554,17.499065 M22.622448,26.50094 L22,44.523811" Fill="{x:Null}" Stretch="Fill" Stroke="#FF0E0E0E" Visibility="Visible" StrokeThickness="2"/>
</
Canvas>

The template code is as follows:

<
ControlTemplate x:Key="ButtonControlTemplate3" TargetType="Button">
         
<Grid>
                  
<VisualStateManager.VisualStateGroups>
                            
<VisualStateGroup x:Name="FocusStates">
                                     
<VisualState x:Name="Focused"/>
                                     
<VisualState x:Name="Unfocused"/>
                            
</VisualStateGroup>
                            
<VisualStateGroup x:Name="CommonStates">
                                     
<VisualState x:Name="Normal"/>
                                     
<VisualState x:Name="MouseOver"/>
                                     
<VisualState x:Name="Pressed"/>
                                     
<VisualState x:Name="Disabled"/>
                            
</VisualStateGroup>
                  
</VisualStateManager.VisualStateGroups>
                  
<Path Stretch="Fill" Data="F1 M 504.679,287.506C 542.303,287.506 541.857,311.02 532.755,344.503C 524.022,376.631 520.314,380.303 504.679,409.253C 491.041,434.507 472.758,386.501 462.796,349.131C 454.077,316.426 467.055,287.506 504.679,287.506 Z " StrokeLineJoin="Round" x:Name="orangeballoon" RenderTransformOrigin="0.5,0.5" Margin="8,9,8,8" UseLayoutRounding="False">
                            
<Path.Stroke>
                                     
<LinearGradientBrush StartPoint="-0.0804514,0.570173" EndPoint="1.14266,0.570173">
                                               
<GradientStop Color="#FF000000" Offset="0"/>
                                               
<GradientStop Color="#FF101010" Offset="1"/>
                                     
</LinearGradientBrush>
                            
</Path.Stroke>
                            
<Path.Fill>
                                     
<RadialGradientBrush GradientOrigin="1.2,-0.056">
                                               
<RadialGradientBrush.RelativeTransform>
                                                         
<TransformGroup>
                                                                  
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="5.023" ScaleY="5.023"/>
                                                                  
<SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                                  
<RotateTransform Angle="8.833" CenterX="0.5" CenterY="0.5"/>
                                                                  
<TranslateTransform/>
                                                         
</TransformGroup>
                                               
</RadialGradientBrush.RelativeTransform>
                                               
<GradientStop Color="#FFF45C0E"/>
                                               
<GradientStop Color="#FFFFFFFF" Offset="1"/>
                                     
</RadialGradientBrush>
                            
</Path.Fill>
                            
<Path.RenderTransform>
                                     
<TransformGroup>
                                               
<ScaleTransform/>
                                               
<SkewTransform/>
                                               
<RotateTransform/>
                                               
<TranslateTransform/>
                                     
</TransformGroup>
                            
</Path.RenderTransform>
                  
</Path>
         
</Grid>
</
ControlTemplate>

Similarly we can design the pink balloon used in the game.

3.gif

One more feature of the game is the design of cursor to shoot the balloons. Here I am not using the default cursor. The code for the cursor is as follows:

<
Canvas x:Name="cursorcanvas" Height="25" HorizontalAlignment="Left" Margin="-152,0,0,101" VerticalAlignment="Bottom" Width="25" Visibility="Collapsed">
         
<Path Height="25" x:Name="mycursor1" Width="25" Data="M43.5,22 C43.5,33.874123 33.874123,43.5 22,43.5 C10.125878,43.5 0.5,33.874123 0.5,22 C0.5,10.125878 10.125878,0.5 22,0.5 C33.874123,0.5 43.5,10.125878 43.5,22 z M1.5,22.5 L17.5,22.5 M27.5,22.5 L43.5,22.5 M22.622448,1.5009402 L22.377554,17.499065 M22.622448,26.50094 L22,44.523811" Fill="{x:Null}" Stretch="Fill" Stroke="#FF0E0E0E" Visibility="Visible" StrokeThickness="2"/>
</
Canvas>

We have a cursor like this:

4.gif

That's all for the design part of the game.

Now I had implemented two animations for the balloons. The code for both the animations can be seen with in the source code attached.

Now the code part of the project.

The cursor we designed earlier can be implemented with below code:

void
LayoutRoot_MouseLeave(object sender, MouseEventArgs e)
{
    Cursor=Cursors.Arrow;
}

private
void mycoursormove(object sender, MouseEventArgs e)
{
    Cursor = Cursors.None;
    Canvas.SetZIndex(mycursor1, 1);
    Canvas.SetTop(mycursor1, e.GetPosition(this).Y-200);
    Canvas.SetLeft(mycursor1, e.GetPosition(this).X-30);
}

The other part of the code is the click of the button in the shape of balloons.

private
void pinkbutton_Click(object sender, System.Windows.RoutedEventArgs e)
{

    // TODO: Add event handler implementation here.

    h=h+5;
    hits.Text = h.ToString();
    Storyboard2.Stop();
    Storyboard2.Begin();
    Storyboard1.Completed+=new System.EventHandler(Storyboard1_Completed);
}

Now play the game

5.gif

We can also implement timer and statistics of the past games. May be in future, till then "Happy Gaming".

 

 


Similar Articles
C# Corner
C# Corner started as an online community for software developers in 1999.