Simple Tap Game Using Blend

Final result will be an app in which whenever we will tap the ball it will show movement with in border and ball will stop on taping ball (in movement) again. You can use it to develop game that records your score on every tap.

We are going to handle events (start and stop) of animation.

First step is to create a new Universal Windows Platform(UWP) in Visual Studio and open it in blend.

In this article I am using a simple example which includes Rectangle and circle. Rectangle behaves like border and our ball(circle) show different movement within the border(Rectangle).

Create a rectangle and change its thickness, border color to whatever you want. Adjust them on screen and according to device you have selected I am using 13.3″ Desktop 1280X720.

Create a new storyboard and change movement of ball according to time as in the following screenshot.

movement

In blend we can use Easing Functions which give some special effect to our animations.

For more information about Easing Function visit the following link.

easefunction

Now create a function to handle click on ball.

public static bool check = true;
private void ellipse_Tapped(object sender, TappedRoutedEventArgs e)
{
if (check)
{
playit.Begin(); //playit is the name of storyboard
check = false;
}
else if (!check)
{
playit.Stop();
check = true;
}
}

Final step is to change the repetition of animation to forever, it will show continuous movements. Run the app and tap the ball. It will start moving in rectangle, tap it again to stop.

final

Add Score feature in app, a textblock and name it.

Go to tapped function and replace code.

public static int score = 0;
private void ellipse_Tapped(object sender, TappedRoutedEventArgs e)
{
playit.Begin(); //its not necessary to write it here you can add the line //in button event so that on every tap it doesn’t start //from initial //position
score += 1;
textBlock.Text = score.ToString();
}