Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (1)

Tap me/ Circle Tap

By , 25 Oct 2012
 

Please note

This article is an entry in our AppInnovation Contest. Articles in this sub-section are not required to be full articles so care should be taken when voting.

Introduction

Tap me is a focus game which requires the user to touch/click a circle(s) of a particular color selected randomly by the game. It's a windows 8 desktop App (using WPF, C#) and supports touch.

Background

This is a game to test focus and quickness of the player. Goal of the game is to touch as many correct colored circles as he can, colors to be selected change very frequently. There are different levels presented to the user, and he/ she has to get a minimum score to get to the next level.

Ex: Level 1 : user is given red and has to select as many red circles as possible before the color changes

Level 2: circle to be selected is displayed in a different color to confuse the user

It can also be played in 2 player mode

player 1 selects a color and player 2 has to select circles of that color within a time limit, player 1 will be changing the colors frequently to confuse player 2.

Screenshots

Using the code 

logic :
board always has circles
they are made invisible upon a click and update the score accordingly (based on comparision with current circle)
refresh board with a time interval and make circles visible if they are not and assign a random color
check if the player has scored enough to get to the next level 

Partial code for level1

<Window x:Class="tapme.Level1Window"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" WindowStyle="None">
    <Grid Background="#FF383434">
        <Ellipse Height="30" HorizontalAlignment="Left" Margin="45,241,0,0" Name="ellipse1" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" Fill="#FFCDC42F" MouseDown="ellipse_MouseDown" />
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="217,205,0,0" Name="ellipse2" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="12,269,0,0" Name="ellipse3" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="81,169,0,0" Name="ellipse4" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF0B4C62" Height="30" HorizontalAlignment="Left" Margin="258,150,0,0" Name="ellipse5" Stroke="#FF0B4C62" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="81,205,0,0" Name="ellipse6" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="81,136,0,0" Name="ellipse7" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="129,181,0,0" Name="ellipse8" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="20,169,0,0" Name="ellipse9" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF0B4C62" Height="30" HorizontalAlignment="Left" Margin="70,269,0,0" Name="ellipse10" Stroke="#FF0B4C62" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="97,241,0,0" Name="ellipse11" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="45,197,0,0" Name="ellipse12" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="117,136,0,0" Name="ellipse13" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="45,136,0,0" Name="ellipse14" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF0B4C62" Height="30" HorizontalAlignment="Left" Margin="188,136,0,0" Name="ellipse15" Stroke="#FF0B4C62" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="179,181,0,0" Name="ellipse16" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="179,225,0,0" Name="ellipse17" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="61,52,0,0" Name="ellipse18" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF0B4C62" Height="30" HorizontalAlignment="Left" Margin="61,100,0,0" Name="ellipse19" Stroke="#FF0B4C62" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF0B4C62" Height="30" HorizontalAlignment="Left" Margin="10,214,0,0" Name="ellipse20" Stroke="#FF0B4C62" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="217,169,0,0" Name="ellipse21" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="105,52,0,0" Name="ellipse22" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="258,197,0,0" Name="ellipse23" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="97,100,0,0" Name="ellipse24" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="141,100,0,0" Name="ellipse25" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF0B4C62" Height="30" HorizontalAlignment="Left" Margin="141,269,0,0" Name="ellipse26" Stroke="#FF0B4C62" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="0,114,0,0" Name="ellipse27" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="152,52,0,0" Name="ellipse28" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="20,78,0,0" Name="ellipse29" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="12,42,0,0" Name="ellipse30" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="45,12,0,0" Name="ellipse31" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="188,269,0,0" Name="ellipse32" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="188,100,0,0" Name="ellipse33" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="227,277,0,0" Name="ellipse34" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF0B4C62" Height="30" HorizontalAlignment="Left" Margin="227,124,0,0" Name="ellipse35" Stroke="#FF0B4C62" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="272,107,0,0" Name="ellipse36" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="227,241,0,0" Name="ellipse37" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF0B4C62" Height="30" HorizontalAlignment="Left" Margin="258,233,0,0" Name="ellipse38" Stroke="#FF0B4C62" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="335,150,0,0" Name="ellipse39" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="294,217,0,0" Name="ellipse40" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="308,100,0,0" Name="ellipse41" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="272,269,0,0" Name="ellipse42" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="227,88,0,0" Name="ellipse43" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF620B0B" Height="30" HorizontalAlignment="Left" Margin="299,136,0,0" Name="ellipse44" Stroke="#FF620B0B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="299,181,0,0" Name="ellipse45" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="129,217,0,0" Name="ellipse46" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" MouseDown="ellipse_MouseDown"/>
        <Frame Height="311" HorizontalAlignment="Left" Margin="389,0,0,0" Name="frame1" VerticalAlignment="Top" Width="114" Background="#FF161414" />
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="350,100,0,0" Name="ellipse47" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="188,28,0,0" Name="ellipse48" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="272,64,0,0" Name="ellipse49" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="129,12,0,0" Name="ellipse50" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="335,186,0,0" Name="ellipse51" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FFCDC42F" Height="30" HorizontalAlignment="Left" Margin="188,64,0,0" Name="ellipse52" Stroke="#FFCDC42F" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="346,12,0,0" Name="ellipse53" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="320,64,0,0" Name="ellipse54" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="227,52,0,0" Name="ellipse55" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="308,253,0,0" Name="ellipse56" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="165,0,0,0" Name="ellipse57" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="353,53,0,0" Name="ellipse58" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="258,28,0,0" Name="ellipse59" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FFF11919" Height="30" HorizontalAlignment="Left" Margin="350,261,0,0" Name="ellipse60" Stroke="#FFF11919" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FF151C75" Height="30" HorizontalAlignment="Left" Margin="81,12,0,0" Name="ellipse61" Stroke="#FF151C75" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FF151C75" Height="30" HorizontalAlignment="Left" Margin="308,28,0,0" Name="ellipse62" Stroke="#FF151C75" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FF151C75" Height="30" HorizontalAlignment="Left" Margin="152,150,0,0" Name="ellipse63" Stroke="#FF151C75" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FF151C75" Height="30" HorizontalAlignment="Left" Margin="227,12,0,0" Name="ellipse64" Stroke="#FF151C75" VerticalAlignment="Top" Width="30" />
        <Ellipse Fill="#FF151C75" Height="30" HorizontalAlignment="Left" Margin="350,217,0,0" Name="ellipse65" Stroke="#FF151C75" VerticalAlignment="Top" Width="30" />
        <Label Content="Time " Height="36" HorizontalAlignment="Left" Margin="421,12,0,0" Name="label1" VerticalAlignment="Top" Width="50" FontWeight="Bold" FontFamily="Verdana" Foreground="#FFA00E0E" FontStyle="Italic" />
        <Label Content="Score" FontFamily="Verdana" FontWeight="Bold" Foreground="#FFA00E0E" Height="36" HorizontalAlignment="Left" Margin="421,73,0,0" Name="label2" VerticalAlignment="Top" Width="85" FontStyle="Italic" FontStretch="Normal"/>
        <Label Content="Level" FontFamily="Verdana" FontStretch="Normal" FontStyle="Italic" FontWeight="Bold" Foreground="#FFA00E0E" Height="36" HorizontalAlignment="Left" Margin="421,127,0,0" Name="label3" VerticalAlignment="Top" Width="85" />
        <Label Content="Current" FontFamily="Verdana" FontStretch="Normal" FontStyle="Italic" FontWeight="Bold" Foreground="#FFA00E0E" Height="36" HorizontalAlignment="Left" Margin="415,181,0,0" Name="label4" VerticalAlignment="Top" Width="85" />
        <Ellipse Fill="#FF17620B" Height="30" HorizontalAlignment="Left" Margin="431,211,0,0" Name="ellipse_Current" Stroke="#FF17620B" VerticalAlignment="Top" Width="30" />
        <Label Content="0:00" FontFamily="Verdana" FontStyle="Normal" FontWeight="Bold" Foreground="#FF0E19A0" Height="36" HorizontalAlignment="Left" Margin="424,36,0,0" Name="label5" VerticalAlignment="Top" Width="50" />
        <Label Content="0" FontFamily="Verdana" FontStyle="Normal" FontWeight="Bold" Foreground="#FF0E19A0" Height="36" HorizontalAlignment="Left" Margin="424,95,0,0" Name="label6" VerticalAlignment="Top" Width="50" />
        <Label Content="1" FontFamily="Verdana" FontStyle="Normal" FontWeight="Bold" Foreground="#FF0E19A0" Height="36" HorizontalAlignment="Left" Margin="424,148,0,0" Name="label7" VerticalAlignment="Top" Width="50" />
        <Label Content="Exit" FontFamily="Verdana" FontStretch="Normal" FontStyle="Italic" FontWeight="Bold" Foreground="#FFF11919" Height="36" HorizontalAlignment="Left" Margin="427,263,0,0" Name="label8" VerticalAlignment="Top" Width="85" />
    </Grid>
