So far in the game, we have particles when an item is clicked, a hint to show the location of an unfound item, but what should we do if the player goes berserk and wildly clicks all over the place in hopes of finding a difficult-to-find item? In this episode of Creating a Hidden Object Game is Silverlight 3 we will add an earthquake effect if the player clicks too many times in a 5 second interval.

Let’s first start with the shake effect.  The magnifierCanvas Canvas contains the background image and all Paths for each clickable item. We will create a new storyboard called ShakeStoryboard that will animate the Left property of the Canvas:

Each of the 4 key frames set the Left property to a different value as shown in the storyboard XAML:

<Storyboard x:Name="ShakeStoryboard" RepeatBehavior="5x" AutoReverse="False" SpeedRatio="5">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="magnifierCanvas"
        Storyboard.TargetProperty="(Canvas.Left)">
            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="-10"/>
            <EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="10"/>
            <EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

The Storyboard has the RepeatBehavior property set to repeat 5 times and the SpeedRatio property set to speed up the animation.

If the player clicks on the background image 10 times within a 5 second interval, then the ShakeStoryboard will play. To accomplish this we need three SetGlobalCounterAction instances and one ControlStoryboardAction added to the UserControl:

The first SetGlobalCounterAction sets the values for the TooManyClicks counter when the UserControl loads:

The ControlStoryboardAction plays the ShakeStoryboard when the GlobalCounterMaxReachedTrigger is fired for the TooManyClicks key which we set previously to 10.

When the counter reaches 10 we need to set it back to zero which is what the second SetGlobalCounterAction does:

The final SetGlobalCounterAction uses the TimerTrigger to reset the counter every 5 seconds:

The only thing left to do is add the IncrementGlobalCounterAction to the background image to increment the counter by 1:

So with 5 Action instances, 3 Trigger types, 1 Storyboard, and 0 lines of code we were able to quickly add this feature to the game.

Source Code

Demo