C# & WPF: Create The Clicking Game! | Lukas Vyhnalek | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (24m)
    • 1. Introduction & GUI Creation

    • 2. 21 Functionality Clicking game

    • 3. 22 Functionality Clicking Game 2

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class, you will create the clicking game in the C# programming language. We also create a GUI (Graphical User Interface) in WPF. We use Visual Studio, I recommend you use it as well but don't worry it is free.

Another thing, that I would like to mention is that for this course you need to know the programming basics. At least know how if statements works. How loops work and how functions work. 

Meet Your Teacher

Teacher Profile Image

Lukas Vyhnalek

Microsoft Employee, Programming Teacher


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction & GUI Creation: Well, hello, guys. And welcome to this lecture and this lecture We will create d clicking game. So the idea is that we will have a rectangle somewhere ending window. And each time we click on that, the score will increment and we will The new rectangle, the D clicked, the rectangle will disappear and we will create a new rectangle. Okay? And put it somewhere on the canvas writes a memorandum position and we will have some time . And let's say something like 20 seconds or something like that. And when the time runs out, we get the final score. OK, so let's get into it. First of all, let me change the title. So this one should say something like licking game or whatever you can call it however you want, right? And first of all, we will define the canvas And in the canvas we will have the elements that we are clicking . And this time it will be a rectangle. Okay, so right now we will not add any rectangle. They will be added in the coat. Right? So inside here there will be nothing and he can mess, will have a name so that we can refer to it in deCODE, and this one will be CNN. We let's say game, then it will have a with So with will be equal to, let's say, 500. And it will also have a height which will be, let's say, 300. And well, actually, let's make it a bit smaller, so to 80 because we will have even a Heather Abbott here, so so that we don't we have a space for it, okay? And that's about it. The Kenya is all right then, well defined the menu. So up here we will be a menu when we have a new game button and the score and the time remaining. So let's get into menu. And this man, you will have the alignments so the vertical alignment will be top right with you on this at the top of the window and the horizontal alignment will be left and well said the with over It's too note 5 25 And we will also said the hype to 25 pixels. Okay. And I made a typo in here. Oh, my God! Like this. And right now, as you can see, there is the the menu. So we would like to make it a bit smaller because right now it's Subic. It's overlaps. Yeah, yeah, right now is better. So let's add the items into it. So the menu item and we want the header to say something like New Game your game and it will listen to the click event. Okay? And we will generate a new event. Okay, so menu item click. Cool. Right now, let's also close the deck like this. And let's also defined a to, let's say, text box we didn't use text box at, so I will use them. And this is a new element that we didn't use yet And we will use them for displaying the time and the score. Okay, so the next block and we will say a name to it. So name will be something like, I know text block a score. Okay. And I will also close it. It was exact. And in here I will say the text and it will say something like score is equal to zero. Maybe. Yeah, let's was do it like this. And as you can see, it's somewhere in there. I will just that A margin in there so that we can actually move it around. There it is. So I don't make it just smaller and move it up here. So that it? Yeah. So did we can see. It's quite quite good. No. Well, right now, let's copy and paste this one. And this one will represent the time remaining. Okay, So l called his one textbooks time, and it will say remaining time and then something. Right. So? Well, let's just say time. Everybody knows this will be the remaining time, right? And let's even make this one a bit bigger. So that it So that we are certain that they're there. If there is a big number, it will fit. Okay. And s So that's about it. That's the graphical user interface. Then in the program will generate all the rectangles and all the functionality to all of these. And yes, so that's it. If you have any questions, feel free to ask End. I will see you next time. 2. 21 Functionality Clicking game: Well, hello, gas. And welcome to this lecture and his lecture. We will start implementing the functionality, so let's get into it. So I'm in the coat file and right now there's only one event defined. Okay, But we will define more of them. But later on. So first of all, we won't say we want a global variable, 40 score and 40 time, right? So we'll have a public static variable integer variable, and this one will be called score. And from the beginning, it will be in the last 20 Right? And then we will have another public static in teacher with your beady time. And this will be let's say, 20 seconds are maybe a bit less 10 seconds. Cool. Then we will also define a new rend. Um, a random number generator. Okay, so RND and like this and I made a typo in here so random like this, and this will be used in order to create the A random position off the rectangle that will appear in here. Okay, Because we need somehow generate a random number and you and I will show you how to deal with the time later on. So right now what we want to do. Well, we would like to define a method that will or function that will create a new rectangle and add it into the into the canvas, right? So let's do that simply right. Private board. And this one will be called Let's Say at Rectangle and it won't accept any arguments. Okay, so it won't return any value and it will not accept any arguments, and all it will do is create a new rectangle. It's called his one temp and and it will said you with Andy height. So the temp with will be equal to 50. Andy Sandy temp height will be also equal to 50 like this. Cool. Then we will also said the film of it, right, So fail and this will be brushes dot Let's make it black. Okay, like this. So this is how we can, said the fail color off the rectangle. And yeah, there's nothing too complicated about it, but it will get complicated in a minute. So first of all we want to right now, said the position and out to said the position Well, we will generate a random X coordinate and D I coordinate, but we need to do a module operation over the with Andy haIf off the canvas, right, because the canvas have a with off 505 100 the height off 280. So you have wazoo that so we will create a new local variable called Let's Give It a X, and this one will be a equal to the new random number so random that next this will return us a new random in teacher. But this can be a huge number. It can be a number that's like hundreds off thousands, right, even millions and stuff like that. So we want to do module operation so that it fits the Canada right so that we can actually see it. And we want to do module operations over the Canada. So CNN we gain dot with and we also want to subtract from the with a 50 pixels because the with off the rectangle is 50 pixels, right? So that it fits. Actually, the Canada cool and we'll do the same 40. Why continent, Right, so like this. And I'll just simply copy paste that so we will generate a new random number and this one will be faith cure. So we just computed the X and I co ordinates and we will basically move the element the rectangle using the margin. Okay, so temp, that margin and we will set it to new thickness. As it's it's same as before. I'm quite sure I already explained this in previous lecture. So a new thickness and therefore arguments. So the 1st 1 is from left. The the 2nd 1 is from top. And then the 3rd 1 is from right. And the 41 is from Baden. Okay, so we will have X and I and then zero and zero. Right? So we basically said only the left and top co ordinate right. And that way we can move it around anywhere we want. Cool. Then we need to do is basically at the event, right, because right now we simply have a rectangle. But it is not listening to any event. Right? So when we, for example, click on Dad, nothing has happened. And how do we set a event? Well, it's quite simple. Centre right, Sam? Then name of you event so a most down right? When when we click somehow on the rectangle. We're going to do something. But then we need to do this operation so plus equal. And that basically says that all the events that are already there So all the events that the temp rectangle already have right now it doesn't have any events about if some case, maybe it had and all the events that are already there will stay there. And we will only add a new handler. Okay? And we will, at a new function bad. Right now. We don't We doesn't We don't have it defined, right? So let me just define it a bit quickly. So does it will be a private war it. And let's call this one. Rectangle mows down, and it will accept a object. The sender. Right. So that means this rectangle and it will also accept the a mouse button event arguments. And I'll just say that it will be e cool, And I will just set it to this name Magnus. Okay. So we can play with the functions, and it's basically as a variables. Okay, so this function will be set as a event handler. Condi, when you click on this rectangle. Okay, I hope, the Nixon. And now all we need to do is add direct angle to the cannabis. Right? So see, and we gain dot Children that ad and you want to add the rectangle So temp like this. And so that means this function will basically add a new rectangle. Judy canvas, Somewhere on the on some a random position indeed. Canvas. Cool. So right now we can handle the rectangle mows down. So when we click on the rectangle, what do you want to do? So we want the rectangle to disappear, Right? So we wanted to disappear from the canvas and we want to increase the score, show the score and then create a new X angle. So called this add a rectangle function. Right. So let me, first of all, delete the rectangle. So we will once again go to canvas game to the canvas, and then we will go to the Children, right? Because we want to delete something from Children on. Or in other words, we want to remove something. So in here, I'll just add remove. And what do we want to remove? Well, we would like to remove the sender, right. He center of the event So Al just type in here sender. But that won't work because computer doesn't know he accepts a a really allow element. So we will change the data type two rectangle like this because we know it is a rectangle off right? And that's it that will delete the element from canvas. Then we will increment the score so we will have the We have already the global variable score in here So we will increment it That that means we will add one to it and we will display it in the We will change the value off this text box. Right, So the takes be degs be score OK Bigsby score and we will change the text property and we'll set it to score is equal to the actual score like this Cool And right now all we need to do is add the rectangle so we'll call the at rectangle function that accepts no argument and is returning Nothing. So that will work. So yeah, this is basically the first part of the functionality. I will see you in the next lecture where we will implement the actual game 3. 22 Functionality Clicking Game 2: Well, hello, guests. And well, count to this lecture. Right now we have implemented the rectangles, and when we click on rectangle, it should disappear. And then the new one will appear and the score is also working. But we still have problem with the time, right. The time textbooks is still not showing anything. And we're going to change that. And in order to get a time or basically to get a timer, we can use something that somebody already road. So somebody already written a a class that we can use, So this will be a We will create a new instance off the glass. So public static. Right now it's called the Spectra Time. So this picture timer and let's call this one just timer and it will be a new dispatcher timer and like this. So we also need to add a multi threading library. So using system windows threading Why's that? Well, one Fred needs to keep take care off the clicking and based off the basic stuff that is going around the application, right? And the other Fred, we'll take care of the timer. Okay? And right now, in the main window. So, basically in here, we will initialize the timer. So we will basically say what the timer should do when So So the timer basically can call a event on on a tick. So it has a event cultic and it can call a method that will handle the tick. And the tick is basically that you can imagine that each second this method will be called right. It's second dis event will be fired so we can weekend said it. So, timer, then dot Dick, we we will set it in the main window, right? Every every global variable that you want to initialize, which is a object. You initialize it in the main window after the initializing off the components. So like this and we were basically at a new event to it. And we need to create a new event, right? So let's first of all, creating you event so somewhere maybe in here well, in here and I will define a new private void. And this will handle the timer dick like this. And it will once again except the sender off the event. And also the event arguments So was called m e. Cool. Then in here we will handle the the time being changed. Okay, so right now I can use the event. So it was a timer, dick like this. So we will add the event. So this one, this method dysfunction will be called for each take. So for example, each second or so each interval. And we will said the Inderal right now. So right now we are defining how often we won't the timer to fire the dick event. Okay, so, timer that interval, and we will set it to new time spent like this. And there are a few possible options, right? We can set it to milliseconds right off ticks. We can set it to basic times. So we will use this dis method. This this type right, this is probably best 40 normal user. So first argument is the hours that that will be zero. Second argument is the minutes. So that will be also zero. We wanted to fire each second. Okay, so that's why this one will be one. So one when one second elapses, the tick event will be fired. Okay? And right now, let's handle the tick event. So what do you want to do? Well, would you like to deka Mandy time? Right. So the number off seconds will be decommitted, and we would like to show it. So the textbooks, time like this textbook time and the text property will be equal to time and is the time in the time variable. Right? And also, when we run out of time, we would like to end, right? We'd like to stop. So if pretty time iss equal to zero, right? And we ran out of time, we would like to study timer, so timer, stop. Okay, this will basically study time. Or so it won't fire the tick event any anymore. And we would like to also end the game. And how do we end the game? Well, for example, we can end the game by removing all the child's from the canvas. Right? So we will remove all the rectangles. That way, user cannot click on anything, right? So then we'll work. So canvas game dot Children and clear right that were removed. All the elements in the canvas, and yes, so that's the end of the game right now. We would like to define what to do when we want to start a game. So when we want to start again, we would like to start the timer. Right. So, timer, start like this. We would also like to set the score 20 because you might play a second game. So we don't want the score to have B 20 and then start at 20 right? We want to said it zero each time we start a new game and we would also like to change the time and set it to 15 I believe flows the time. Let me just check or 10. Okay. So 10. And we would also like to at a rectangle, right. So the first rectangle that we can click on So at rectangle like this and sorry like this Don't forget about the semi coin and let me run the application. So this should be a working application. I am not sure I may have made some mistakes, So everything is possible. Bad. Let me check. So if I click on this new game, as you can see, the this dis rectangle appears the time is quite hidden. But it is working and the score is also working. And when the time runs out everything. The rectangle disappears. So when I click on new game, the ones again starts from zero. The time starts from 10. Cool. So all we need to do now is fixed the loud and the way we will do it is we can either make it a bait smaller, because right now it is. Yeah, it's it's overlapping with the window, right? So I want to make it to fit the window. And and I would like to make it a bit smaller in here like this, and we can eat it. Also make it a bit smaller as a phone. So font size and we can make it. I know 10. Yeah, let's do it like this. And the same thing goes in here and let me around the application right now. So using control and a five i randy application, and as you can see, everything looks all right. So if I click on the new game yeah, the time changes, these core changes. Everything is great. We can maybe change the color of the time, Wendy. Time gets under, for example, free seconds. So I will leave that up to you. You should be able to figure it out and yeah, that's pretty much it for this lecture. If you have any questions, feel free to ask and I will see you next time.