The last and, in my oppinion, the coolest part of this tutorial is making our doggy splash water from his fire-hose. There are a lot of ways to do this… My first idea was to make him splash a stream of water in a horizontal line… But I wasn't satisfied. Then, i figured out how to make him splash wather at an angle… But that didn't make me satisfied either. Then I decided to renew my high school math knowlege, and to force this dog to splash water to the exact point where the player would click the mouse… And, how does this look in theory? Here's a drawing…
Here's a little legend: Point B is the point where player clicked. Point A is the starting point of the splash. So, that makes the blue line c our splash. Angle alpha is the angle of the splash. It can be positive, or negative. So, how can we figure out the lenght of the splash (c), and it's angle (alpha)??? Just a little math. Our points are defined with x and y coordinates. So, if we know the horizontal coordinate for B, and the width of our game field, then we know the lenght of the red line b. And on the same priciple, we can find the lenght of the red line a. Calculating splash lenght c is just a matter of Pythagoras. Remember that jibberish your math teacher filled your hed with? I hate to admit it, but, it came useful. So, here's the equation:
(Pythagoras' theorem):
That's how we would write it on a peace of paper. And to make our C# understand it, we can write it like this:
int c = (int)Math.Sqrt(a * a + b * b); And if we have two sides of the triangle calculated, we can determine the angle with another math operation… Uff… Here's the equation:
Again, translated into C# il would look like this:
float alpha = (float)Math.Atan
((double)a / (double)b); To rotate an image, we'll use matrix translations… More math… Ah well… So, now when we finally have everything, we can write the code. Here it is. Enjoy it, it's your last peace of code in this tutorial.
private void Splash(int MouseY, int MouseX)
{
// Point A:
Point pStart = new Point
(picGameField.Width - 1, 195);
// Calculating the lenght of the splash,
// and other sides of the triangle:
int a = (picGameField.Height - MouseX
- (picGameField.Height - 215));
int b = (picGameField.Width - MouseY);
int c = (int)Math.Sqrt(a * a + b * b);
// Calculating the angle of the splash:
float alpha = (float)Math.Atan
((double)a / (double)b);
// Convert from Radians to Degrees
alpha = alpha * (float)(180.0 / Math.PI);
int x = picGameField.Width - c;
int y = 195;
// Defining the position of our splash image:
Rectangle rSplash = new Rectangle(x,y,c,50);
Graphics gSplash = picGameField.CreateGraphics();
// Matrix rotations:
Matrix X = new Matrix();
X.RotateAt(alpha, pStart, MatrixOrder.Append);
gSplash.Transform = X;
// Drawing our image to the screen:
gSplash.DrawImage(picSplash.Image, rSplash);
// Pause for a moment:
System.Threading.Thread.Sleep(100);
// Getting rid of our splash image:
gSplash.Dispose();
}
Obviously, we need some mouse coordinates for this code to work... In the next (probably the last) post - I'll post the whole source code for the project. With a download link... :) I know I skipped a few parts of the code, so, you'll be able to 'grab' them from actual project files! :)
Every game has a way to put a value to the player's effort. In racing games that's done with time (in most cases). In tycoon games, that would be done with money. In our game, we'll just use numbers. So how should we evaluate our players effort? First of all, we have to give him points for every block he destroys. We could make our game give him more points with every new level, and some extra points for the number of different block colors for that level. And some extra scoring math: We could make every block color more valuable... So, let's start with adding a new label to our form, so we could display the score to the player.
The score label properties:
Label
- (name): lblScore
- BackgroundColor: Web > Transparent
- Location: 555;65
- Font: Microsoft Sans Serif; 9,75pt; style=Bold
- Text: 0
Then, add this code to your project:
(put it in the DoTheScoreMath() method.)
// We'll process the score only
// if there's multiple blocks
// in the 'Connected List'.
if (ConnectedList.Count > 1)
{
// I've declared some
// variables to hold
// some values I intend
// on using to calculate
// the score.
int a = ConnectedList.Count;
int b = iLevel;
int c = iColor;
int d = ConnectedList[0].iFieldColor;
// Scoring formula...
// You can play with it
// as you like :)
int e = a * (b + c) * d;
// Just don't forget to
// add it to the total
// score:
iScore += e;
}
// Oh, and to be a little
// naughty, we'll substract
// a point for every click
// the user makes...
// BUAHAAHAAHHAAAAA!
iScore--;
// Display the total score:
lblScore.Text = iScore.ToString();
Now, add the call in the 'picGF_MouseClick' method, after the existing code:
DoTheScoreMath()
Done? Cool! Ok, what now? Levels would be cool... Right, then! Next chapter: Levels!
In our game, we'll use the mouse as an input device. Player will be able to click anywhere in the game field, and we'll have to figure out if he clicked a block, or an empty field. If the player clicks on the block, we'll have to check if it's connected with any other block of the same color, and we'll have to destroy the blocks if so. And to add a little feature, we'll take away one point for every mouse click. (Wich reminds me… We'll have to make a score counter, real soon.) So, how the hell can we find out where the user clicked? Lucky for us, the Picture Box in wich we draw our game field, has a MouseClick event. So, we'll use it to see if the user clicked anywhere on the game field. But how to find out on what block the user clicked? A little basic math will help us solve this problem. We already have defined that the block field is 32 pixels in width/height. And lucky for us, VS.net can give us the coordinates of the mouse pointer on the screen, and in relation to the clicked object. That means, that VS will give us the distance from the top and left borders of the picture box, measured in pixels. So, those are the ingreedients. Let's mix them all together and see how they work. First of all, go to your design window, select the Picture Box, and then, go to your Properties window. Just above the properties list ther is a little icon of lightning. Click on it, and you'll see the events list. Find the MouseClick event, and double-click on it's name. This should give you the code editor window with the method already in place. Here's the code for it:
// We find the X and the Y coordinate of
// the mouse using the mouse event arguments
// (called 'e'). We'll store them into some
// variables. Note, how we switched X and Y's
// place – that's because we declared our game
// field in the opposite way – X for height
// and Y for width. I know… Goofy…
int mx = e.Location.Y;
int my = e.Location.X;
// The next step is to divide the mouse
// coordinates with the block/field size,
// so we'll get the coordinates of our field.
decimal x = mx / iFieldSize;
decimal y = my / iFieldSize;
/ And to round them up (since they came
// back as numbers with decimals) we
// convert them right back into intigers.
// Not to mention that we need them as
// integers, to define our fields.
int ix = (int)x;
int iy = (int)y;
This code will give you exact coordinates of the block player clicked. Ok, what's next? Obviously, we'll have to see if the block player clicked, is actualy connected to other blocks of the same color. And we'll do just that – in the next chapter.