</Window>

 public MainWindow()
        {
            InitializeComponent();            
        }
  //all the circles are wired to the same event and made invisible upon click and score is updated accordingly
        private void ellipse_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (((GradientBrush)((Ellipse)sender).Fill).GradientStops[0].Color == ((GradientBrush)((Ellipse)ellipse_Current).Fill).GradientStops[0].Color)
            {
                //update score
            }
            else
            {
                //update score
            }

            ((Ellipse)sender).Visibility = System.Windows.Visibility.Hidden;
        }  
        class Player
    {
        public Player(int id, string name)
        {
            PlayerId = id;
            PlayerName = name;
        }
        public void UpdateScore(int score)
        {
            Score += score;
        }
        public int PlayerId;
        public string PlayerName;
        public int Score;
    } class Player
    {
        public Player(int id, string name)
        {
            PlayerId = id;
            PlayerName = name;
        }
        public void UpdateScore(int score)
        {
            Score += score;
        }
        public int PlayerId;
        public string PlayerName;
        public int Score;
    } 
    //run on a separate thread with a time interval
    private void RefreshBoard()
    {
        //get all the circles on the board
        //for each circle make it visible and assign it a random color 
    }

Ultrabook features explored  

  1. Touch friendly (Tap a circle by using a mouse click or touch screen)
  2. Multi touch, selecting multiple circles will score more points (using WPF touch input events)
  3. Use Sensors to exit/ reset application

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

 dineshreddy512
Software Developer
United States United States
Member
No Biography provided

Article Top
 
Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
Hint: For improved responsiveness ensure Javascript is enabled and choose 'Normal' from the Layout dropdown and hit 'Update'.
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
View All ThreadsFirst Prev Next
Questionlogic and partial codememberdineshreddy51224 Oct '12 - 18:07 
Last Visit: 31 Dec '99 - 18:00     Last Update: 18 May '13 - 1:09Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

About Article
A focus game that tests players quickness and focus, provides support for touch
Type Article
Licence CPOL
First Posted 23 Oct 2012
Views 848
Bookmarked 0 times
Top News

Math Primers for Programmers

Get the Insider News free each morning.
Related Videos
Working with Touches and Taps
French C# Tutorial Lesson 24 - Refactoring
Creating a Java Application Using a Package
AQUASaver - A Go Green Game
Switch between views Mobile Safari-style
Social Network Monitoring Tool
Handling tap-and-hold
Tap Ball
Progress Reporting in C# 5 Async
Fast Share
Fiddler Extension - Fiddler Tap
Guided Access - The Little Feature With Big Possibilities
Tap Madness, Windows 8 Metro game for Ultrabooks
The next generation of social networking
Book Reader App
Using Bing Maps for Windows 8 Metro Apps - C# / JavaScript
Ultra Buddy
iPhone SharePoint Apps Shootout
BounceBall - XNA Farseer Magic
Am I There
Kloverpoint - Expand Your Social Reach
Touch browsing: Go Beyond Pan, Zoom, and Tap Using Gesture Events
Infant app
Sci-Fi Explorer
Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130516.1 | Last Updated 25 Oct 2012
Article Copyright 2012 by dineshreddy512
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid